Site Overlay

Add a unique ID to body tag for each page in Bigcommerce?

I faced this issue while working so want to share some solution on it.

Normally Bigcommerce uses skeleton and theme files are there with scss and partial files. But when we create the pages we have to target the specific page to apply style or write script for that specific page.

Bigcommerce has big documentation for each Tag or Context. In the web or Bigcommerce forums there is no correct solution for this kind of thing to add unique class or id to the body.

After studying the documentation found that we can use parameters specified in this given url.
https://developer.bigcommerce.com/stencil-docs/reference-docs/global-objects-and-properties/models/page

So as full proof solution to add unique id or class to any div or body just find the file like body.html or header.html where we can put below code to make unique id or class work. Find your content wrapping div and add below code in your file. This will generate the unique ID of the page.

<div class="body page-body-id-{{page.id}}">

So as mentioned above you will see {{page.id}} is unique id generated by Bigcommerce as per page. So this will generate unique ID as you required.

So using that you can target specific page element without affecting any other element on website.

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright © 2022 Dip Codes. All Rights Reserved.