Debut Theme Install (basic)

This article explains how to properly install Product Customizer 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, 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.

product-template.liquid

This step adds your Product Customizer 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-customizer' %}

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

shopstorm-apps.scss.liquid

To find the app's stylesheet, go to the "Assets" folder in your theme. Click on Assets > shopstorm-apps.scss.liquid to edit this file. At the very bottom of this file, add the following code to make sure your Product Customizer options look similar to the rest of the options in your theme.

.product-customizer-options, .product-customizer-customizations-total { 
	width: 100%; 
}
.product-customizer-option {
    padding: 0 5px 10px;    
}
.product-customizer-option select, .product-customizer-option textarea, .product-customizer-option input[type="text"], .product-customizer-option input[type="file"] {
    width: 100%;    
}
.product-customizer-option {
    padding-bottom: 10px;    
}

Still need help? Contact Us Contact Us