patterncssModerate
Shopify Dawn Theme — Homepage V2 Redesign Pattern
Viewed 0 times
horizontal scrollfeatured collection overrideimage overlay cardsfeature bannersection ID targetingimage_pickershopify dawn
browser
Problem
Updating Shopify Dawn theme homepage to match a preview HTML design with horizontal product scrolling, image-overlay cards, feature banners, and new sections — without breaking Dawn's built-in product rendering (cart, variants, inventory).
Solution
Use CSS-only overrides to transform Dawn's featured-collection grid into horizontal scroll — target sections by their #shopify-section-{id} wrapper using the section key from index.json. Create a shared .dp-feature CSS class for reusable full-width banner sections (background image + gradient overlay + left-aligned content). Use image_picker in Liquid schemas for all local images so store owners can swap via Customizer. For industry/category cards, use image-overlay pattern with ::after gradient and absolute-positioned text. For footer background images, use ::before pseudo-element on footer wrapper. Key gotcha: Dawn's JSON templates don't support @extend or custom_css with Sass — use plain CSS selectors targeting section IDs instead.
Why
Dawn theme wraps each section in a div with id #shopify-section-{key}, where key comes from the index.json section keys. This provides stable CSS hooks for overriding built-in section layouts without modifying Dawn's Liquid code.
Gotchas
- Dawn JSON templates don't support @extend or Sass in custom_css - use plain CSS with section ID selectors
- Shopify wraps each section in #shopify-section-{key} where key is from index.json - use this for CSS targeting
- Don't recreate product rendering in custom sections - override Dawn's featured-collection via CSS to preserve cart/variant/inventory functionality
Code Snippets
Override Dawn featured-collection grid to horizontal scroll by targeting section ID
#shopify-section-featured-collection-head .grid--4-col-desktop {
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto;
scroll-snap-type: x mandatory;
gap: 20px;
}
#shopify-section-featured-collection-head .grid__item {
min-width: 240px;
max-width: 240px;
flex-shrink: 0;
scroll-snap-align: start;
}Context
When redesigning a Shopify Dawn theme homepage to match a custom HTML preview
Revisions (0)
No revisions yet.