This article explains how to properly install Product Personalizer into a shop using the Shopify’s default Debut theme. You will need to insert a few lines of code: one into the product template, a number of modifications to the cart template, and an optional update to the our app’s stylesheet, as explained below.

From your Shopify Admin, click Online Store > Themes and then click on the “” menu for your theme. From here click Edit HTML / CSS. This will let you edit your theme and add the necessary code.

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

  • 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.

Modify the following files:

product-template.liquid

This step adds your Product Personalizer options to your product pages. Go to the Sections > product-template.liquid file in the theme and add the following line of code to the “add-to-cart” form:

{% include 'product-personalizer' %}

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

…(BEGIN FILE, ABOUT 110 LINES)
<form action=”/cart/add” method=”post” enctype=”multipart/form-data” class=”product-form product-form-{{ section.id }}{% unless section.settings.show_variant_labels %} product-form–hide-variant-labels{% endunless %}” data-section=”{{ section.id }}”>
<select name=”id” id=”ProductSelect-{{ section.id }}” data-section=”{{ section.id }}” class=”product-form__variants”>
{% for variant in product.variants %}
{% if variant.available %}
{% comment %}
Note: if you use option_selection.js, your <select> tag will be overwritten, meaning what you have inside <option> will not reflect what you coded below.
{% endcomment %}
<option {% if variant == product.selected_or_first_available_variant %} selected=”selected” {% endif %} data-sku=”{{ variant.sku }}” value=”{{ variant.id }}”>{{ variant.title }}</option>
{% else %}
<option disabled=”disabled”>
{{ variant.title }} – {{ ‘products.product.sold_out’ | t }}
</option>
{% endif %}
{% endfor %}
</select>
+ {% include ‘product-personalizer’ %}
{% if section.settings.show_quantity_selector %}
<div class=”product-form__item product-form__item–quantity”>
<label for=”Quantity-{{ section.id }}”>{{ ‘products.product.quantity’ | t }}</label>
<input type=”number” id=”Quantity-{{ section.id }}” name=”quantity” value=”1″ min=”1″ class=”product-form__input” pattern=”[0-9]*”>
</div>
{% endif %}
<div class=”product-form__item product-form__item–submit”>
<button type=”submit” name=”add” id=”AddToCart-{{ section.id }}” class=”btn product-form__cart-submit{% if product.options.size == 1 and product.variants[0].title == ‘Default Title’ %} product-form__cart-submit–small{% endif %}”>
<span id=”AddToCartText-{{ section.id }}”>{{ ‘products.product.add_to_cart’ | t }}</span>
</button>
</div>
</form>
</div>
<div class=”product-single__description rte” itemprop=”description”>
{{ product.description }}
</div>
{% if section.settings.show_share_buttons %}
{% include ‘social-sharing’, share_title: product.title, share_permalink: product.url, share_image: product %}
{% endif %}
</div>
</div>
</div>
</div>
…(REST OF TEMPLATE FILE)

Here is how to Show personalized image in cart .