Installing the Sauce Product Page Gallery on Magento 2

Important

This guide is intended for Magento 2 developers or merchants who are comfortable working with Magento themes and layout XML.

We strongly recommend implementing the gallery within your custom theme or child theme rather than editing Magento core files or vendor files directly. This ensures your changes are preserved during Magento and theme updates.

1. Copy your Sauce Product Page Gallery embed

From your Sauce backoffice:

Visual Shopping → Product Page Galleries

Locate the gallery you wish to install and click Copy Embed Code.

You’ll use this code in the following steps.

2. Locate your Product Page layout XML

The exact location depends on your Magento theme and whether you’re using a custom frontend.

Most Magento 2 stores override the default product page layout within their custom theme. For example:

app/design/frontend/<Vendor>/<Theme>/Magento_Catalog/layout/catalog_product_view.xml

If you’re using the default Luma theme, the layout originates from:

vendor/magento/theme-frontend-luma/Magento_Catalog/layout/catalog_product_view.xml

Avoid editing files inside the vendor/ directory. Instead, copy the layout into your custom theme if it doesn’t already exist.

A basic catalog_product_view.xml may look similar to:

<?xml version="1.0"?>
<page layout="1column"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

    <body>
        <move element="page.main.title"
              destination="product.info.main"
              before="-"/>

        <move element="product.info.stock.sku"
              destination="product.info.price"
              after="product.price.final"/>

        <move element="product.info.review"
              destination="product.info.main"
              before="product.info.price"/>
    </body>

</page>

3. Add the Sauce gallery to your layout

Within the <body> section, insert a new referenceContainer containing your Sauce embed.

In the example below, the gallery is inserted immediately before Magento’s related products block.

<referenceContainer name="content">
    <block
        class="Magento\Framework\View\Element\Text"
        name="sauce.product.gallery"
        before="catalog.product.related">

        <arguments>
            <argument name="text" xsi:type="string"><![CDATA[

                <!-- Sauce Product Page Gallery -->
                <div class="snpt-wdgt--ppg">
                    <script
                        async
                        src="https://app.addsauce.com/widgets/ppg/123-example"
                        class="snapppt-widget">
                    </script>
                </div>

            ]]></argument>
        </arguments>

    </block>
</referenceContainer>

Replace the example widget URL with the embed code copied from your Sauce dashboard.

Choosing the correct placement

Every Magento theme structures its product page differently, so the before="catalog.product.related" attribute is simply an example.

While the Sauce Product Page Gallery can be placed almost anywhere within the product page layout, brands using Sauce typically achieve the strongest results when the gallery is positioned as high on the page as practical without disrupting the purchase journey.

As shoppers scroll, the proportion of visitors who see each section of the page decreases significantly. Placing the gallery closer to the top gives it the greatest opportunity to influence product discovery and purchasing decisions.

Approximate position on page	Typical shopper visibility*	Recommendation
Above the fold	~100%	⭐ Best placement
Immediately below Add to Cart	~85-95%	⭐ Highly recommended
Below product media gallery	~75-90%	✓ Recommended
Below product description	~50-70%	✓ Good
Above related products	~30-45%	Acceptable
Above cross-sells / upsells	~20-35%	Lower impact
Near the bottom of the page	<20%	Not recommended

*Figures represent typical ecommerce scroll behaviour and will vary by store, device and page length.

Common placement options include:

Immediately below the Add to Cart section (recommended)
Directly beneath the product media gallery
Below the product description
Above Related Products
Above Cross-sells or Upsells
Elsewhere within your product layout where it complements the buying journey

Consult your theme’s catalog_product_view.xml layout file to identify the most appropriate container or block reference for your implementation.

4. Deploy your changes

After saving your layout XML, clear Magento’s caches:

bin/magento cache:clean
bin/magento cache:flush

If you’re running in Production Mode, you’ll typically also need to deploy static content and, where appropriate, recompile dependency injection:

bin/magento setup:upgrade
bin/magento setup:di:compile
bin/magento setup:static-content:deploy

The exact deployment commands will depend on your deployment workflow.

5. Verify your installation

Open a product page that has been linked to Sauce media using Product Tags.

If the gallery does not appear:

confirm the correct Sauce embed code has been installed
verify the product has tagged Sauce media
check that the selected layout container exists within your theme
inspect the browser console for JavaScript errors
confirm the Magento caches have been cleared
verify any CDN or Full Page Cache (Varnish/Fastly) has been refreshed if applicable

Need help?

Magento themes can vary considerably, particularly on heavily customised storefronts. If you’re unsure where the gallery should be inserted, or would like help selecting the optimal location for your product page layout, get in touch with the Sauce team and we’ll be happy to help.