Manual theme selectors (b2b)

The app does not modify your theme code, it automatically updates the storefront in the browser. It does this by automatically searching for the right locations on your storefront. 

There can be cases where the app is not able to find the right location or even finds the wrong location. You can manually add selectors to your theme code to provide specific locations for the app to display/update individual elements. 

Theme settings

In the App > Settings > Theme settings section, you can control elements are automatically located and updated:

Note: in most cases the "Auto" settings should be left on enabled.

Manual selectors

The app will always look for the manual selectors and prioritize the locations if found, it's the most efficient way to update the products on your store.

Product

The product attribute should be placed on the element that wraps a single product on your store, e.g:

On this collection page, the <li class="grid__item"> would be the best location.

In the theme code, you would add the attribute like this:

After saving the template, we can check the HTML in the browser, it should show the attributes like this:

Product detail

The product detail page normally is detected very efficiently, but if you want to disable the "Auto locate product" setting, you have to make sure to also mark the wrapper element of the product with the same attribute:

Product price

When the Product selector from above is setup correctly, then the product price is detected very efficiently, so in most cases these selectors are not required. There can still be cases where it makes sense to mark the prices for the app to update the right locations.

The attributes should be placed on the elements wrapping the product price value: