Launchpad-star Theme Install (premium)

This article explains how to properly install Product Customizer (premium tier) into a shop using the Launchpad-star (default) theme. In order to properly change the way option pricing is shown to customers, several modifications to different templates are necessary.

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

First, you'll need to go to Templates > product.liquid in your theme.

Add these 4 lines of code to the top of this file  to hide our "item customizations" hidden product:

{% if product.type  == 'SHOPSTORM_HIDDEN_PRODUCT' %}
	Product is not available
	{% break %}
{% endif %}

Now we need to include our customization options within the add to cart form. Find the following line:

<div class="product-single__quantity{% unless settings.product_quantity_enable %} is-hidden{% endunless %}">

And paste this code directly above it:

{% include 'product-customizer' %}

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


Cart.liquid

To find your cart template, go to the "Templates" folder in your theme. Click on Templates > cart.liquid to edit this file. We'll need to make several modifications to the cart template to support displaying options along with modifying price display. 

Lines highlighted in red / beginning with a "-" symbol indicate that the line must be removed

Lines highlighted in green / beginning with a "+" indicate that the line needs to be added.


Collection.liquid

To find your "Collections" template, go to the "Templates" folder in your theme. Click on Templates > collection.liquid to edit this file. We'll add one line to hide our "item customizations" product from the product count. We'll add this line:

{% if product.type == 'SHOPSTORM_HIDDEN_PRODUCT' %}{% continue %}{% endif %}

directly below the line that looks like this:

{% for product in collection.products %}

To find your "search" template, go to the "Templates" folder in your theme. Click on Templates > search.liquid to edit this file. We'll add two lines to hide our "item customizations" product from the product count. We'll add this line:

{% if item.type == 'SHOPSTORM_HIDDEN_PRODUCT' %}{% continue %}{% endif %}

right after the line that looks like this (appears two times):

{% for item in search.results %}

header-bar.liquid

To find your header-bar template, go to the "Layout" folder in your theme. Click on Snippets > header-bar.liquid to edit this file. We'll replace one line to make sure your cart widget / navigation icon uses the correct cart quantity. We'll replace this code:

{{ cart.item_count }}

with this code:

{% include 'product-customizer-helper' with 'cart-item-count' %}

In the Launchpad-star theme, this edit appears in a couple of places:


Customers/order.liquid (Optional)

This section is only necessary if you allow customers to create accounts on your site, and want them to be able to view pricing changes with the item ordered as they would on the cart page.

To find your customer order template, go to the "Templates" folder in your theme. Click on Templates > customers/order.liquid to edit this file. We'll need to make several modifications to this template to support displaying options with the modified price display.

Click to jump right to the location where these changes begin:

Still need help? Contact Us Contact Us