This Liquid code includes a paginate option that allows visitors to Browse pages of a collection when they land on a product page.
Publish Insights 27 March 2021
Path To Better SEO
A great Shopify feature is also a hinderance to organic search results. You can add a single product to multiple Collections. For example, you might have separate Collections for pants and shirts. Then have another for summer outfits that includes both pants and shirts.
Clicking a product from a Collection page opens up the page with a URL containing the long Collection path. Even though it is the same product, when opened within another Collection, there is a different path.
No Duplicate Pages
Google does not like duplicate content on websites. By virtue of different URL paths, you have two, three, or more pages with the exact same information: “The site might be removed entirely from the Google index, in which case it will no longer appear in search results.” [1] So your site ranking diminishes along with your organic search opportunities.
The reason for optimizing organic search is simple. Paid ads within search results get good placement for a steep price. Organic positioning is free.
With coding, there is an easy fix for duplicate product paths, with a caveat. Your theme has a Collection template. In it is the string {{ product.url | within: collection }}. Remove | within: collection to use the short canonical path: /products/handle. [2] That’s the simple fix. The caveat is that, as a merchant, you may want shoppers to navigate within Collections from the product pages.
Pick a Product Path
A few themes include next/previous buttons on Product pages. Or your theme, like the one on this site, is modified with these links. The extra navigation allows shoppers to browse related products without clicking back and forth between the Collection page. This is a great option for large Collections. Next/
This website has a user-activated Browse option that allows visitors to move through pages within a Collection when they land on a product canonical link. Below is an elegant solution for disabling the within: collection and using the browse option.
Modifying Liquid Code
Shopify is an e-commerce platform on which sellers build custom websites based on themes. Each theme adheres to similar underlying structure based on programming code called Liquid. [3]
Caution: Modifying Liquid code may invalidate your theme for future updates by the developer. Anything you add will require manual migration to a different theme, with possible incompatibility.
Before making modifications to your Shopify theme, it is good to duplicate it. Within Admin, under the lefthand navigation, choose Online Store: Themes. Click the menu for the active theme, Actions: Duplicate. Work on the duplicate and preview before activating when done.
Now you access the Liquid programming code with Actions: Edit code. Locate the collection-template.liquid. If your theme has Sections, a similarly named template should be there. You want to create the option to enable the canonical paths for Collection pages. The option will look like the screenshot below.
To create this checkbox, modify the schema at the bottom of the Collection template. I have defaulted the full Collection path to true. This is the standard Shopify behavior. You can then go to Customize the theme; open a Collection page and uncheck the option. (Alternatively, you can default the selection to false.)
{% schema %}
{
"name": "Collection page",
"settings": [
{
"type": "checkbox",
"id": "full_path_url",
"label": "Full collection path",
"info": "Full link includes collection. Visitor can click \"browse\" to expand.",
"default": true
},Depending on how the designer structured your theme, each product thumbnail title and button may be within same Collection template or within a separate snippet called something like page-item. Search the page for the words within: collection. Replace it with the conditional code below that uses the Collection settings from the schema.
{%- if section.settings.full_path_url -%}{{ product.url | within: collection }}{%- else -%}{{ product.url }}{%- endif -%}When using automated Collections, products are included when they have a matching tag (or product type). Using that same criteria, build a list of Collections based on those same tags. This can be within the same template that has the individual product thumbnails. Replace “pants” and “shirts” with your Collection names. Add more Collections using {%- elsif product_tags contains 'tag_name' -%}
{% comment %} // create collections list // {% endcomment %}
{%- assign product_tags = '' -%}{%- assign assumed_collection = '' -%}
{%- assign product_tags = product.tags | downcase | join: ',' -%}
{%- capture assumed_collection -%}
{%- if product_tags contains 'pants' -%}pants
{%- elsif product_tags contains 'shirts' -%}shirts
{%- endif -%}
{%- endcapture -%}
{{- assumed_collection | strip_newlines -}}Now build the logic for creating the Collection link when a visitor lands on a canonical link page. Open the product-template.liquid template. Newer Shopify themes have this under the Sections category. (Older themes have it beneath the Templates category.)
{% comment %} // include browse link and prior/next // {% endcomment %}
<div class="container" style="margin: 2em; max-width: 95%; display: block;">
{% if collection %}
<div style="max-height: 14px;">
<h6 class="align-center">
<span>
{% if collection.previous_product %}
<a class="control-prev" href="{{ collection.previous_product }}" title="{{ collection.previous_product.title | escape }}" rel="nofollow, noindex">PRIOR</a>
{% endif %}
{% if collection.previous_product and collection.next_product %} / {% endif %}
{% if collection.next_product %}
<a class="control-next" href="{{ collection.next_product }}" title="{{ collection.next_product.title | escape }}" rel="nofollow, noindex">NEXT</a>
{% endif %}
</span>
</h6>
</div>
{% elsif browse_url != blank %}
<div style="max-width: 30%; max-height: 14px;">
<h6><span>{{ browse_url }}</span></h6>
</div>
{% endif %}
</div>The browse_url is the linked word “Browse” that appears on product pages. For products within multiple Collections, the code uses the first one appearing within your assumed_collection list, or the product type if there is a matching Collection. If the code cannot figure out the appropriate Collection, the browse option does not appear. [3]
Note that nofollow, noindex is within the link to prevent external search engines from crawling the URL with the collection title. Other parts of your site should not be indexable. Links to user login or your onsite search field are more examples. Onsite search results append the URL with query parameters. This creates duplicate content, wastes crawl budget, and dilutes ranking signals. [4]
Remember to (re)submit your sitemap to Google. It is your domain followed by /sitemap.xml.
Close edited templates before exiting the code area. This code has been striped down. Can you simplify it further? Does it work on your site? Apply local CSS tags for better formatting.
Code samples include hidden formatting characters that should not interfere with operation. If so, paste into a text editor and reveal invisibles before pasting into Shopify theme. Replace non-breaking spaces ( ) with regular space. Remove HTML line breaks (<br />). You may also need to replace HTML less-than (<) and greater-than (>) with actual characters. Please use the comment field to express your desire for more tips and code snippets like this.
