How can I add a unique page identifier to the body tag of each page?

JohnBr · ‎05-20-2025

I can see how to add template name and url / handle as a class or id to the body tag, but I'd like to generate and add a unique page id to each page (such as WordPress does) so that even if the page or template name (or url handle) is changed, the selector I've used for that page still works.

Has anyone done this?

Thanks!

tim · ‎05-20-2025

Usually, handle does not change even if you change the title of the product/page/article, so there is no real need for this.

But you can also use id -- this would not change even when handle is changed.

Something like (need to add more choices instead of ... )

{% liquid
  case request.page_type
    when 'product':
      assign id = product.id
    when 'collection'
      assign id = collection.id
    when 'blog'
      assign id = blog.id
    when 'article'
      assign id = article.id
    when 'page'
      assign id = page.id
    ...
  endcase
%}
{% capture uniq_id -%}
  {{- request.page_type | split: "/" | last -}}
  {%- if template.suffix %}--{{ template.suffix }}{% endif -%}
  {%- if id %}--{{ id }}{% endif -%}
{%- endcapture %}

<body class="{{ uniq_id }}">

https://shopify.dev/docs/api/liquid/objects/request

https://shopify.dev/docs/api/liquid/objects/template

https://shopify.dev/docs/api/liquid/objects/product#product-id

If my post is helpful, hit the thumb up button -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com

View solution in original post

Guleria · ‎05-20-2025

Hello @JohnBr ,

You can use this one

<body {% if template.name == "index" %} id="index" {% else %} id="{{ handle }}" {% endif %} class="{{ template }}{% if template == "product" %} {{ product.handle }}{% endif %}{% if template == "collection" %} {{ collection.handle }}{% endif %}">

Regards

Guleria

- Custom themes, UI/UX design, ongoing maintenance & support.
- Drop an email if you are looking for quick fix or any customization
- Email: guleriathakur43@gmail.com Skype: live:navrocks1
- Try GEMPAGES a great page builder

JohnBr · ‎05-20-2025

Yes I tried this, but it didn't produce any result for id on my site. Even if it did, a change of handle would break the selector.

tim · ‎05-20-2025

Usually, handle does not change even if you change the title of the product/page/article, so there is no real need for this.

But you can also use id -- this would not change even when handle is changed.

Something like (need to add more choices instead of ... )

{% liquid
  case request.page_type
    when 'product':
      assign id = product.id
    when 'collection'
      assign id = collection.id
    when 'blog'
      assign id = blog.id
    when 'article'
      assign id = article.id
    when 'page'
      assign id = page.id
    ...
  endcase
%}
{% capture uniq_id -%}
  {{- request.page_type | split: "/" | last -}}
  {%- if template.suffix %}--{{ template.suffix }}{% endif -%}
  {%- if id %}--{{ id }}{% endif -%}
{%- endcapture %}

<body class="{{ uniq_id }}">

https://shopify.dev/docs/api/liquid/objects/request

https://shopify.dev/docs/api/liquid/objects/template

https://shopify.dev/docs/api/liquid/objects/product#product-id

If my post is helpful, hit the thumb up button -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com

How can I add a unique page identifier to the body tag of each page?

How can I add a unique page identifier to the body tag of each page?

Community Blog Articles