Manual theme selectors (options)

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. 

Note: If you setup your theme to include a manual selector, it's not required to disable the automatic theme updates, the app always first looks for a manual selector before using the automatic location. 

Theme editor

To open the Shopify Admin theme editor, navigate to  Online Store > Themes,  [Actions] > Edit Code.

Cart item

The location of a single cart item is the most important selector for the app. The cart item location is used as a starting point for other locations like the cart item image.

In the theme editor, search for "cart" to show your themes cart related code. 

Common locations are:

• sections/cart-template.liquid  (most themes)
• templates/cart.liquid 

{%- for item in cart.items -%}
    <div class="item" data-live-item-key="{{ item.key }}" >
 	....
    </div>
{%- endfor -%}
	

Cart item image

If your product has a live preview, the app can update the cart item image with the preview thumbnail. First make sure to setup the live preview to show the thumbnail in the cart.

In the theme editor, in the same code location as described in the cart item above, look for the  <img> element where the item.image is displayed:

<img src="{{ item | img_url: 'x190' }}" alt="{{ item.image.alt | escape }}" data-live-item-image />

On the img element, add the attribute:  data-live-item-image

Cart item price

The app has to update the cart item price if the options have price add-ons, the following are all the selectors used to update the price of a cart item. 

Cart total

If the cart contains products that have options with price add-ons, the app will automatically update the cart total.  
Use the following selector to provide a manual location:

Cart count

If the cart contains products that have options with price add-ons and is not using draft orders, then the app will add a second hidden product to the cart. The count is automatically updated to exclude the hidden product. 
Use the following selector to provide a manual location:

Checkout button

If the app price add-ons setting is set to create draft orders, then the app has to watch the click on the checkout button to create a draft order if price add-ons are used. 

In most themes this is done automatically, but if the theme uses a very custom way of going to checkout or if there is another app trying to take over the checkout, it is required to apply the following selector on the checkout button for the app to make sure it can capture the checkout flow.

Product price

If a product has options with price add-ons the app will update the product price automatically. 

Use the following selector to provide a manual location:

Product price compare

The compare at price setting on the product that is shown with a line trough on most themes is NOT updated automatically. 

To update this price to include the price add-ons, you have to add the selector manually:

For the Dawn theme the location can be found in the file:  snippets/product-price.liquid 

Product options

The product options location has its own setting described in: How can I change the location of the product options?

If you leave the location settings on "Automatic", you can still provide a custom selector to provide a manual location:

Product live preview

The live preview has its own setting described in: Live preview image location

If you leave the location settings on "Automatic", you can still provide a custom selector to provide a manual location: