• Skip to primary navigation
  • Skip to main content
  • Skip to footer

Merchant Labs

Helping online merchants succeed is what we do best!

  • About
  • Contact
  • My Account

Experiments, Liquid, Proof of Concept, Shopify, Useful Code / November 12, 2017

Shopify URL to Liquid Testing on Product Pages Hack

In my journey as a Shopify developer, I’ve always wanted a method for interacting with liquid code via the URL. Shopify has gone to great lengths to ensure this isn’t possible as it could introduce a world of security issues.

However, I still need that functionality and I’m not trying to do anything that would jeopardize the security of the platform.

Overview of the Hack

Luckily I just found it for product pages and it keeps everything secure. The secret is a small window that is open at the end of product pages as shown below:
https://ajax-cart.myshopify.com/products/product - gets you the product page
https://ajax-cart.myshopify.com/products/product/ - gets you the product page
https://ajax-cart.myshopify.com/products/product/bla - gets you the product page
https://ajax-cart.myshopify.com/products/product/bla/ - gets you the product page * the last / in this example always gets removed
https://ajax-cart.myshopify.com/products/product/bla/b - gets you the 404 page

What this means is that you basically get a limited string after the product handle that you can then use with the following liquid code:

{{ request.path | split: '/' | last }}

So calling the following URL that has the above code in it:

https://ajax-cart.myshopify.com/products/product/bla

Will get you:

bla

A Simple Example

So let’s do something very simple with this like create a simple flag (on/off) using the URL and an IF statement in liquid code. Lets call the following URL for our example:

https://ajax-cart.myshopify.com/products/product/myvar

I could then use the following liquid code on that page:

{% assign myflag = request.path | split: '/' | last %}
{% if myflag == 'myvar' %}
{% comment %}you're code goes here{% endcomment %}
{% endif %}

This example shows the code I actually use most often during development since it’s super simple to implement.

A Complex Example

Lets say we have a situation where we need more than just a simple variable set or not-set check. In this situation there are very few characters at our disposal, so it totally depends on your situation how you go about this next part, but here is one way to do it. Again, everything starts with the URL that we call.

https://ajax-cart.myshopify.com/products/product/myvar_abc123

I could then use the following liquid code on that page:

{% assign myparam = request.path | split: '/' | last | split: '_' %}
{% if myparam[0] == 'myvar' %}
{% if myparam[1] == 'abc123' %}
{% comment %}you're code goes here{% endcomment %}
{% elsif myparam[1] == 'abcd1234' %}
{% comment %}you're code goes here{% endcomment %}
{% endif %}
{% endif %}

What you can do with this is pass in very simple strings such as letters, numbers, underscore or dash. Another / or a . or any other chars will get stripped out and can’t really be counted on.

I hope this helps anyone else out there struggling with testing of product page templates.

Filed Under: Experiments, Liquid, Proof of Concept, Shopify, Useful Code Tagged With: Coding, Shopify Liquid

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Footer

Shopify Partner

Let Merchant Labs, with over 15 years experience in ecommerce, help you SUCCEED online! From …

Read More about Shopify Development Services

  • Twitter
  • YouTube

Ajax-Cart Coming Soon

What is Ajax-cart for Shopify? Ajax-cart for Shopify is a big project to bring some of the most wanted features to the Shopify cart page. This page is also known as the basket screen. Its …

more about Ajax-Cart for Shopify

Tags

Apps Script Coding Documentation Javascript MySQL PHP Shopify Liquid

Contact Us

Merchant Labs
Los Angeles, California

P: 424-236-0372
E: mngr@merchantlabs.com

Proud Partners For

Copyright © 2023 · Digital Pro on Genesis Framework · WordPress · Log in