balenciaga collection page. Kind of like bullet theme layout. Make it a feature collection section
Topic summary
A user seeks to replicate Balenciaga’s collection page layout (clean grid with borders, centered text, minimal styling) on the Dawn theme. The reference shows products in a structured grid with square images and simple typography.
Proposed Solutions:
-
Custom section approach: Create a horizontal featured collection using flexbox/grid with horizontal scrolling, remove default borders/hover effects, and use consistent square image ratios with centered product details.
-
CSS customization: A detailed CSS snippet was provided that:
- Removes default grid spacing
- Adds borders between grid items
- Centers product information
- Creates the bordered grid structure similar to the reference
- Should be added to Theme Settings > Custom CSS due to character limits
Screenshots included demonstrate the CSS solution’s output, showing a grid layout with borders and centered product information that closely matches the Balenciaga aesthetic.
Multiple respondents confirm this requires Dawn theme customization beyond default settings.
2 Likes
Hello @article ,
Need to customize the dawn theme if you need a look like the reference.
Regards
Guleria
you can get pretty close to that layout using the dawn theme with a few custom tweaks. here’s a simple way to do it:
-
create a new section (like featured-collection-horizontal)
-
show the products in a single row using flexbox or grid with horizontal scrolling
-
hide borders and hover effects to keep it clean and minimal
-
use square or custom image ratios for consistency
-
center-align the product name and price under the image
this mimics that clean, spacious layout you see on the balenciaga site.
happy to help with a sample snippet if you need! just let me know.
Hello @article
Need to customize the dawn theme if you need a look like the reference.
Can start with something like this. Usually I’d say – add to section “Custom CSS” but this probably would not fit the 500 character limit there…
Theme settings “Custom CSS”, probably…
.facets-container {
border-top: 1px solid;
border-bottom: 1px solid;
}
.product-grid {
margin-top: 0;
position: relative;
--grid-desktop-horizontal-spacing: 0px;
--grid-desktop-vertical-spacing: 0px;
--grid-mobile-horizontal-spacing: 0px;
--grid-mobile-vertical-spacing: 0px;
}
.product-grid:before {
content: "";
display: block;
position: absolute;
right: -1px;
top: 0;
width: 2px;
height: 100%;
background: rgb(var(--color-background));
z-index: 1;
}
.product-grid:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: black;
display: block;
height: 1px;
}
.product-grid > .grid__item {
border-right: 1px solid;
border-bottom: 1px solid;
--gradient-background: transparent !;
}
.product-grid .card__inner {
background: transparent;
}
.card__information {
padding: 1rem !important;
text-align: center;
align-items: center;
--text-alignment: center;
}
.card__content {
align-items: end;
}
1 Like