Generic Theme Installation

Product Personalizer 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.If you do not feel comfortable performing this installation yourself, you can also contact us to have someone on our support team do it for you (usually within a day).

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

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 <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!