Premium plan: Generic Theme Installation

Product Customizer requires you to install snippets into your shop's theme templates. While you can use the app to create and add options once your shop is connected to it, these options will not show on product pages, cart pages, or within orders until your theme is updated to display the options.

The pro theme installation also requires additional steps to hide the special "Item Customizations" product that Product Customizer uses to add option fees.

We recommend that you look through our individual theme documentation to get installation instructions for your specific theme, as the pro tier requires several theme modifications.

If the theme you are using is not on the list, don't worry! Product Customizer should still work with your theme and the installation process can be completed by following these general instructions. However, we recommended that you are familiar with HTML and liquid to follow this general guide.

If you do not feel comfortable performing this installation yourself, that's totally okay, and you can just sit and wait! When you installed the premium plan, our support team was notified, and will do the installation for you once they see the notification (usually within a day).

We include these instructions only if you do not want to wait, or already work with a developer who can perform this installation for you.

Product Customizer premium plan installation

There are 6 main steps to complete the Pro Tier installation for Product Customizer.

Product Template

1
At the very top of the template, add this:
{% if product.type  == 'SHOPSTORM_HIDDEN_PRODUCT' %}
	Product is not available
	{% break %}
{% endif %}
	
2
Between the variants and quantity selector / submit button (or where desired within the add to cart form), add this:
{% include 'product-customizer' %}
	

The add to cart form is, from time to time, stored outside of the product template file in the "Snippets" section of the theme (usually in a short-form.liquid or product-form.liquid file). If so, install the one-line snippet here.

Cart Template

These changes are extensive to hide the "Item Customizations" product from the cart page, and to add its costs to the product it's tied to. Sometimes your cart template may vary slightly, so we also have a couple helpful notes at the bottom of this section.

1
Right after {% for item in cart.items %}, add this style to the following <tr> / <div> / <li> / etc (whatever HTML element wraps each cart item):
style="{% include 'product-customizer-helper' with 'hide-pricing-item-row' %}" {% include 'product-customizer-helper' with 'cart-row-data' %}
	
2
Right after the item title ( not the product image, the display title), include this:
{% include 'product-customizer-helper' %}
	
3

If the theme already adds line item properties, comment them out with a note they're removed for Product Customizer.

The helper we just added will display them, and has the added benefit of properly distinguishing public and private line item properties (most themes don't do this).

4
Replace any item prices (i.e.  {{ item.price | money }}) with:
{% include 'product-customizer-helper' with 'item-price', items: cart.items %}
	

and any line item (all quantities) prices (i.e.   {{ item.line_price | money }}) with:

{% include 'product-customizer-helper' with 'item-line-price', items: cart.items %}
	

(You may not see both the item price and line item price in the template, that's okay.)

5
Replace the "Remove" from cart link's href (e.g. /cart/change?line={{forloop.index}}&quantity=0) with this new href:
{% include 'product-customizer-helper' with 'remove-from-cart-href' %}
	

and add this class to the <a> as well:

{% include 'product-customizer-helper' with 'remove-from-cart-class' %}
	

Important Note: some themes will have two "remove from cart" links in the cart template, one of which will be visible for mobile screens, and the other will be visible for full sized screens. You need to ensure that all "remove from cart" links are updated.

6
At the very end of the file, add:
{% include 'product-customizer-helper' with 'product-customizer-script' %}
	

Cart Adjustments

The price / line price may be displayed differently instead of using a normal liquid tag, ie:

{% include 'price' with item.price %}

If so, you'll need to replace it with the raw helper and capture the price instead:

{% capture item_price %}{% include 'product-customizer-helper' with 'item-price', items: cart.items, raw: true %}{% endcapture %}
{% include 'price' with item_price %}

You may also need to do this the item is not formatted with money, and instead uses something like money_with_currency:

{{ item.price | money_with_currency }}

To format this correctly, use a capture of our app's raw price instead:

{% capture item_price %}{% include 'product-customizer-helper' with 'item-price', items: cart.items, raw: true %}{% endcapture %}
{{ item_price | money_with_currency }}

Collection template

Find any "for" loops for products in the collection:

{% for product in collection.products %}

and add this snippet right after the opening of the loop:

{% if product.type == 'SHOPSTORM_HIDDEN_PRODUCT' %}{% continue %}{% endif %}

You may also need to do this if the collection shows a list of product types in a dropdown -- replace product.type with whatever is needed to skip our type.

Sometimes there are multiple collection templates, and this change should be applied to each template.

Find any "for" loops for items in the search results:

{% for item in search.results %}

and add this snippet right after the opening of the loop:

{% if item.type == 'SHOPSTORM_HIDDEN_PRODUCT' %}{% continue %}{% endif %}

Theme Main Layout

In the main Layout > theme.liquid file (or in some themes, you may see Snippets > header-bar.liquid), replace any instances of {{ cart.item_count }} with:

{% include 'product-customizer-helper' with 'cart-item-count' %}

You may occasionally see the cart item count used indirectly, ie for an icon class. If so, you can capture this at the top of the file if needed:

{% capture cart_item_count %}{% include 'product-customizer-helper' with 'cart-item-count' %}{% endcapture %}{% assign cart_item_count = cart_item_count | plus: 0 %}

then replace any instance of cart.item_count with:

cart_item_count

instead. For example, you could use: {{ cart_item_count }} now that it's captured.

Customer Order Template (Optional)

This set of directions is only needed if customer accounts are used on the site to hide the "Item Customizations" product the same was as the cart changes.

1
Right after {% for line_item in order.line_items %}, add this style to the following <tr> / <div> / <li> / etc:
style="{% include 'product-customizer-helper' with 'hide-pricing-item-row', item: line_item %}"
	
2
Right after the item title, add this line:
{% include 'product-customizer-helper', item: line_item %}
	
3
Replace any item prices (ie {{ line_item.price }} or {{ item.price }}) with:
{% include 'product-customizer-helper' with 'item-price', item: line_item, items: order.line_items %}
	
4
Replace this line:
<td>{{ line_item.quantity | times: line_item.price | money }}</td>
	

with this (carry over any CSS classes on the table cell):

<td>
	{% capture item_price %}{% include 'product-customizer-helper' with 'item-price', item: line_item, items: order.line_items, raw: true %}{% endcapture %}
	{{ line_item.quantity | times: item_price | money }}
</td>
	

Still need help? Contact Us Contact Us