Basic 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 displays the options. 

We recommend that you look through our individual theme documentation to get installation instructions for your specific theme. We have a video to help with basic plan installation as well.

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. If you're looking for a theme to use, we recommend themes from  Out of the Sandbox, who make beautiful themes that work well with our apps.

If you do not feel comfortable performing this installation yourself, you can also submit a request to have someone on our support team do it for you (usually within a day).

If you are using the premium plan for the app, please view the pro tier installation guides instead, as this version of the app requires a more extensive installation process than what's outlined here.

Basic Tier Installation

We'll need to add two one-line snippets of code into your theme:

  • Into product.liquid insert {% include 'product-customizer' %} 
  • Into cart.liquid insert {% include 'product-customizer-helper' %}

You'll search for a specific part of each template file to insert these code snippets.

1

First, go to "Themes" in your Shopify Admin. From there, click on "..." in the top right for the theme that's active in your Shopify store.

2

You'll then click "Edit HTML / CSS" from the dropdown menu to access your theme files template editor.

3
From the template editor, you can access all of the template files in your theme. This is where you'll access the product.liquid and cart.liquid files to insert the snippets and finish the Product Customizer installation.

Product.Liquid Snippet

The product.liquid file is located in the "Templates" folder in your theme. The one-line code snippet will need to be added within the add to cart form element in the product.liquid (or similar) file.

On some occasions, themes may have an irregular product template format and you may not seen an add to cart form in your product template. If your theme is irregular, we're happy to assist you! If you want track down the add to cart form, here are a few additional tips. 

  • if the Templates > product.liquid file is blank or near-blank, it will be located in the "Snippets" folder instead.
  • if the Templates > product.liquid file has some code, but no <form element, then chances are this is included from another file. It will probably in something like "Snippets > short-form.liquid" or "Snippets > product-form.liquid".

Once you've clicked on the product template (which is still most likely in Templates > product.liquid), hit Control+F or Command+F to bring up a search box. Search for the string <form in the file. This form adds items to the cart. Right after the <form tag (not to be confused with </form), you can add another line and insert the

{% include 'product-customizer' %}

snippet on the next line. This will add any customizations assigned to that product into your product page.

You can also adjust the location of this snippet within the form element if you'd like to adjust where these customizations are displayed (we'd be happy to help with this as well) – we recommend between the Shopify variants and the quantity selector. These snippets should not go outside of the form, so they must be before the closing </form tag.

Save your changes to the product.liquid file, then check out a product page with customizations to make sure your customizations are displayed as expected.

Cart.Liquid Snippet

The next snippet will go in the cart.liquid file, which is in the "Templates" folder of your theme. We'll want to include the one-line code snippet after the item.title or item.product.title line.

Bring up the search box again by hitting Control+F or Command+F, and search for item.title or item.product.title in this template file. If there are two instances of item.title, insert the

{% include 'product-customizer-helper' %}

snippet after the second instance.


Remember, if you have trouble with installation, please fill out a support request and our team will be happy to help get you set up!

Still need help? Contact Us Contact Us