Web Development, Design and Marketing Agency based in Minnesota. Publisher of all 3five articles.

Feb 9, 2016

The Shopify View Parameter

Some time ago I stumbled upon a feature of Shopify which is incredibly powerful yet woefully under-documented and under-utilized. I’m talking about the view parameter. Shopify’s documentation talks about using it to create a ‘view all’ function on collection pages, which doesn’t even really work to view all the products in a collection in one page.

Let’s look at what it is and what it does. In a nutshell, if you append the view parameter to a Shopify URL you can specify an alternate template to view the page with.

A normal collection URL looks something like this:

http://myshop.com/collections/shirts

Adding the view parameter looks like this:

http://myshop.com/collections/shirts?view=alternate

In this example, ‘alternate’ is the name of your alternate collection template. More on creating alternate templates here:https://docs.shopify.com/manual/configuration/store-customization/page-specific/store-wide/can-i-create-and-use-an-alternate-template-for-pages-products-collections-or-blogs

This simple setup gives us a whole host of possibilities. Here are a couple ideas the view parameter could be used for:

Change the number products per page to view on a collection

A lot of ecommerce sites give you the ability to change how many products per page to view. Maybe the pagination of your base collection template is 16 products per page and you want to give people the option to view 32 or 48 products per page. You could create 2 alternate templates called 32 (collection.32.liquid) and 48 (collection.48.liquid) which would paginate by 32 and 48, respectively. Assuming everything else in the template is the same, you can put the rest of your collection template in a snippet called ‘collection-template.liquid’ so you only have to update the code in one place.

collection.liquid:
{% paginate collection.products by 16 %}
{% include ‘collection-template’ %}
{% endpaginate %}

collection.32.liquid:
{% paginate collection.products by 32 %}
{% include ‘collection-template’ %}
{% endpaginate %}

collection.48.liquid:
{% paginate collection.products by 48 %}
{% include ‘collection-template’ %}
{% endpaginate %}

Then you could create links to those other templates using the view parameter.

Shopify’s documentation on adding a ‘View All’ function uses this concept. The problem is that Shopify has a pagination limit of 50 products per page. If your collection has more than 50 products, you won’t actually be able to view all the collection’s products in one page.

Change the collection page layout from a grid to a list

In this case your alternate templates could be called ‘list’ and ‘grid’. You would have your HTML set up to output the products in a list layout in the list template and a grid in the grid template. Add a button to your collection template to allow users to switch between the 2 layouts so they can browse the way they prefer.

A/B testing

Maybe you’re looking to test different layouts of your home page or your product page to see which converts better. In this case, A/B testing services usually require a couple different URLs to test against each other. This would allow you to test different layouts for the same page or product without having duplicate content.

Show different content to people based on a link clicked

Let’s say you have a CTA button to get people to create a customer account for a specific segment of your customers, maybe based on their personal interests. You could link the button to the account registration page with the view parameter: http://myshop.com/customers/register?view=sports-fan. On your ‘customers/register.sports-fan.liquid’ template, you could include a section of content that is tailored for that interest and also insert a field into the registration form which tags the customer with ‘sports-fan’.

This could then be used to create a personalized shopping experience when that customer is logged into their account on your site, such as featuring collections or products related to their interest, showing banners with discount codes for those related products. In your templates you just check the customer’s tags and conditionally output related content.

{% if customer and customer.tags contains ‘sports-fan’ %}
{% include ‘sports-fan-promo’ %}
{% endif %}

This is just an example. You could use this idea in other ways that make sense for your particular site. Maybe you want to show a really simplified version of a page on mobile or show unique content on a page for people coming from an ad or email campaign. Get creative with it!

Notes

Some of this you can achieve with javascript, and if you’d rather go that route, more power to you! But for others looking for a simple solution, this is a quick and easy way to do it.

Also, keep in mind that the ‘default’ template can be easily accessed by your users if they remove the view parameter from the URL in their browser.

I can see this feature being utilized for a variety of use cases unique to each business’s needs. Does this solve a Shopify development problem for you? Let us know!