Classic Theme Install (premium)

This article explains how to properly install Product Customizer (premium tier) into a shop using the Classic theme. In order to properly change the way option pricing is shown to customers, several modifications to different templates are necessary.

Before you begin your installation, please ensure you've disabled the "drawer" style cart in this theme. Go to "Customize theme", then under "Cart Page", change "Cart type" to "Page". The drawer cart is incompatible with option pricing.

In your Shopify Admin, click "Themes", and click on the "..." menu for your theme. You can then click Edit HTML / CSS. This will let you edit your theme and add these snippets.

We have some code samples to guide you below. Please note the following:

  • Lines highlighted in red / beginning with a "-" symbol show you what to remove (if needed).
  • Lines highlighted in green / beginning with a "+" symbol show you what to add.
  • DO NOT include "+" or "-" signs if you copy / paste this code into your theme.

If you experience any difficulties with the installation of the app, please contact us and we'll be happy to assist!

Product.liquid

To edit the product page template, go to the "Templates" folder, and click the Templates > product.liquid file in your theme. In this file, you'll add a code snippet at the very top, and one in your "add-to-cart" form.

At the very top of the product.liquid file, add few lines of code to hide the "item customizations" hidden product content if access directly. Add these 4 lines of code to the top of this file:

{% if product.type  == 'SHOPSTORM_HIDDEN_PRODUCT' %}
	Product is not available
	{% break %}
{% endif %}

Now add this one-line snippet in your add to cart form:

{% include 'product-customizer' %}

Click to jump right to the location to view the best place to insert this snippet:


Cart.liquid

To find your cart template, go to the "Templates" folder in your theme. Click on Templates > cart.liquid to edit this file. We'll need to make several modifications to the cart template to support displaying options along with modifying price display.

Click to jump right to the location where these changes begin:


Collections.liquid

The Classic theme has two collections templates -- the regular template and the "list" template. To find your "Collections" templates, go to the "Templates" folder in your theme.

First, click on Templates > collection.liquid to edit this file. We'll add one line to hide our "item customizations" product from the product count and results. We'll add this line:

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

right after a line that looks like this:

{% for product in collection.products %}

In the Classic theme, you'll find this near the middle of the file. Click to jump right to the location to view the best place to insert this snippet:

Now do the same thing in the Templates > collection.list.liquid file. This will look almost exactly the same as the example above.


To find your "search" template, go to the "Templates" folder in your theme. Click on Templates > search.liquid to edit this file. We'll add one line to hide our "item customizations" product from the product count and results. We'll add this line:

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

right after a line that looks like this:

{% for item in search.results %}

In the Classic theme, you'll find this near the middle of the file, and we'll insert this snippet in two places. Click to jump right to the location to view the best place to insert this snippet:


Header-bar.liquid

To find your header-bar template, go to the "Snippets" folder in your theme. Click on Snippets > header-bar.liquid to edit this file. We'll replace one line to make sure your cart widget / navigation icon uses the correct cart quantity. We'll replace this tag:

{{ cart.item_count }}

with one that looks like this:

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

In the Classic theme, you'll find this near the end of the file. Click to jump right to the location to view the best place to insert this snippet:


While we're in the "Snippets" folder, you can make an optional change. This is only needed if you show the "Shop by Type" section in your sidebar. (You can disable this in your theme > sidebar settings as well.)

To find your sidebar template, go to the "Snippets" folder in your theme. Click on Snippets > sidebar.liquid to edit this file. You can add one line to remove the "SHOPSTORM_HIDDEN_PRODUCT" type from your product types. We'll add:

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

below the line that looks like:

{% for type in shop.types %}

Here's an example excerpt from this file if you need to make this change:


Customers/order.liquid (Optional)

This section is only necessary if you allow customers to create accounts on your site, and want them to be able to view pricing changes with the item ordered as they would on the cart page.

To find your customer order template, go to the "Templates" folder in your theme. Click on Templates > customers/order.liquid to edit this file. We'll need to make several modifications to this template to support displaying options with the modified price display.

Click to jump right to the location where these changes begin:

(^ that indeed says "minimal" theme, but they use the same template)

Still need help? Contact Us Contact Us