Skip to product information
1 of 1
Published:2024.11.08

Example of how to display a drop-down pager on the collection page of the Shopify theme "Rise/Dawn"

Example of how to display a drop-down pager on the collection page of the Shopify theme "Rise/Dawn"

Applications

  • Collection information management and editing

How to implement

  • HTML/CSS
  • Javascript
View full details

In stores with a large number of products, a pull-down pager can sometimes be more convenient, as it makes it easier to move directly to a page you have a specific goal in mind, such as when sorting by price.
By the way, even when applying a filter that does not reload the page, the number of pages that can be transitioned to is automatically updated.

◆Benefits of implementation
- Smoother page transitions are expected to improve user navigation.

◆Specific steps: Add a "Custom Liquid Section" to the collection template and insert the pager code.


Example of how to display a drop-down pager on the collection page of the Shopify theme "Rise/Dawn"


[(For the Rise/Dawn theme) Setup method] Add a customized Liquid section to the collection template and insert the code.


[Supplementary Note 1] Multiple installations are possible, such as two locations above and below.


[Supplement ②] If you want to hide the default pager, set it in the custom CSS of the "Product Grid" section.


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 your collection template and insert the code

Related Post