Manual theme selectors

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

Selector Example
[data-live-item-key="item.key"] data-live-item-key="{{ item.key }}"

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 
in your cart-template.liquid file you will find a piece of code that loops over the cart items, look for something like:
{%- for item in cart.items -%}
    <div class="item" data-live-item-key="{{ item.key }}" >
 	....
    </div>
{%- endfor -%}
	
On the first child element below the loop, add the attribute: data-live-item-key="{{ item.key }}"
Important:  If you theme has an additional slide out or mini cart, make sure to add the selector there as well. 

Cart item image

Selector Example
[data-live-item-image] data-live-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. 

Description Selector Example
single quantity price [data-live-item-original-price] data-live-item-original-price=""
single quantity price - discounts [data-live-item-final-price] data-live-item-final-price=""
total quantity price [data-live-item-original-line-price] data-live-item-original-line-price=""
total quantity price - discounts [data-live-item-final-line-price] data-live-item-final-line-price=""

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:

Selector Example
[data-live-cart-total] data-live-cart-total=""

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:

Selector Example
[data-live-cart-count] data-live-cart-count=""

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:

Selector Example
[data-live-price="product.id"] data-live-price="{{ product.id }}"

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:

Selector Example
[data-live-options="product.id"] data-live-options="{{ product.id }}"

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:

Selector Example
[data-live-preview="product.id"] data-live-preview="{{ product.id }}"

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.