Goal: style collection cards in the Dawn theme to match a reference image—specific size/shape with the collection title positioned at the bottom-right.
Initial solution: add custom CSS in theme.liquid (before ) to position .card__content at the bottom, right-align .card__information, and set white headings. First pass targeted a specific section class, yielding the desired desktop result.
Extension: Applied the same styling to another page by replacing the section-specific CSS with broader rules. For desktop (min-width: 990px), adjusted .grid–2-col-desktop .grid__item widths (calc ~30–33%) and kept the bottom-right text and spacing styles globally.
Clarification: Helper showed exactly which earlier code block to replace with the new CSS.
Issue and resolution: The global CSS unintentionally styled products; the user wanted only collections affected. While no exact corrective snippet was shared, the user later confirmed the issue was solved.
Notes: Screenshots were central to the target layout. Changes were CSS-only; no JavaScript. The thread concluded with the user satisfied and no open questions.
Hello,
I want my collection on my home page to look like this, can you help me? With this shape, size, and the collection text on the right bottom. I send you the picture of the result I want.
I use theme dawn: my website is womber.fr and the password is PROPAGANDAAA
Thanks!
Cordially,
Hi @PAUL8
Check this one.
From your Shopify admin dashboard, click on “Online Store” and then “Themes”
Find the theme that you want to edit and click on “Actions” and then “Edit code”.
In the “theme. Liquid” file. Find the tag and paste the code below before the tag.
And Save.
result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
Thanks! And can you help me to have the collection name on the bottom right on the desktop version?
yeah sure. Add this one.
.section-template--22415287386377__collection_list_KzNFVH-padding .card__content {
position: absolute;
bottom: 0;
}
.section-template--22415287386377__collection_list_KzNFVH-padding .card__information {
text-align: right;
padding-right: 10px;
}
.section-template--22415287386377__collection_list_KzNFVH-padding h3.card__heading {
color: #fff;
}
.section-template--22415287386377__collection_list_KzNFVH-padding a.full-unstyled-link {
padding-right: 10px;
}
And Save.
Result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
Hello,
Your solution was very great, can you help me to do the same on this page of my website?
thanks!
Oh, I only add this one on the homepage collection.
Replace the code above.
With this one.
@media screen and (min-width: 990px) {
.grid--2-col-desktop .grid__item {
width: calc(30% - (var(--grid-desktop-horizontal-spacing) / 3));
max-width: calc(33% - (var(--grid-desktop-horizontal-spacing) / 3));
}
}
.card__content {
position: absolute;
bottom: 0;
}
.card__information {
text-align: right;
padding-right: 10px;
}
h3.card__heading {
color: #fff;
}
a.full-unstyled-link {
padding-right: 10px;
}
And Save.
Result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
What do I have to delete and what do I have to replace?
Replace this code.
To this one.
@media screen and (min-width: 990px) {
.grid--2-col-desktop .grid__item {
width: calc(30% - (var(--grid-desktop-horizontal-spacing) / 3));
max-width: calc(33% - (var(--grid-desktop-horizontal-spacing) / 3));
}
}
.card__content {
position: absolute;
bottom: 0;
}
.card__information {
text-align: right;
padding-right: 10px;
}
h3.card__heading {
color: #fff;
}
a.full-unstyled-link {
padding-right: 10px;
}
And Save.
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
And finally, can you edit the code? Because now I have products like this and I don’t want them… I just wanted the collection like this
Did you already solved this one?
Yes thanks i
