Dawn theme customization product card

Store Design
, , , , , , , , ,

Topic summary

A user wants to add a horizontal scroller to product cards across multiple pages (home, collection, search) in the Dawn theme. The scroller content should be dynamically populated using metafields.

Reference provided: theputchi.com demonstrates the desired functionality

Proposed solution: One respondent suggested adding custom CSS:

.slider-mobile-gutter > ul.contains-card {
  flex-wrap: nowrap;
  overflow-x: auto;
}

Current status: The discussion remains open with no confirmation whether the CSS solution successfully implements the dynamic metafield-based scroller or if additional Liquid/HTML modifications are needed.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

How to add that scroller in product card in home page, collection page, search page etc..

Screenshot 2025-05-14 at 9.09.46 PM.png
Screenshot 2025-05-14 at 9.09.46 PM.png1712×546 130 KB

The content in the scroller should be dynamic that’ll be created by metafields

Reference website: https://theputchi.com/

My website: https://weavers-town.myshopify.com/

Password: weaver

2

Hi @Sivadarshan

Let try to add this custom CSS code :

.slider-mobile-gutter > ul.contains-card{
  flex-wrap: nowrap;
    overflow-x: auto;
}
3

@Mack28 Either the reference site or my site (dawn)