Fix theme options not saved (sticky cart)

If the options are not saved when adding to the cart, follow the steps below to fix the setup. 

Note:  first make sure that the options are actually not saved. Try the checkout to see if the options are visible there:

If you can see the options on the checkout but not on the cart, your theme might simply not show them, in this case you can visit the following guide: Options on cart page

If the options are not listed on the checkout, the setup is not working as intended.  This can be due to two reasons:

Sticky Cart 

Sticky add to cart buttons at the bottom of the page on most themes only add the product variant to the cart, this completely skips all the custom options entered on the product page.

Theme does not support saving options

A very small percentage of themes to not support saving custom line item properties.

This is a standard feature of shopify, most professional theme will support this out of the box.

Add to cart fix

To make sure all custom options are saved in all cases, the app can use its own add to cart logic when an add to cart button is clicked.

On your theme, find the location of the specific "Add to cart" button, find a wrapper DIV or add a new element around the button and add the attribute data-live-cart-add to the element:

<div data-live-cart-add>
 <button type="submit" name="add">Add to cart</button>
</div>

The app will then look for this attribute and use it's own add to cart logic.  

Only use this when options are actually not saved

The attribute makes the app take over the add to cart process, which means the theme's own add to cart handler no longer runs. Do not add it as a general precaution. Apply it only on a button where you have confirmed that the options are missing from the checkout.

Side effects on themes with a cart drawer

Because the theme's handler is skipped, on a theme with an AJAX cart or a slide-out cart drawer the customer is redirected to the /cart  page instead of the drawer opening.

If you need the attribute and want the drawer back, use the window.clOnCartUpdate  hook to re-open and refresh your theme's drawer after the app has added the item.

You can add it to your theme's code or in the App global JS setting and make sure to replace the selector with your theme's drawer trigger:

window.clOnCartUpdate = () => {
  const cartDrawerButton = document.querySelector('.js-drawer-open-cart');
  if (cartDrawerButton) {
    cartDrawerButton.click();
  }
}

Removing the attribute

The attribute is not required for the app to save options, prices or line item properties. On most themes the options are saved through the theme's normal add to cart. If you inherited it from a previous setup, duplicate your theme, remove the wrapper there and test the full flow (options saved, price adjustments, drawer, tracking) before changing your live theme. A sticky add to cart button usually forwards to the main add to cart button, so removing the attribute from the main button is normally enough.