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

  • Option 1 - Product Descriptions
  • Option 2 - Editing theme files (Advanced)



Option 1 - Product Descriptions



1. Go to BigCommerce 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, scroll down to the "Description" field and insert the widget HTML snippet in to the product description HTML source.    


  • First, click on the "HTML" icon switch to the "Edit HTML Source" mode. The "HTML Source Editor" will pop up.
  • Second, copy the widget HTML snippet <div class="reccommerce-slot" data-slotname="personalized-recommendation"></div> 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.
  • Click on update button on the HTML Source Editor to finish editing the HTML. 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!




Option 2 - Editing Theme files (Advanced)


Note: If you are theme developer, skip this tutorial and use your local stencil development environment to insert the widget HTML snippet <div class="reccommerce-slot" data-slotname="personalized-recommendation"></div>. Otherwise, please continue reading. 



1.  Go to BigCommerce Admin Panel -> Storefront -> My Themes


   


2.  Under "Current Theme" section, click on Advanced -> Edit Theme Files to open the Stencil Theme Editor in a new window.

Note: if you are using a out of the box BigCommerce theme, you may not see the "Edit Theme Files" option. You will need to click on "Make a Copy" first to make a copy of your theme, then apply the theme copy as your current theme in order to edit the theme files. See BigCommerce official document for details.

3.  On the left side of the Stencil Theme Editor, click on templates -> pages -> product.html to open the product page html template. Note: the files layout and content may vary based on different themes.

   



4.  In the produtc.html file, add the widget HTML snippet <div class="reccommerce-slot" data-slotname="personalized-recommendation"></div> at the desired place. See this 

  •  for how to edit the theme file.

   



5.  Click on "Save & apply file" to save your changes. It may take several minutes to save and apply the changes to your store website.

 

  


6. Now go to the product page of your website. Voilà, the recommendation widget shows up on the product page!