Skip to product information
Published:2024.12.21
[Dawn] Example of setting up a loading bar when transitioning pages in Shopify
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.
Sample Codes
Test Theme :Dawn/Rise 15.2.0
