I have two headers for two business categories, for the common pages such as contact-us, search, etc. I need to track the last page the user was on to know which header to show (header of category 1 or header of category 2). Is there a way to track visited pages in Shopify ?
Topic summary
Goal: show the correct header (business vs home) on shared pages (e.g., contact-us, search) based on the user’s last visited category.
Current approach: JavaScript sessionStorage records the last category, both headers are rendered, and JS hides/shows the appropriate one. It works but feels fragile: requires arrays of category/common templates and keyword-based href checks that must be manually updated when pages change. Liquid can’t read sessionStorage directly because it’s server-side; JS runs client-side.
Alternative proposed: persist the “last category” in Shopify cart properties/attributes via AJAX (fetch). This makes the value available in Liquid, allowing a server-side header choice without rendering both. A documentation link to Shopify’s AJAX cart private properties was provided.
Status: using the sessionStorage method for now; seeking guidance on how to add history to cart properties. No code-level implementation was shared; discussion remains open.
Key terms:
- sessionStorage: browser, per-tab, session-lifetime key/value storage accessible via JS.
- Cart properties/attributes: custom cart data that can be set via AJAX and read in Liquid.
@namphan How can I access the session storage inside the liquid code. The way I do to change the header is like this inside theme.liquid
{% if home_pages contains template %}
{% sections ‘home-header-group’ %}
{% else %}
{% sections ‘header-group’ %}
{% endif %}
Hi @ariba-s ,
Both headers have links like contact-us, search, etc.
Sorry, I don’t really understand your request, can you send me an example and send me the store link? I will check it again
for example contact-us will show the business header if the user was in a business page before clicking contact-us. However, if the user comes from a page of category home contact-us should show the home header.
Hi @ariba-s ,
I understand your request, there will be 2 ways for you to do it:
1: You will always show 2 headers and use sessionStorage to check history, then add code to hide or show 1 of the 2 headers.
2: You use the cart properties object to add history and check it with Liquid code, and saving properties is also added by JS fetch.
I hope it helps!
Thank you @namphan
I am using the first solution and it seems to be working for now. The only thing that I don’t like is that I had to create two arrays one for the first category page templates and one for all the common page templates. Which I will have to update manually whenever we add a page to the website. Also, I have to check the href based on a key word connected to the first category. All this make me feel that this solution is not robust even though it’s working.
How can I add history to the cart properties object ?