Skip to product information
1 of 1
Published:2024.12.21

Example of setting up a loading bar when transitioning pages in Shopify

Example of setting up a loading bar when transitioning pages in Shopify

Applications

  • Navigation management and editing

How to implement

  • Javascript
  • HTML/CSS
View full details

This is a method of implementing a loading bar that can greatly improve the user experience when transitioning between pages.
When clicking a link to navigate within the store, a pseudo loading bar is displayed in the header. It doesn't actually load the destination page, but by providing feedback that the link is responding, users can visually see the progress of the page loading, reducing frustration.

◆Benefits of implementation ・Visually showing the progress of page loading reduces user stress ・Prevents users from misunderstanding that the site is frozen

◆Specific steps ・Add a "Customized Liquid Section" to the header group ・Insert the code for the loading bar


Smooth page transitions. Example of loading bar implementation.


Example of setting to display a loading bar when transitioning pages


How to set it up: Add a customized Liquid section to the header group and insert the code.


After making a purchase (all items are ¥0), you will be able to view the sample code.

If you have already made a purchase, please login here.

Sample Codes

Test Theme :Dawn/Rise 15.2.0

Add a customized Liquid section to a header group and insert the code.

Related Post