Options Price Add-ons - Cart Product

This page is dedicated to the options price add-ons that have draft orders disabled. If you have draft orders enabled, visit the following help documentation: Options Price Add-ons - Draft Order

How it works

As Shopify does not support dynamic prices natively, the app will add a second hidden product when the main product is added to the cart. This product is used to add the additional options prices to the main product. The app will make sure that the hidden product cannot be removed or edited directly.

You can view this video to see how it looks on a store.

The price of the hidden product is set to the value "0.01": 

The price is used to be able to add the dynamic price additions. 
E.g if an option has a price of 9.99$ the app will automatically add this product when the main product is added to the cart with the quantity set to 999, which results in 999x0.01 = 9.99. 

Product setup

In the app navigate to the "Settings" tab, in the "Price settings" section, make sure "Use draft orders" is disabled,  click on "Setup product":

After the product is setup, you can view it in the Shopify Admin. You can freely edit the fields of the products and also upload a custom image or rename the product to better fit with your store.  Just make sure not not edit the price as the price is used to calculate the total.

Sales channel

In the Shopify Admin, on the product detail page, make sure that the product is set be available on the Online Store:

Product price

Automatic

The app will automatically update the product price to include the options price. 

Manual

In most cases this setup should not be required, but you can still provide a custom location for the updated product price by adding the data-live-price="{{ product.id }}" attribute on the product detail price element:

<span class="price-item price-item--regular" data-live-price="{{ product.id }}">
    {{ price | money }}
</span>

Cart price

As described in the "How it works section" above, the app will add a second product to the cart whenever a product configuration has dynamic price additions.

Automatic

The app will automatically hide this product from the cart page and also add the price back onto the main product. 

Manual

To prevent the hidden product to be visible for a short period of time, you can edit your theme code to exclude the product from rendering.

In your  cart-template.liquid file you will find a piece of code that loops over the cart items, right after the beginning of the loop add the condition to skip the product with the type "options_price":

{%- for item in cart.items -%} 
  {% if item.product.type == "options_price" %}{% continue %}{% endif %}    
  ...
{%- endfor -%}
	

JavaScript

Some themes will render the cart again inside the browser using Javascript.  This code is different depending on your theme, the following is an example on how to exclude the hidden product on the Debut theme:

_createLineItemList: function(state) {
   return state.items.map(
        function(item, index) {
          // exclude options price addons
          if(item.product_type == 'options_price'){
            return document.createElement('span');
          }
       	  ....
  	});
}

Cart count

The app can add a large quantity of the hidden product to the cart to represent the individual options price adjustments.

Automatic

The app will automatically replace the cart count to exclude the hidden product.

Manual

The prevent the cart count to include the hidden product at all, you can edit your theme code and remove the output of the cart count in the theme. Look for {{ cart.item_count  }} in your theme: 

<span>{{ cart.item_count }}</span>

Remove the count variable and add the  data-live-cart-count attribute instead

<span data-live-cart-count></span>

The app will then automatically fill in the cart count without the hidden products.

JavaScript

Some themes will render the cart count in the browser using JavaScript.  You can just comment out the update of the cart count. This code is different depending on your theme, the following is an example for the Debut theme:

 _setCartQuantity: function(quantity) {
      ...
      //this.cartPopupCartQuantity.textContent = quantity;
},

_setCartCountBubble: function(quantity) {
      ...
    // this.cartCount.textContent = quantity;
},

Checkout

The Shopify checkout will list the product options price separately, the second product will always be right below the main product, and the options and the price will be included in the description:

Automatic

Apps are not allowed to modify the checkout process unless the merchant is using Shopify Plus.

Manual

If you are on Shopify Plus, please reach out to us and we will help you out.

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