How to show or hide content on your Shopify store based on the URL query (Serve Side)
Originally published at http://iliashaddad.com/blog/how-to-show-or-hide-content-on-your-Shopify-store-based-on-the-URL-query
In the next four weeks, I’m planning to start a challenge it will be called #4weeksOfShopifyDev. In this challenge, I’ll write technical articles related to the Shopify theme and app development.
The majority of the upcoming articles are from previous Shopify store clients I worked with
In today’s article, I’ll be talking about how to show content on a custom Shopify page based on the URL query.
For example, a Shopify client want to show dynamic content based on the URL query
Demo Page for the first part: https://ilias-demo.myshopify.com/pages/about-us?refer=facebook
Demo Page for the second part: https://ilias-demo.myshopify.com/pages/vip-deals?code=iliashaddad
WARNINGS (SERIOUSLY)
Shopify will cache the output of pages. If you use this querystring parsing code to show/hide content on the site you risk exposing the result to all customers. Imagine you have a discount code shown with the querystring. If Shopify caches that output version every single customer will see the code regardless of the querystring in place. The code attempts to avoid that risk by using the cache querystring value but the risk remains.
By using the cache querystring value you’re no longer making use of the Shopify cache. This is what helps keep your site fast and perform well under load. Flushing the cache isn’t a great idea — especially at scale.
Also, you have no control over what content appears in content_for_header. Shopify could change the contents at any point so this code could stop working.
It’s for those reasons (and mainly the first two) that I would strongly caution you against using it on a production site. It’s still an interesting idea in any case.
Let’s start!
- Create a new Shopify page template
- Create a new Shopify page and link it with the custom template
- Create a new snippet called querystring paste this code on it
- Include the snippet in the custom page we created before
{% capture view %}{%- render 'querystring', param: "refer" -%}{% endcapture %}- Paste this code in the custom page
Et voila, you have a dynamic page based on URL query
In the next part of this article, I’ll make a custom Shopify page and you can only access it if you have a code in the URL query.
For example, you have a custom deal for specific visitors and you want only these visitors to see this deals page.
Let’s do it!
- Create a new Shopify page template
- Create a new Shopify page and link it with the custom template
- Create a new snippet called querystring paste this code on it
- Include the snippet in the custom page we created before
{% capture view %}{%- render 'querystring', param: "code" -%}{% endcapture %}- Paste this code in the custom page
Now, if you visit the custom deals with the code in URL query string https://ilias-demo.myshopify.com/pages/vip-deals?code=iliashaddad
References:
- Access querystring in Liquid: Shopify community form
- Freak Design Blog Post
