Template modifications for Shopify and Shopify Plus

When using the Advanced Targeting on Shopify or Shopify Plus, what template modifications might be required?

Lari Lehtonen avatar
Written by Lari Lehtonen
Updated over a week ago

When leveraging the Advanced targeting functionality, certain template modifications might be required in order to correctly support the clone collection approach.

Lean more about Advanced targeting here: Advanced Targeting on Shopify and Shopify Plus

Add the Conditional Canonical URL to theme.liquid

The collection templates need to have the canonical url indicating duplicate content to search engines. Failing to do this step might have negative SEO implications for the web shop and is not recommended. 

Read more about the SEO implications on Shopify here: Shopify Sequencing and SEO

Replace this default canonical tag from Shopify: 

<link rel="canonical" href="{{ canonical_url }}">


With the conditional function to add the canonical URL to Nosto generated category pages: 

{% if product == blank and collection and collection.metafields.nosto != blank %}
  <link rel="canonical" href="{{shop.url}}/collections/{{collection.metafields.nosto.sourceHandle}}">
{% else %}
  <link rel="canonical" href="{{ canonical_url }}">
{% endif %}

Adding a conditional function to filter out Nosto collections

Default Shopify stores for example rely on templates/list-collections.liquid to create box-style category listing used for example on the main collection page. When using similar kinds of functions that will loop out all collections, the Nosto generated clone collections need to be filtered out from the template. 

Replace this default list-collections function: 

  <div class="grid grid--uniform">
    {% for collection in collections %}
        <div class="grid__item small--one-half medium-up--one-third">
          {% include 'collection-grid-item' %}
        </div>
    {% endfor %}
  </div>


With exactly the same function, excluding collections with the Nosto metafield applied:

  <div class="grid grid--uniform">
    {% for collection in collections %}

      {% if collection.metafields.nosto == blank %}
        <div class="grid__item small--one-half medium-up--one-third">
          {% include 'collection-grid-item' %}
        </div>
      {% endif %}  
 
    {% endfor %}
  </div>

Adding a conditional function to use original collection image. 

In some cases, an online store might rely on the collection image for prominent styling items such as the hero banner image, or in metafields such as og:img for example.

In these cases you need to add a conditional that leverages the original collection image instead of the temporary image added by Nosto to differentiate clone collections within the Shopify admin/user interface.

{% if product == blank and collection and collection.metafields.nosto != blank %}
  {{collections[collection.metafields.nosto.sourceHandle].image.src}}
{% else %}
  {{collection.image.src}}
{% endif %}


Note:

Social media tags such as og:url should be adjusted in the same way.

If your collection image block is checked in the template, cloned collections will require additional validation. For instance, if your current validation is structured as follows:

{% if collection.image != blank %} 
<!-- Your code to execute when the collection has an image -->
{% endif %}

You will need to modify this validation to ensure that the original collection has an image. For example:

{% if collection.image != blank and collection.metafields.nosto == blank or collections[collection.metafields.nosto.sourceHandle].image != blank %} 

<!-- Your code to execute when the original collection has an image -->

{% endif %}

This adjustment ensures that the image requirement is met for both the original and cloned collections.


Did this answer your question?