Dawn Theme - Product Cards - Full screen width

Shopify Discussion

Topic summary

A user seeks to make product cards in their Dawn theme collections (bracelets, rings, necklaces, earrings) span the full screen width.

Solution Provided:

  • Navigate to Shopify Admin → Online Store → Themes → Customize
  • Access Collections → Default collection settings
  • Check for container width settings and set to full-width if available
  • If not available, add custom CSS code

CSS Implementation:
The suggested code targets screens 768px+ and modifies the .collection .grid and .grid__item classes to achieve full-width display. The .grid__item width can be adjusted:

  • 100% for single full-width cards
  • 50% for two products per row
  • 33.33% for three products per row

The discussion remains open as the original poster has not confirmed whether the solution resolved their issue.

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

Hi there,

I would like to have my products cards when within each collection (bracelets / rings / necklaces / earrings) to fulfil the full width of the screen.

Is there anyone who could help me ?

Thanks

Emma

1 Like
2

Hello @Emma33000

In the Dawn theme, product cards within collections are typically constrained by a container, but we can modify the CSS and theme settings to make them span the full width. Here’s how to do it:

Steps to Make Product Cards Full Width:

  1. Go to your Shopify Admin → Online Store → Themes.
  2. Click Customize on the Dawn theme.
  3. On the left panel, find and select Collections > Default collection.
  4. Look for the Collection Layout settings. If there’s a container width setting, set it to full-width. If not, proceed with custom CSS.
    5.Go to Theme settings → Custom CSS (if available) or add the following CSS manually:

CSS Code to Make Product Cards Full Width

@media screen and (min-width: 768px) {
  .collection .grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0; /* Remove gap if needed */
  }
  .collection .grid__item {
    width: 100%; /* Make each item full width */
  }
}
  1. Save the changes and check your collection pages.

If you want multiple products in a row but still spanning the full width (instead of each product being full-width), adjust the .grid__item width to something like 50% (for 2 products per row) or 33.33% (for 3 per row).

Thank you :blush: