Publish a Product Description Page Display (PDP)

Follow these directions to publish a product description page display (PDP):

1. Open your Publish Center.

2. Click the "Install Product Displays" button.

3. Give your PDP a display name and filter.

4. Proceed with customizing the other categories:

   • Display Layout
     Horizontal and Coverflow are recommended. Go to Display Layout to learn more.

   • Header Customization
     Customize Header Layout, Header Text, Uploader Button, View Gallery Button. Go to Header Customization to learn more.

   • Interactive Social Hub
     Go to Set up an Interactive Social Hub to learn more.

   • Design Editor
     Customize & create your own theme be clicking “Customize Selected Theme” or by clicking the pencil icon beside a theme. Go to Design Editor Guide to learn more.

   • Lightbox Type
     By default, it will be the product CTA if there is a product tagged to a photo. Customize the fallback call to action that will appear in the lightbox when a photo is clicked by a user and there is no product tagged. Go to Lightbox to learn more.

   • Sort Order
     Select the order in which you want photos to appear in your display. Go to Sort Order to learn more.

5. Click the "Save" button.

6. Click the "Generate Embed Code" button.

7. Go to our developer documentation and follow the customization instructions according to your content management system (CMS) listed below: 

   • Shopify

   • Magento

   • Magento 2

   • Big Commerce 

   • Demandware

   • Custom

If you have a custom CMS, then you'll need to discuss with your developer on how to get the product SKU ID to recognize the current product's SKU ID within your product's template page. 

For instructions on customization for SFRA, please take a look at this article here.

The PDP embed code only needs to be installed once on the product template. The key parameter in the snippet is SKU ID, which supplies the SKU ID of the current product page. This configuration fills the PDP with approved content that has at least one tag that maps to the current product.

Sample Code:

<div id="pixlee_container"></div>
<script type="text/javascript">
  window.PixleeAsyncInit = function () {
    Pixlee.init({ apiKey: "Account API Key" });
    Pixlee.addProductWidget({
      accountId: 829,
      widgetId: 580345,
      skuId: "<= ENTER YOUR SKU ID CODE >",
    });
  };
</script>
<script src="//assets.pixlee.com/assets/pixlee_widget_1_0_0.js"></script>

Do you have feedback or more questions? Contact us directly at support@pixleeteam.com.