To add the recommendation widget to category page, we can either use

  • Option 1 - Marketing banners
  • Option 2 - Editing theme files (Advanced).


Option 1 - Marketing Banners


Note: Since one marketing banner can only target one single category, if you have multiple categories, you will need to create multiple marketing banners (one marketing banner for each category). If you want to add the recommendation widget to all of the categories, please use option 2 - editing theme files (Advanced). 



1. Go to BigCommerce Admin Panel -> Marketing -> Banners 





2. Click on "Create Banner" button to create a banner. Or if you have existing banner that you want to use for embedding the widget, click on the existing banner to edit.



3. Enter the any banner name you want. In here we use "Demo RecCommerce Widget" as the banner name. The banner name is for your reference only and will not be shown on your website.




4. In the Banner Content field, we want to insert the widget HTML snippet.     




5. Choose "For a Specific Category" for "Show on Page" and choose either "Top of Page" or "Bottom of Page" for the "Location": 




6. Click on "Save" button to save the marketing banner. 




7. Now go to your category page of your website. Voilà, the recommendation widget shows up on the category 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 -> category.html to open the category page html template. Note: the files layout and content may vary based on different themes. 




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





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 your category page of your website. Voilà, the recommendation widget shows up on the category page!