How to show or hide content on your Shopify store based on the URL query (Serve Side)

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

Demo Page for the second part

How to show or hide content on your Shopify store based on the URL query (Serve Side)

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

How to show or hide content on your Shopify store based on the URL query (Serve Side)

Create a new Shopify page and link it with the custom template

How to show or hide content on your Shopify store based on the URL query (Serve Side)
  • Create a new snippet called querystring paste this code on it
{%- capture contentForQuerystring -%}{{ content_for_header }}{%- endcapture -%}
{%- assign pageUrl = contentForQuerystring | split:'"pageurl":"' | last | split:'"' | first | split:'.myshopify.com' | last |
   replace:'\/','/' |
   replace:'%20',' ' |
   replace:'\u0026','&'
-%}
{%- assign itemShow = '' -%}
{%- for i in (1..1) -%}
  {%- unless pageUrl contains "?" -%}{% break %}{%- endunless -%}
  {%- assign pageQuerystring = pageUrl | split:'?' | last -%}
  {%- assign parts = pageQuerystring | split:'&' -%}
  {%- for part in parts -%}
    {%- assign keyAndValue = part | split:'=' -%}
    {%- if keyAndValue.size > 1 -%}
      {% if keyAndValue[0] == param %}{{keyAndValue[1]}}{% endif %}{%- endif -%}{%- endfor -%}{%- endfor -%}
  • Include the snippet in the custom page we created before
{% capture view %}{%- render 'querystring', param: "refer" -%}{% endcapture %}
  • Paste this code in the custom page
<div class="page-width">
  <div class="grid">
    <div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
      <div class="section-header text-center">
        <h1>{{ page.title }}</h1>
      </div>
      <div class="rte">
        {% capture view %}{%- render 'querystring', param: "refer" -%}{% endcapture %}
        {% unless view == blank  %}
        Hey, You're comming from {{view }}
        {{ page.content }}
        {% endunless %}
      </div>
    </div>
  </div>
</div>

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

How to show or hide content on your Shopify store based on the URL query (Serve Side)
  • Create a new Shopify page and link it with the custom template
How to show or hide content on your Shopify store based on the URL query (Serve Side)
  • Create a new snippet called querystring paste this code on it
{%- capture contentForQuerystring -%}{{ content_for_header }}{%- endcapture -%}
{%- assign pageUrl = contentForQuerystring | split:'"pageurl":"' | last | split:'"' | first | split:'.myshopify.com' | last |
   replace:'\/','/' |
   replace:'%20',' ' |
   replace:'\u0026','&'
-%}
{%- assign itemShow = '' -%}
{%- for i in (1..1) -%}
  {%- unless pageUrl contains "?" -%}{% break %}{%- endunless -%}
  {%- assign pageQuerystring = pageUrl | split:'?' | last -%}
  {%- assign parts = pageQuerystring | split:'&' -%}
  {%- for part in parts -%}
    {%- assign keyAndValue = part | split:'=' -%}
    {%- if keyAndValue.size > 1 -%}
      {% if keyAndValue[0] == param %}{{keyAndValue[1]}}{% endif %}{%- endif -%}{%- endfor -%}{%- endfor -%}
  • Include the snippet in the custom page we created before
{% capture code  %}{%- render 'querystring', param: "code" -%}{% endcapture %}
  • Paste this code in the custom page
{% capture code %}{%- render 'querystring', param: "code" -%}{% endcapture %}
        {% if code == "iliashaddad"%}
<div class="page-width">
  <div class="grid">
    <div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
      <div class="section-header text-center">
        <h1>{{ page.title }}</h1>
      </div>
      <div class="rte">
        {{ page.content }}
      </div>
    </div>
  </div>
</div>
        {% endif %}

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

I hope you find this article useful. I'll be writing more technical in the next 4 weeks. if you joined me in this challenge, You can find me on

Subscribe below to get notified of new posts.

Related Posts

Convert your Shopify store to PWA for better performances (conversion)

On the 16th of the #4WeeksOfShopifyDev challenge, I’ll be talking Why you should convert your Shopify store to PWA for better performances?

What benefits of being a Shopify partner and make money using it?

On the 15th of the #4WeeksOfShopifyDev challenge, I’ll be talking about what benefits of being a Shopify partner?

Why developers should invest in learning the Shopify App or Theme development?

On the 14th of the #4WeeksOfShopifyDev challenge, I’ll be talking about why developers should invest in learning and becoming a Shopify developer.

Let's Build Something Together

Feel free to reach out if you're looking for a developer, have a question, or just want to connect.

Email:contact@iliashaddad.com

© Ilias Haddad 2021. All rights reserved.

Made with ❤️ in Morocco 🇲🇦