Venture Theme Install (basic)

This article explains how to properly install Product Customizer into a shop using the Venture theme. For this theme, you will need to insert two snippets of code: one into the product template and another into the app's stylesheet, 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!

product-template.liquid

Go to the Sections > product-template.liquid file in the theme. This is what adds product pages, so we'll do our installation here. Add this code in 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. Scroll all the way to the bottom, as we'll need to add some CSS to make sure that Product Customizer options look similar to the rest of the options in your theme. Add this CSS at the very bottom of this file on a new line:

div.product-customizer-options {
	width: 100%;  
}
.product-customizer-option, .product-customizer-customizations-total {
    width: 100%;    
}
.product-customizer-customizations-total {
    padding: 0 5px;
}
.product-customizer-options .customizations-total {
	padding: 0 0 15px 5px;
}


.product-customizer-options label  {
 	display: block; 
}


.product-customizer-options input[type="text"],
.product-customizer-options input[type="file"],
.product-customizer-options textarea,
.product-customizer-options select {
 	width: 100%;
}


.product-customizer-options > div {
	display: inline-block;
	flex: 1 0 160px;
	margin-bottom: 10px;
	padding: 0 5px; 
}

Still need help? Contact Us Contact Us