Sometimes you want to add a code or a certain feature to a specific page.
In order to do that you need to detect the page and after, writing a condition.
In Shopify you can achieve that with the Liquid templating language or JavaScript.
I’ll focus this tutorial more on Liquid since the code will be executed on the server side instead of the client side in the JavaScript case.
It is better to reduce as much JavaScript code as possible in order to increase store loading time which is crucial in an ecommerce project.
I recommend for page detections to use handles instead of the full URL, but it is your choice how you want to do it.
I’ll list multiple ways on how to get a page URL.
The Liquid way
In Shopify there are different ways to detect a page type in liquid.
The global object
In Shopify, the “canonical_url” is a property of an object that is used to indicate the preferred version of a URL for a particular page or resource.
It is used to resolve issues with duplicate content and to help search engines understand the structure of your website.
The “canonical_url” is used to indicate the master version of a page, it is added to the head of the HTML document as a link tag with the rel=”canonical”.
canonical_url
This property obtains the standard URL for the current webpage.
This is the default URL for the page, without any additional parameters.
For products and variants, the standard URL is the default product page without a selected collection or variation.
Home
That means that for the home page you’ll get this URL:
https://store.myshopify.com/
Or if the store is live this URL:
https://store-name.com/
Collection
For the collection page you’ll get the following URL:
https://store-name.com/collections/your-collection-name
Product
For the product page you’ll get the following URL:
https://store-name.com/products/your-product-name
Cart
For the product page you’ll get this URL:
https://store-name.com/cart
Pages
For pages you’ll get this URL:
https://store-name.com/pages/page-name
Policies
For policy pages Shopify has policies names such as: Refund policy, Privacy policy, Terms of service, Shipping policy and Contact information.
For policies pages you’ll get the following URL:
https://store-name.com/policies/policy-name
An example will be:
https://store-name.com/policies/privacy-policy
Blog
For blog listing page you’ll get this URL:
https://store-name.com/blogs/blog-name
Article (blog post)
Articles are blog posts in Shopify. For articles you’ll get the URL like this:
https://store-name.com/blogs/blog-name/article-name
404
For the 404 error page you’ll get the URL such as this:
https://store-name.com/blogs/404
Password page
For the password page you’ll get this URL:
https://store-name.com/password
Checkout
Only on Shopify Plus you’ll get this URL:
https://store-name.com/checkout
Print to screen
Copy this syntax in any liquid file to see what is inside the object.
{{ canonical_url }}
Write a condition
A simple condition to execute some code if the condition is true and other code if the condition is false:
{%- if canonical_url == 'https://store-name.com/' -%}
<!-- Do something -->
{%- else -%}
<!-- Do something else -->
{%- endif -%}
The Page URL property of the page object
Returns the relative URL of a page.
page.url
This property will work only on page types.
So in order to view the object content or access it you need to add it inside a page type.
An example of a page is the “Contact” page or any other custom page you created in liquid and it is located under the pages section (marked with 1 in the image below).
In my example below I have 3 pages in which I can use this object.
You can add the object on any section you want in the theme as long as the section is listed on a page type.
Print to screen
Copy this syntax in any section liquid file assigned to the page template to see what is inside the object.
{{ page.url }}
Condition example
A simple condition to execute some code if the condition is true and other code if the condition is false:
{%- if page.url == '/pages/contact' -%}
<!-- Do something -->
{%- else -%}
<!-- Do something else -->
{%- endif -%}
For those that don’t know, in Shopify, a “page handle” is a unique identifier that is used to identify a specific page on an online store.
It is used in the URL or web address of the page and it helps to create SEO-friendly and user-friendly URLs.
For example, a handle for a page about a product called “Apple watch” could be “apple-watch” and the URL for this page would be:
“mystore-name.com/pages/apple-watch”
This handle can be set in the page settings when creating or editing a page in the Shopify admin.
It’s important to note that page handles must be unique across the store and can only contain lowercase letters, numbers, and hyphens.
You can use ‘contain’ as well and see if the “page.url” object contains the page handle:
{%- if page.url contains 'page-handle' -%}
<!-- Do something -->
{%- else -%}
<!-- Do something else -->
{%- endif -%}
The Collection URL property of the collection object
collection.url
In Shopify, a “collection” is a group of products that have been curated together based on a certain theme, category, or tag.
Each collection has a unique URL that can be used to access the collection page on an online store.
The “collection.url” property is used to generate the URL for a specific collection.
The “collection.url” is used to access the URL of a collection. It is used in the following format:
<a href="{{ collection.url }}">{{ collection.title }}</a>
This will create a link to the collection page using the collection’s title as the link text.
The “collection.url” can be accessed only on the collection pages.
Print to screen
Copy this syntax in any section assigned to the collection template to see what is inside the object.
{{ collection.url }}
Condition example
You can also use conditions to check if a collection is a particular one and then use the “collection.url” property to link to that collection.
For example:
{% if collection.url == 'test' %}
<!-- Do something -->
{% endif %}
Another example:
{% if collection.url contains 'test' %}
<!-- Do something -->
{% endif %}
This code will create a link with the text “test” that links to the collection page of the collection that has the title containing the word “test”.
In this way you can use the “collection.url” property and the handle and title properties of a collection in combination with conditional statements to create dynamic links to collection pages on your Shopify store.
The Blog URL property of the blog object
blog.url
Returns the relative URL of the blog.
In Shopify, the “blog.url” property is a liquid variable that returns the full URL of a blog on a Shopify store.
This variable can be used in the theme templates to create links to the blog, such as in a navigation menu or on a blog post page.
For example, if the blog’s handle is “news” and the store’s domain is “example.com”, the “blog.url” would return:
https://store-name.com/blogs/news
Print to screen
Copy this syntax in any section assigned to the blog page to see what is inside the object.
{{ blog.url }}
Condition example
Here are a few examples of how the “blog.url” property can be used in a Shopify theme’s liquid code to create conditions.
If the user is on the blog page, show the blog title:
{% if request.path == blog.url %}
<!-- Do something -->
{% endif %}
If the user is not on the blog page, show a link to the blog:
{% if request.path != blog.url %}
<!-- Do something -->
{% endif %}
These are just a few examples of how the “blog.url” property can be used in conditions.
It can be used in a variety of ways to customize the behavior of a Shopify theme based on the location of the user in the store.
The Product URL property of the product object
product.url
Returns the relative URL of the product.
Print to screen
Copy the syntax below in any section assigned to the blog page to see what is inside the object.
You’ll see that it will list the product URL for the page that you see in your browser.
{{ product.url }}
Outputs:
/products/product-name
Condition example
To display a piece of code on the product page if the “product.url” contains the word “test”:
{% if product.url contains 'test' %}
<!-- Do something -->
{% endif %}
The Variant URL property of the variant object
variant.url
Returns the variant’s absolute URL.
In the context of Shopify, a “variant” is a specific version of a product that may have variations in options such as size, color, or material.
The “url” property of a variant in Shopify refers to the unique web address (URL) of the product page for that specific variant on the online store.
This URL can be used to link to the product page directly, and customers can access it to view more information and make a purchase.
Print to screen
Copy the syntax below in any section assigned to the blog page to see what is inside the object.
You’ll see that it will list the product URL for the page that you see in your browser.
{{ variant.url }}
Outputs:
http://store-name.com/products/product-name?variant=123456789
Condition example
If the variant’s URL contains the word “test”, show a sale badge on the product page:
{% if variant.url contains 'test' %}
<!-- Do something -->
{% endif %}
If the variant’s URL is the same as the current page’s URL, change the “Add to Cart” button text to “Already in Cart”:
{% assign page_url = 'http://store-name.com/products/product-name?variant=123456789'
{% if variant.url == page_url %}
<!-- Do something -->
{% else %}
<!-- Do something else -->
{% endif %}
The Article URL property of the article object
article.url
Returns the relative URL of the article.
The “article.url” property of the Shopify article object represents the URL of the article on the Shopify blog section.
It is a string value that is automatically generated by Shopify based on the title of the article and can be used to link to the blog article page.
Print to screen
{{ article.url }}
If the title of the article is “My article” the generated URL for the article will be:
https://store-name.com/blogs/blog-name/my-article
Condition example
To check if the URL of the article includes the word “test,” you could use the following condition in your liquid template:
{% if article.url contains 'test' %}
<!-- Do something -->
{% endif %}
The Shop secure URL property of the shop object.
In Shopify, the “shop.secure_url” property is a string that contains the URL of the store’s Shopify admin panel, but accessed over a secure HTTPS connection.
This property can be used to ensure that any links to the admin panel within a theme or app are served over a secure connection for added security.
The shop object can be used and accessed from any file in your theme.
Print to screen
{{ shop.secure_url }}
Outputs:
https://store-name.com
This condition checks if the “shop.secure_url property” is equal to a specific URL:
{% if shop.secure_url == 'https://store-name.com' %}
<!-- Do something -->
{% endif %}
This condition checks if the “shop.secure_url” property is equal contains a specific string:
{% if shop.secure_url contains 'myshopify' %}
<!-- Do something -->
{% endif %}
The JavaScript way
If you work with vanilla JavaScript you can pass liquid properties to it but in case you want to get the link of any Shopify page directly with JavaScript you can do it like this:
Get the full URL of the Shopify current page
You can use the location object in JavaScript to get the URL of the Shopify current page in the browser.
This object contains information about the current URL, including the protocol (e.g. “http” or “https”), hostname, and path.
You can use the “href” property of the location object to get the entire URL of the current page:
var currentPageLink = window.location.href;
Check the code in console with:
console.log( currentPageLink );
Outputs:
https://store-name.com/products/product-name
Get the URL protocol of the Shopify current page
You can use the “protocol” property of the location object to get only the protocol of the current page:
var protocol = window.location.protocol;
Check the code in console with:
console.log( protocol );
Outputs:
https:
Get the URL hostname of the Shopify current
You can use the “hostname” property of the location object to get only the domain name of the current page:
var hostname = window.location.hostname;
Check the code in console with:
console.log( hostname );
Outputs:
store-name.com
Get the URL pathname of the Shopify current page
You can use the “pathname” property of the location object to get only the domain name of the current page:
var hostname = window.location.pathname;
Check the code in console with:
console.log( pathname );
If you are on the product page for example it outputs:
/products/product-name
Conclusion
That’s it. Easy right?
Yep, this part is easy, the more complicated part is when you start to write complex Liquid or JavaScript code to achieve certain functionalities, but for basic stuff to check some simple conditions this will help you.
Make sure you thoroughly test the code before you deploy it, even if it’s just a line of code, or else bugs could kill your sales!