Solo Theme Install (basic)

This article explains how to properly install Product Customizer into a shop using the Solo theme. For this theme, you will need to insert two snippets of code: one into the product template and another into the theme'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 red / beginning with a "-" symbol show you what to remove (if needed).
  • 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.liquid

The Solo theme has an unusual product template. Rather than being located in Templates > product.liquid, you'll need to go to a different file. Go to the "Snippets folder instead, and click on the Snippets > single-product.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:

Stylesheet: shopstorm-apps.scss.liquid

The solo theme does not pass styles onto our options, so we need a tiny bit of CSS to make them look good in the theme. As such, we'll add some code to the app stylesheet. Go to the "Assets" folder in your theme, and click on Assets > shopstorm-apps.scss.liquid to edit this file. You'll need to this code at the very bottom of this file. Scroll all the way down, and add this at the very end on a new line:

@media screen and ( min-width: 770px ) {
	.product-customizer-options > div {
  		display: inline-block;
 		width:  30%;
	}
}

.product-customizer-options div {
 	padding: 15px 2% 0 1%; 
}

.product-customizer-options input {
 	max-width: 220px; 
}

div.product-customizer-options {
 	display: block;
  	clear: both;
}

Now your options should looks similar to the default Shopify options.

Still need help? Contact Us Contact Us