Asset Publisher

Product Detail Page

To add the recommendation widget to the product detail page, we can use one of the following options:

  • app blocks with Online Store 2.0 themes
  • product descriptions
  • or editing theme files (Advanced).

Note: App blocks can only be used with Online Store 2.0 themes. If your theme is not an Online Store 2.0 theme, please use other options to embed the widget..

  1. Go to Shopify Admin Panel -> Online Store -> Themes
  2. Under "Current Theme" section, click on "Customize" to edit the customize the current theme.
  3. In the Theme Editor, select the "Products" -> "Default Product" (or the corresponding product template you want to use) in the page selector dropdown.
  4. On the product page of the theme editor, add a new block or new section using the left side panel:

    Then select the widget you want to add under "Apps":
  5. Preview the changes on the page.
  6. Click on "Save" button on the top right to save your changes.
  7. Now go to the product page of your website that you just edited. Voilà, the recommendation widget shows up on the page!

Note: this approach will only add the recommendation widget will only be added to one specific product. To add the recommendation widget to all products, please use option 2 - editing theme files (Advanced).

  1. Go to Shopify Admin Panel -> Products
  2. Click on the product you want to add the recommendation widget on to open the edit product page.
  3. On the edit product page, Insert the widget HTML snippet in to the product description HTML source.
    • First, click on the "Show HTML" icon to switch to the HTML source editor mode.
    • Second, copy the widget HTML snippet and paste it into the desired place in the HTML Source Editor. The recommendation widget will be rendered at the same that you put the widget HTML snippet on your website. In this example, we added the widget to the end of the product description.
      Note: The recommendation widget will only render on your actual website. It is normal that you don't see the recommendation widget on the edit product page.
  4. Click on "Save" button to save the product.
  5. Now go to the product page on your website for the product you just edited. Voilà, the recommendation widget shows up on the product page!

Note: If you are theme developer, skip this tutorial and use your local liquid development environment to insert the widget HTML snippet . Otherwise, please continue reading.

  1. Go to Shopify Admin Panel -> Online Store -> Themes
  2. Under "Current Theme" section, click on Actions -> Edit code to edit the liquid theme code.
  3. On the left side of the Theme Editor, click on Sections -> product-template.liquid template file. Note: the files layout and content may vary based on different themes.
  4. In the product liquid template file, add the widget HTML snippet at the desired place. See Shopify official documentation for how to edit the theme file. In this example, we added the widget to the bottom of the product page:
  5. Click on "Save" to save your changes.
  6. Now go to the product detail page of your website that you just edited. Voilà, the recommendation widget shows up on the page!
View »