Installation
We’ll need to add one one-line snippets of code into your theme:
- Into product.liquid insert
<div id="pplr-{{ product.id }}" data-id="{{ product.id }}" class="product-personalizer" data-handle="{{product.handle}}"></div>
- Into cart.liquid insert
<span class="pplr_cart_item_property" data-line="{{item.index}}" ></span>
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 Personalizer 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 has some code, but no
<form
or {% form element, then chances are this is included from another file. It will probably in something like “Sections > product-template.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
or {% form in the file. This form adds items to the cart. Right after the <form
or {% form tag (not to be confused with </form
or endform %}), you can add another line and insert the
<div id="pplr-{{ product.id }}" data-id="{{ product.id }}" class="product-personalizer" data-handle="{{product.handle}}"></div>
snippet on the next line. This will add any personalizations 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 personalizations 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
or endform %} tag.
Save your changes to the product.liquid file, then check out a product page with personalizations to make sure your personalizations 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.
Some theme have default code to show cart item property . They may show in a messy way . So you need to clean them first
<span class="pplr_cart_item_property" data-line="{{item.index}}" ></span>
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!