BigCommerce
  • Personalization for BigCommerce
  • Installing
    • Granting Access to your Store
    • Adding/Moving Recommendations
    • Customizing Product Metadata
    • Configuring Tax Rates
  • Disabling Nosto
  • Features
    • Variations (Configurable Products)
    • Add to Cart
    • Supplier Cost & Inventory Level
    • Ratings & Reviews
    • Customer group pricing
    • Marketing permission and GDPR compatibility
  • FAQ
  • Visit Nosto
  • Issues
  • Releases
Powered by GitBook
On this page

Was this helpful?

  1. Installing

Adding/Moving Recommendations

In order to move recommendations, you will need to edit your theme. Follow BigCommerce's instructions on editing theme files to edit your theme.

Use BigCommerce's theme editor to find the associated Stencil file to edit it. In the editor, you will need to find the corresponding placeholder, after which, you can reposition, remove or even add a new placeholder.

Please note that we replace the content of the placement with the fully rendered recommendation, so please place an empty div on your theme where the recommendation should be placed. For example:

<div class="nosto_element" id="frontpage-nosto-1"></div>

You can read a more detailed explanation about how placements work in our placements help article.

Note: We recommend duplicating your published theme i.e. creating a clone of the live theme, making edits on the duplicated theme and setting it as your published theme once you have validated your changes.

List of default recommendation placeholders

Nosto places the following recommendation placeholders on the site.

Element Name
Theme File

<div class="nosto_element" id="frontpage-nosto-1" />

templates/pages/home.html

<div class="nosto_element" id="frontpage-nosto-2" />

templates/pages/home.html

<div class="nosto_element" id="frontpage-nosto-3" />

templates/pages/home.html

<div class="nosto_element" id="frontpage-nosto-4" />

templates/pages/home.html

<div class="nosto_element" id="nosto-page-product2" />

templates/pages/product.html

<div class="nosto_element" id="nosto-page-product2" />

templates/pages/product.html

<div class="nosto_element" id="nosto-page-product3" />

templates/pages/product.html

<div class="nosto_element" id="nosto-page-category1" />

templates/pages/category.html

<div class="nosto_element" id="nosto-page-category2" />

templates/pages/category.html

<div class="nosto_element" id="nosto-page-search1" />

templates/pages/search.html

<div class="nosto_element" id="nosto-page-search2" />

templates/pages/search.html

<div class="nosto_element" id="nosto-page-cart1" />

templates/pages/cart.html

<div class="nosto_element" id="nosto-page-cart2" />

templates/pages/cart.html

<div class="nosto_element" id="nosto-page-cart3" />

templates/pages/cart.html

PreviousGranting Access to your StoreNextCustomizing Product Metadata

Last updated 1 year ago

Was this helpful?