Adding Recommendation widgets to BigCommerce themes manually

After creating the Recommendation widget, you need to add its auto-generated code to your theme files manually to show it on the storefront. There are 2 ways to do so:

1. Using the Page Builder – the most simple way.
2. Editing the theme files.

Add the Recommendation code using the Page Builder

Steps:

1. Choose a page in your online store where you want to insert the widget.
   
   Important info

   The Similar Products widget works only for product pages.

2. Go to your storefront from the BigCommerce admin panel.
3. Go to the page you’ve chosen on the first step. For example, the product page.
4. Switch on the Page Builder mode clicking Design this page in Page Builder in the top panel.

   

5. In the Page Builder mode, select the HTML block and locate it on the page where you want to show the widget.

   

6. Copy the code from the created Recommendation widget in the Searchanise control panel > Recommendations.
   

   

7. Paste the code into the HTML block.

   

8. Click Save HTML.
9. Publish the changes.

That’s it. The widget is now displayed on the storefront.

Add the Recommendation code editing theme files

Stencil themes

Steps:

1. Choose a page in your online store where you want to insert the widget.
   
   Important info

   The Similar Products widget works only for product pages.

2. Go to BigCommerce admin panel > Storefront > My themes > Current theme.
3. Make a copy of the current theme to create a backup. It will help you revert the changes if necessary.

   

4. Click the Advanced drop-down menu of the current theme to view the list of actions.
5. Select Edit Theme Files and the Theme Editor will open.

   

   Important info

   If you don’t see the Edit theme files option, you have a default theme from the marketplace. To edit the theme code you’ll need to make a copy of it and apply the copied theme to your storefront.

   Copied themes are considered custom themes and will not receive Marketplace Theme Updates.

6. Open the file with the page you’ve chosen on the first step.
7. Copy the code from the created Recommendation widget in the Searchanase control panel > Merchandising & Promo > Recommendations.

   

8. Paste the code into the file where you want to show the widget.
9. Click the Save & Apply file button and confirm the action to save the changes.

That’s it. The widget is now displayed on the storefront.

Blueprint themes

Steps:

1. Choose a page in your online store where you want to insert the widget.
   
   Important info

   The Similar Products widget works only for product pages.

2. Go to BigCommerce admin panel > Storefront > My themes > Current Theme.
3. Click the Download Theme link to create a backup file. It will help you revert the changes if necessary. 

   

4. Click the Edit HTML/CSS link to open the in-browser template file editor. 

   

5. Open the file with the page you’ve chosen on the first step.
6. Copy the code from the created Recommendation widget in the Searchanase control panel > Recommendations.

   

7. Paste the code into the file where you want to show the widget.
8. Save the changes.

That’s it. The widget is now displayed on the storefront.

Widget’s customization

If the added Recommendations differ from other blocks on your website, you can view via Web Inspector an existing theme block whose appearance is suitable for the Recommendations widgets and add its outer HTML code to the code of the Recommendations widgets.

For example, let’s view the blocks of the Fortune Minimal theme:

1. Select the block of the theme and go to the Web Inspector to view its HTML code:
   Note

   In Google Chrome you can go to the Web Inspector by pressing the F12 key.

   

2. Copy the HTML code of the block and add it into the Searchanise code of the Recommendation block you’ve pasted into the HTML block or the theme files:

   <section class="layout-module"> 
       <!-- The Searchase code of the Recomendation Widget --> 
   </section>

3. Save the changes.

You can also add the additional classes to the Searchanise code and customize the widget using the Custom CSS feature.

If you need help with that, feel free to contact us. Our support team will gladly help you.