Boundless Theme Install (basic)

This article explains how to properly install Product Customizer into a shop using the Boundless theme. For this theme, you will need to insert one line of code into the product template (no changes needed for the cart 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!


Product.liquid

Go to the Templates > 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:

<div style="clear: left;">{% include 'product-customizer' %}</div>

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

Styling change (Optional)

This change is not needed, but it will help just a tad to match Product Customizer dropdowns to the theme dropdowns. If you want to make this adjustment, you can go to the app stylesheet to do so. Go to the "Assets" folder and click on Assets > shopstorm-apps.scss.liquid. Scroll down to the bottom, and add this CSS on a new line:

.product-customizer-options div {
 	margin-bottom: 1em; 
}

.product-customizer-options select::-ms-expand {
    display: none;
}

.product-customizer-options select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-border-radius: 0px;
    display: block;
    color: #1b100e;
    cursor: pointer;
    background-color: transparent;
    padding: 6px 3px 6px 12px;
    font-size: 16px;
    font-family: "Open Sans","HelveticaNeue","Helvetica Neue",sans-serif;
    line-height: 1.6em;
    border: 1px solid #eceff1;
    border-radius: 2px;
    min-width: 150px;
}

Still need help? Contact Us Contact Us