Please note: The following is intended as a guide, but we strongly recommend you are comfortable modifying code and working within Magento. You will very likely want to create a child theme, to prevent your installed Product Page Gallery being lost upon theme updates.
1️⃣ Copy your PPG code from the 'Product Page Galleries' section
You'll find this section within your Sauce backoffice, under the Visual Shopping navigation. From here, click to 'Copy embed code'
2️⃣ Determine your Magento Theme Product Page template
This can vary widely based on your Magento setup. In a basic Magento setup, using the 'Luma' theme for example, the Product template is available at:
magento/vendor/magento/theme-frontend-luma/Magento_Catalog/layout/catalog_product_view.xml
Where an unedited version may look something like the following:
<?xml version="1.0"?>
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<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️⃣ Paste in your Sauce PPG, specifying the location
You'll now want to paste in your Sauce PPG code. In this basic example, we use a <referenceContainer>
and <block>
where you specify where on the Page you like the PPG gallery to appear.
In the following example, we specify the location as before="catalog.product.related"
but this will vary based on your current theme. In this example, you would add the following into the <body>
of the code above:
<referenceContainer name="content">
<block class="Magento\Framework\View\Element\Text" name="snapppt.widget" 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>
Save your changes, flush your Magento cache and your shiny new PPG should be showing. If not, ensure that you are looking at a Product Page which you have linked to via your Sauce Media Product Tags.
Hopefully the above is enough to get you going, but if you have any questions - ping us a message, we'll be happy to help.