The ?view= parameter: render any alternate template
Render a product, collection or page with an alternate template by adding ?view=suffix to its URL, for previews, quick views and landing pages.
- Format
- ?view=<template suffix>
- File
- <type>.<suffix>.json or .liquid
- Works on
- Products, collections, pages, blogs, articles
- Plan
- Every plan
- Last checked
In short
Add ?view=<suffix> to a storefront URL and Shopify renders that page with the alternate template of the same name, for example /products/example-product?view=quick-view uses templates/product.quick-view.liquid. It works without assigning the template to the product, so you can preview a new layout or fetch a stripped-down fragment for a quick-view modal.
How to use it
- Create the alternate template in the theme editor (Create template) or in code as templates/product.<suffix>.json or .liquid.
- Open the page with ?view=<suffix> appended to see it rendered with that template.
- For a fragment (quick view, AJAX tab), use a .liquid alternate template with {%- layout none -%} so the header and footer are left out.
- Read template.suffix in shared snippets when they need to behave differently on that template.
Code
product.quick-view.liquid{%- comment -%}
templates/product.quick-view.liquid
Fetched with /products/<handle>?view=quick-view to fill a quick-view modal.
layout none drops the header, footer and scripts, so the response is only
this fragment.
{%- endcomment -%}
{%- layout none -%}
{%- assign variant = product.selected_or_first_available_variant -%}
<div class="quick-view" data-product-id="{{ product.id }}">
<h2>{{ product.title }}</h2>
<p>{{ variant.price | money }}</p>
{% form 'product', product %}
<input type="hidden" name="id" value="{{ variant.id }}">
<button type="submit" {% unless variant.available %}disabled{% endunless %}>Add to cart</button>
{% endform %}
</div>
template-suffix-check.liquid{%- comment -%}
template.suffix is the alternate name in use, or nil on the default
template. Use it to switch small things in shared sections.
{%- endcomment -%}
{%- if template.suffix == 'landing' -%}
{%- assign show_breadcrumbs = false -%}
{%- else -%}
{%- assign show_breadcrumbs = true -%}
{%- endif -%}
urls.txt# templates/product.quick-view.liquid -> suffix "quick-view"
https://your-store.com/products/example-product?view=quick-view
# templates/collection.landing.json -> suffix "landing"
https://your-store.com/collections/summer?view=landing
# The same works on pages, blogs and blog posts
https://your-store.com/pages/about?view=press
# File name pattern
<template-name>.<template-suffix>.<json|liquid>
Written by Lintel. MIT license: free to use in your own store and in client work.
Limits and edge cases
- Each ?view= URL is another URL for the same content. Don’t link to it from menus or sitemaps, and check that your theme prints {{ canonical_url }} in a canonical link tag.
- The alternate template must exist in the theme you’re viewing; create it in each theme copy you use.
- You can’t replace the default template with an alternate one; ?view= only switches for that request.
- To make the switch permanent for one product, assign the template in the admin (Theme template) instead.
Questions
- What does ?view= do in a Shopify URL?
- It renders the page with the alternate template whose suffix matches, such as product.quick-view.liquid for ?view=quick-view.
- Can I preview an alternate template before assigning it?
- Yes. Open the product or page with ?view=<suffix>, or pick the template in the theme editor’s drop-down and choose a product to preview.
- Is ?view= bad for SEO?
- Not if you keep it out of your navigation and sitemaps. It creates an extra URL for the same content, so the canonical tag should point at the normal URL.
- How do I get just HTML for a modal?
- Make a .liquid alternate template that starts with {%- layout none -%} and fetch /products/<handle>?view=<suffix>. The Section Rendering API is the other option.
Shopify documentation
- Checked on a Shopify store on the date shown. Shopify changes its admin often; if a step looks different, the idea usually still works.
- Examples use placeholder IDs and your-store.myshopify.com. Replace them with your own.
- MIT license for the code snippets.
Need this built, tested and maintained for your store? See Shopify development.
