Top

Custom Orders Liquid Install Instructions

Ninja Notes - Backup the theme

The liquid code install requires significant changes to be made to the theme files. We strongly recommend creating a duplicate of your theme, and making the changes to the unpublished version of the theme.

1 - Create Snippet Files

 

In the theme's files, look in the theme's snippet folder to see if the following files exist.

  • bold-product
  • bold-hidden-variants
  • bold-cart-item

If any don't exist, the missing files will need to be manually created. In that case, select the appropriate tab above for instructions on how to create a particular snippet.

1-2: bold-hidden-variants

 

Create a snippet called bold-hidden-variants.liquid. Copy and paste this code into the snippet file.

1-1: bold-product.liquid

 

Create a snippet called bold-product.liquid. Copy and paste this code into the snippet file.

1-3: bold-cart-item.liquid

 

Create a snippet called bold-cart-item.liquid. Copy and paste this code into the snippet file.

2 - Edit the search.liquid

 

Select search.liquid template to open the file.  In the search.liquid, look for all instances of this (this may appear more than once in the file):

{% for item in search.results %}

Below each instance, add the following:

3 - Edit the collection.liquid

 

Select collection.liquid template to open the file. Within the file, look for all instances of this (this line may appear more than once in a file):

{% for product in collection.products %}

Add the following below each instance:

Repeat this step with the index.liquid file, as well as the related-products.liquid file, if the theme has it.

If you can't find this code, select the Can't Find tab.

Some themes will use a slight variation of the code to search for. Try looking for the following instead:

  • {% for prod in collection.products %}
  • {% for product in collections.all.products %}
  • {% for product in products limit: limit %}
  • {% for product in product-list.products limit: for_limit %}
  • {% for product in collection.products limit: settings.pagination_limit %}
  • {% for product in collection.products limit: number_of_products_to_fetch %}
  • {% for product in collection.products limit: number_of_related_products %}
  • {% for product in collections[settings.frontpage_collection].products offset:1 %}
  • {% for product in collection.products limit: settings.products-per-page %}

Regarding the collection.liquid file, some themes will have this code in a file that is included into the collection.liquid file. Look to see if the theme has a "product-loop.liquid" or "product-list.liquid" in the "snippets" folder, and see if the code is in there.

Regarding the index.liquid file, the code may not be in there at all.  If you can't find any variation of the code, then proceed to the next step.

Regarding the related-products.liquid the, the theme may not have this file.  If it doesn't, proceed to the next step.

4 - Edit the product.liquid

 

Select product.liquid template to open the file.  Add this code to the top of the product.liquid file:

5: Edit the theme.liquid

 

Select theme.liquid template to open the file.  Look for the following line:

</head>

Above that line, add this snippet of code:

6: Edit the cart.liquid

 

Select cart.liquid template to open the file. In the cart.liquid, look for this (this may appear more than once in the file):

{% for item in cart.items %}

Below each instance, add the following:

7: Cart.liquid continued

 

Now look for a line that starts with "<input" and ends with "/>".  Somewhere in between the line will have this:

value="{{ item.quantity }}"

At the end of this line, right before the />, add this code:

What's exactly in the line will vary upon the theme, but the end result should look something like this:

<input value="{{ item.quantity }}" {{ bold_qty_attr }} />

If you can't find this code, select the Can't Find tab.

This code will be slightly different depending upon the theme, but most of the time the line in an "input" element, which has a name, class, type, and id inside of it. Here's some examples of how this could look:

  • <input type="number" class="cart__quantity-selector" name="updates[]" id="updates_{{ item.id }}" value="{{ item.quantity }}" min="0" />
  • <input type="text" size="4" name="updates[]" id="updates_{{ item.id }}" value="{{ item.quantity }}" onfocus="this.select();" class="tc item-quantity" />
  • <input type="number" name="updates[]" id="Updates_{{ item.id }}" class="cart__quantity" value="{{ item.quantity }}" min="0" data-line="{{ forloop.index }}" />
Well done! You've successfully installed the app's code! Go get yourself a snack! You deserve it! :-)
Have more questions? Submit a request