Skip to product information
1 of 1
Published:2024.12.05

An example of how to insert a banner image between product lists on the collection page of the Shopify theme "Dawn/Rise"

An example of how to insert a banner image between product lists on the collection page of the Shopify theme "Dawn/Rise"

Applications

  • Top page editing

How to implement

  • LIQUID
  • HTML/CSS
View full details

This is a method for embedding promotional banner images between products on the collection page of the Shopify theme "Dawn/Rise."

◆ Implementation procedure (for Rise/Dawn theme)
- Add a new block element to the product grid section of the collection template - Set the code to insert the newly added block

◆ Banner setting procedure ・Open the "Collection" template in the theme editor ・Add the "Promotion Banner" block in the "Product Grid" section and set the image and link destination ・Adjust the display position of the banner image while considering balance

*Note: Because banner images are inserted separately from the display settings, there will be a discrepancy in the number of products displayed per page. To align the ends, you will need to adjust the number of banners and columns to be displayed.


An example of how to insert a banner image between product lists on the collection page of the theme "Dawn/Rise"


[(For the Rise theme) Setup procedure ①] Add a new blocks element to the schema of "sections/main-collection-product-grid.liquid"


[(For the Rise theme) Setting procedure ②] Add the code to "sections/main-collection-product-grid.liquid"


[Settings (for the Rise/Dawn theme)] Add a block to the product grid section of the collection template and set the image, link destination, banner display position, and image ratio.


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 new blocks element to the schema of "sections/main-collection-product-grid.liquid"

Related Post