Options Price Add-ons - Cart Product
IMPORTANT: this checkout process is now deprecated in favor of the new Checkout Extensibility integration.
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.
Product price
It is possible to change the price of the product to reduce the quantity used on the order items.
For example, you can change the price to 1.00:
Navigate back in the app and click on the refresh button (required for the app to load the new price):
The smallest price add-on nomination will now be 1$.
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 -%}
Collection
To prevent the hidden product to be shown on the collections, you can also manually exclude it on your theme.
In your theme specific collection file, e.g you will find a piece of code that loops over the product of the collection, right after the beginning of the loop add the condition to skip the product with the type "options_price":
{%- for product in collection.products -%}
{% if 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.