This article explains how to properly install Product Personalizer into a shop using the Parallax theme. For this theme, you will need to insert one line of code into the product template, as explained below.

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 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-form.liquid

Go to the Snippets > product-form.liquid file in the theme. This is what adds the add to cart form to product pages, so we’ll do our installation here. Add this code in the “add-to-cart” form:

{% include 'product-personalizer' %}

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

{% if product.available %}
<form action=”/cart/add” method=”post” class=”clearfix product_form” data-money-format=”{{ shop.money_format }}” data-shop-currency=”{{ shop.currency }}” id=”product-form-{{ product.id }}”>
{% if settings.display_inventory_left %}
<div class=”items_left”>
{% if product.variants.first.inventory_management == “shopify” and product.variants.first.inventory_quantity > 0 %}
{% capture items_left_text %}
{% if product.variants.first.inventory_quantity == 1 %}
{{ ‘products.product.items_left_count.one’ | t }}
{% else %}
{{ ‘products.product.items_left_count.other’ | t }}
{% endif %}
{% endcapture %}
<p><em>{{ product.variants.first.inventory_quantity }} {{ items_left_text }}</em></p>
{% endif %}
</div>
{% endif %}
{% if product.options.size > 1 %}
<div class=”select”>
<select id=”product-select-{{ product.id }}” name=”id” class=”multi_select”>
{% for variant in product.variants %}
<option {% if variant == product.selected_or_first_available_variant %}selected=”selected”{% endif %} value=”{{ variant.id }}”>{{ variant.title }}</option>
{% endfor %}
</select>
</div>
{% elsif product.options.size == 1 and (product.variants.size > 1 or product.options[0] != “Title”) %}
<div class=”select”>
<label>{{ product.options[0] }}</label>
<select id=”product-select-{{ product.id }}” name=”id”>
{% for variant in product.variants %}
<option {% if variant == product.selected_or_first_available_variant %}selected=”selected”{% endif %} value=”{{ variant.id }}”>{{ variant.title }}</option>
{% endfor %}
</select>
</div>
{% else %}
<input type=”hidden” name=”id” value=”{{ product.variants.first.id }}” />
{% endif %}
+ {% include ‘product-personalizer’ %}
{% if settings.product_form_style == “swatches” and (product.variants.size > 1 or product.options[0] != “Title”) %}
<div class=”swatch_options”>
{% for option in product.options %}
{% include ‘product-swatch’ with option %}
{% endfor %}
</div>
{% endif %}
{% if settings.display_product_quantity %}
<div class=”left”>
<label for=”quantity”>{{ ‘products.product.quantity’ | t }}</label>
<input type=”number” min=”1″ size=”2″ class=”quantity” name=”quantity” id=”quantity” value=”1″ {% if product.variants.first.inventory_management == ‘shopify’ and product.variants.first.inventory_quantity > 0 %}max=”{{ product.variants.first.inventory_quantity }}”{% endif %} />
</div>
{% endif %}
<div class=”purchase clearfix {% if settings.display_product_quantity %}inline_purchase{% endif %}”>
{% if settings.cart_action == ‘reload_page’ %}
<input type=”hidden” name=”return_to” value=”back” />
{% elsif settings.cart_action == ‘redirect_checkout’ %}
<input type=”hidden” name=”return_to” value=”/checkout” />
{% endif %}
{% capture add_to_cart_label %}{% if collection_handles contains ‘pre-order’ %}{{ ‘collections.general.pre_order’ | t }}{% else %}{{ ‘products.product.add_to_cart’ | t }}{% endif %}{% endcapture %}
<button type=”submit” name=”add” class=”action_button add_to_cart” data-label={{ add_to_cart_label | json }}><span class=”text”>{{ add_to_cart_label }}</span></button>
</div>
</form>
{% if product.variants.size > 1 or product.options.size > 1 %}
<script type=”text/javascript”>
// <![CDATA[
$(function() {
$product = $(‘.product-‘ + {{ product.id }});
new Shopify.OptionSelectors(“product-select-{{ product.id }}”, { product: {{ product | json }}, onVariantSelected: selectCallback{% if product-form == ‘product’ %}, enableHistoryState: true{% endif %} });
});
// ]]>
</script>
{% endif %}

{% endif %}

Here is how to Show personalized image in cart .