Zapiet - Product Options offers two app blocks: the product options app block for the product page, and the cart page app block for the cart page.
The product options app block must be enabled for our app to work correctly.
The cart options app block is optional, and requires additional changes to the theme file to work as expected.
Requirements
To enable the app block, you will need to have permission to manage apps from the store owner.
To enable the app block, you need to be using an Online Store 2.0 theme. We do not support legacy themes.
Enable the product options app block
The product options app block will allow your customers to select options on the product pages of your store.
In Zapiet - Product Options, click Settings.
In the Themes section, select the theme you would like to edit.
We recommend enabling our app on a duplicate theme first.
In the Product options app block section, click Enable.
This will open the Customize settings on your theme and enable the app block.
You can change the placement of the app block according to your business needs.
Click Save.
The product options app block will now be visible on your store. Before testing, make sure you have created both options and option sets.
If you enabled the app block on a duplicate theme, publish the theme after testing, so your customers can select product options on your store.
Enable the cart page app block
The cart page app block will allow your customers to make changes to the options they've selected directly on the cart page.
In Zapiet - Product Options, click Settings.
In the Themes section, select the theme you would like to edit.
We recommend enabling our app on a duplicate theme first.
In the Cart page app block section, click Enable.
This will open the Customize settings on your theme and enable the app embed.
Click Save.
After you've enabled the app embed, you need to edit the code in your theme.
Edit your theme
If you're not comfortable editing the code, please let us know on chat, and we will be happy to help!
Go to Online Store > Themes, expand the menu next to the theme you want to edit, then click Edit code.
Open the liquid file for the cart page.
Commonly, cart related files are located in: templates (for example, cart.liquid), sections (for example, cart-template.liquid) or snippets for reusable code snippets related to the cart (for example, cart-item.liquid).
Look for this snippet in the code.
{%- for property in item.properties -%}
{%- assign property_first_char = property.first | slice: 0 -%}
{%- if property.last != blank and property_first_char != '_' -%}
<div class="product-option">
<dt>{{ property.first }}: </dt>
<dd>
{%- if property.last contains '/uploads/' -%}
<a href="{{ property.last }}" class="link" target="_blank">
{{ property.last | split: '/' | last }}
</a>
{%- else -%}
{{ property.last }}
{%- endif -%}
</dd>
</div>
{%- endif -%}
{%- endfor -%}
Add this line of code below to create a new class.
<div class ="edit-cart-options-button-container" id="{{ item.id }}"> </div>
Open the liquid file for the cart drawer.
Look in the sections or snippets for files that might be related to the cart drawer. Common file names include: cart-drawer.liquid, cart.liquid, drawer-cart.liquid, mini-cart.liquid.
Look for this snippet in the code.
{%- for property in item.properties -%}
{%- assign property_first_char = property.first | slice: 0 -%}
{%- if property.last != blank and property_first_char != '_' -%}
<div class="product-option">
<dt>{{ property.first }}: </dt>
<dd>
{%- if property.last contains '/uploads/' -%}
<a href="{{ property.last }}" class="link" target="_blank" aria-describedby="a11y-new-window-message">
{{ property.last | split: '/' | last }}
</a>
{%- else -%}
{{ property.last }}
{%- endif -%}
</dd>
</div>
{%- endif -%}
{%- endfor -%}
Add this line of code below to create a new class.
<div class ="edit-cart-options-button-container" id="{{ item.id }}"> </div>
Click Save.
Now your customers will be able to edit the options they've selected directly on the cart page.
If something went wrong, and you can't edit the selected options on the cart page, please let us know on chat!
Notes
If you’re using a free theme from the Shopify theme store, you’ll likely need to add the code to line 159 of the
main-cart-item.liquidfile and line 206 of thecart-drawer.liquidfile.
Limitations
If your store has a Quick Add button, product options will only appear for products with variants.
Products without variants can be added directly to the cart without selecting options.
To prevent customers from bypassing the product options, you can disable the Quick Add button. This setting is theme specific—contact your theme developer for help.