Collections

Background

When using the CTA Rules feature, product tags can determine eligibility. For example, one might configure the rules such that products with the tag Final Sale are excluded from Try Before You Buy.

Shopify allows for the creation of automated collections based on matched tags, but not exclusion. Therefore to create a collection page requires a custom page template with additional logic to evaluate products against CTA Rules.

📘

Hint

See our recommendations for configuring your collection page in Shopify here.

What's next?

TryNow exposes some methods on a window.trynow object in order to allow for exclusion in collections that align with Rules Engine behavior. The following steps will get you set up.

1. Set up the basics

Create a new collection template as you would for any new collection within the Shopify Code Editor. Here you can determine your naming for TryNow collection pages, define product loops, and create templates.

🚧

Heads up!

Make sure you have configured the rules engine and added your products to the TryNow selling plan.

2. Ensure TryNow is enabled on your theme

For more information on configuring TryNow to your theme, check out our self-service documentation here.

3. Create a TryNow collection

While there are any number of ways to make a collection, we recommend using automated collections and including some shopper education to optimize the TryNow experience. See our step-by-step guide here.

Once the template is created, you can assign it to a collection of products in Shopify.

🚧

Heads up!

The collection template must be created in the live theme code. It will not be visible until assigned a collection that's on an active sales channel.

4. Configure TryNow Rules

Some rules are created by default when TryNow is installed on your store. To configure rules, you must navigate to Merchant Portal:

Implementing Exclusion Criteria

Shopify does not support exclusion behavior when generating automated collections. In order to solve for that, we offer built-in TryNow product visibility logic which can be implemented in the Shopify Theme Code.

Product Loops

A product loop is a piece of code in which the list of products in the collection is being "looped" over so every product is rendered in the same way.

Given the below product loop:

{%- for product in collection.products -%}  
  <li class="grid__item">
    {% render 'card-product',
      card_product: product,
      media_aspect_ratio: section.settings.image_ratio,
      show_secondary_image: section.settings.show_secondary_image,
      show_vendor: section.settings.show_vendor,
      show_rating: section.settings.show_rating,
      lazy_load: lazy_load,
      show_quick_add: section.settings.enable_quick_add,
      section_id: section.id
    %}
  </li>
{%- endfor -%}

You can pass along any string to the calculateProductVisibilityFromTags() method.

🚧

Heads up!

While any string can be passed to calculateProductVisibilityFromTags() , TryNow recommends using the tags as provided by Shopify on the Product to guarantee alignment with the Rules Engine.

For example,

One can pass the product.tags variable provided by Shopify to the method. This is dynamic and only requires that you add additional tags to the Rules Engine:

await window.trynow.product.calculateProductVisibilityFromTags({{ product.tags | json }})  
// outputs true or false based on rules engine criteria

Or manually (not recommended— this will not match Rules Engine Criteria automatically):

await window.trynow.product.calculateProductVisibilityFromTags(['finalsale', 'new arrivals'])  
// outputs true or false based on rules engine criteria

Caveats

Since Liquid is processed server-side and javascript is executed client-side, it is not possible to directly assign Javascript variables to Liquid variables. This is important in theme templating as Javascript needs to be injected separately.

To solve for this, we recommend adding a script within your Liquid TryNow collection file and manipulating the visibility after the DOM Content is loaded.

For example, in the created TryNow collection template file (ex: trynow-collection.liquid) one can add this code snippet:

  <!------ BEGIN TRYNOW ------->
  <script>
    window.addEventListener('DOMContentLoaded', async function(){
        const products = {{ collection.products | json }}
        products.forEach(async (product) => {
    			product.tags = product.tags.map(tag => tag.toLowerCase());
          const isVisible = await window.trynow.product.calculateProductVisibilityFromTags(product.tags) // Shopify provided tags
          if(!isVisible){
            document.getElementById(`product-${product.id}`).style.display = "none";
          } 
        })
      })
  </script>
  <!------- END TRYNOW ------->

You may need to adjust the product card ID or class name to match the selector provided.*