Publish a Product Description Page Display (PDP)

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

1. In Emplifi UGC, open the Publish Center.

2. Click the "Publish New PDP Display" 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.

   • Gallery Link
     Create a clickable call-to-action (CTA) button that can be attached to all user-generated content (UGC) within your gallery. See Gallery Link 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? You can contact us through our Emplifi Customer Center.