How to install product customizer into your theme

Installing Customify product customizer is not complicated. However, if you need help installing the app, please feel free to contact us, we will install it for you for FREE.

Please find following the detail of how to install the app into your website.

1. Get the app from Shopify website

 Open Customify - Product customizer application page in your browser.

You will get a 14 days trial for any available app paid plan. However, there is also a forever FREE plan that you can use.

Once the app added to your Shopify store, you will be redirected to the app backend dashboard page.  On the app backend, you will see some menus such as the dashboard, custom product, and others. You will see the step by step on how to use the app.

2. Theme adjustment

Please click the Installation menu to go to the installation page.

Before you make any changes to your current theme, we suggest you duplicate your current theme. Please click here to get more details about how to duplicate your theme.

2.1 Install liquid files

To install the app's liquid files, you need to click on the install button. It's a yellow button as on the following screenshot:

After you click the “install” button,  the app will create files in your theme. The new following files should be there:

• /Snippets/customify-item.liquid
• /Snippets/customify-source.liquid

Once those 2 files added, you can continue to the next step.

2.2 Update the Theme code

In this step we need to add a one-line code right before closing head tag ( </head> ).

Open your themes.liquid. The file editor link is available on the installation page as follow:

Next, please find the following code before closing tag </head>

{{ content_for_header }}

Update the code to the following code:

{% unless template == blank %} 
{{ content_for_header }}
{% endunless %}
{% include 'customify-source' %} 

Please see the following screenshot for your reference:

Please click Save to save the changes.

Next, you can start to create a custom product to see if the customize button appears on your product page. If it doesn’t appear, please feel free to contact us.

2.2 Update cart template ( optional )

These final steps are optional for you.  Because the app will still be working without having to complete these steps.

• Add view custom product link on the Cart page
  In order to add custom product output link on the cart page, you need to complete this step. Open your template, then under Sections area click cart-template.liquid  file like on the following screenshot:
  
  Find one of the following codes on the cart-template.liquid file:
  

  <a href="{{ item.url }}" > {{ item.product.title }} </a>
  
  <a href="{{ item.product.url }}"> {{ item.title }} </a>
  
  <a href="{{ item.url }}"> {{ item.title }} </a>

  After you found one of the above codes you should put the following code after </a> tag:
  

  {% include 'customify-item' %}

  So the code will be like following:
  

  <a href="{{ item.url }}" > {{ item.product.title }} </a>
  {% include 'customify-item' %}

  Once the code changed, please click save.

• Add final custom design on the Cart page
  If you want to show the final custom design on the cart page, please complete this step. Open the cart-template.liquid file. Please Find the code which represents the item image. It could be one of the following codes:
  

  <img class="cart__image" src="{{ item | img_url: '95x95', scale: 2 }}" alt="{{ item.title | escape }}" data-item-url="{{ item.url }}">

  <img src="{{ item | img_url: 'medium' }}" alt="{{ item.title | escape }}" /> 

  <img src="{{ item | img_url: 'compact' }}" alt="{{ item.title | escape }}" />

  <img src="{{ item | img_url: 'small' }}" alt="{{ item.title | escape }}" />

  <img src="{{ item.product.featured_image.src | product_img_url: 'medium' }}" alt="{{ item.title | escape }}" />

  Delete that code and replace with this one:
  

      {% assign cst_idx = shop.metafields.customify.idx %}
  {% if item.properties[cst_idx] %} 
  <img src="{{ shop.url }}/apps/customify?show_custom=1&id={{ item.properties[cst_idx] }}" style='width: 240px; max-width: 100%' alt="{{ item.title | escape }}" /> 
  <img src="{{ shop.url }}/apps/customify?show_custom=1&type=back_full&id={{ item.properties[cst_idx] }}" style='width: 240px; max-width: 100%' alt="{{ item.title | escape }}" onError="style.display = 'none';"/> 
  {% else %} 
  <img src="{{ item | img_url: 'medium' }}" alt="{{ item.title | escape }}" /> 
  {% endif %}

  Once you have completed the above steps, the product customizer app will be properly installed.
  
  Should you have any questions or face any trouble while installing the app, please feel free to Contact us.