Brooklyn Theme Install (basic)

This article explains how to properly install Product Customizer into a shop using the Brooklyn 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 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:

{% 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 our app's stylesheet, go to the "Assets" folder in your theme. Click on Assets > shopstorm-apps.scss.liquid to edit this file. Scroll down to the very bottom of this file. You'll need to add some CSS at the very bottom on a new line to help options blend in with your theme. Add the following CSS at the end of this file:

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

    label {
        display: block;
        margin-bottom: 10px;
        cursor: default;
        font-style: normal; 
    }

     input, textarea, select {
        font-family: "Montserrat","HelveticaNeue","Helvetica Neue",sans-serif;
        font-weight: 400;
        min-width: 175px;
        max-width: 70%;
        margin: 3px auto;
        letter-spacing: 0.1em;
        display: block;
        line-height: 1em;
        padding: 9px 11px;
        font-size: 0.8125em;
        font-style: normal;
        background-color: #fff;
        border: 1px solid #1c1d1d;
    }
}

Still need help? Contact Us Contact Us