Help for collections style

[PAUL8]

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,

[Made4uo-Ribe · Accepted solution]

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 </body> tag and paste the code below before the tag. 

<style>
@media screen and (max-width: 749px) {
.section-collection-list .collection-list:not(.slider) {
        padding-left: 0;
        padding-right: 0;
}
.collection-list-wrapper.page-width.isolate.no-heading.no-mobile-link.section-template--22415287386377__collection_list_KzNFVH-padding {
    padding: 0 !important;
}
.section-template--22415287386377__collection_list_KzNFVH-padding .card--standard .card__inner, 
.section-template--22415287386377__collection_list_KzNFVH-padding .card .card__inner .card__media {
    border-radius: 0 !important;
    background: transparent;
}


.section-template--22415287386377__collection_list_KzNFVH-padding .card__content {
    position: absolute;
    bottom: 10px;
    right: 0%;
}

.section-template--22415287386377__collection_list_KzNFVH-padding h3.card__heading {
    color: #fff;
}
.section-collection-list .collection-list:not(.slider) {
    gap: 0;
}

.section-template--22415287386377__collection_list_KzNFVH-padding .card__information {
    text-align: right;
}
}


</style>

And Save. 

result:

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[Made4uo-Ribe · Accepted solution]

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!

[Made4uo-Ribe · Accepted solution]

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 </body> tag and paste the code below before the tag. 

<style>
@media screen and (max-width: 749px) {
.section-collection-list .collection-list:not(.slider) {
        padding-left: 0;
        padding-right: 0;
}
.collection-list-wrapper.page-width.isolate.no-heading.no-mobile-link.section-template--22415287386377__collection_list_KzNFVH-padding {
    padding: 0 !important;
}
.section-template--22415287386377__collection_list_KzNFVH-padding .card--standard .card__inner, 
.section-template--22415287386377__collection_list_KzNFVH-padding .card .card__inner .card__media {
    border-radius: 0 !important;
    background: transparent;
}


.section-template--22415287386377__collection_list_KzNFVH-padding .card__content {
    position: absolute;
    bottom: 10px;
    right: 0%;
}

.section-template--22415287386377__collection_list_KzNFVH-padding h3.card__heading {
    color: #fff;
}
.section-collection-list .collection-list:not(.slider) {
    gap: 0;
}

.section-template--22415287386377__collection_list_KzNFVH-padding .card__information {
    text-align: right;
}
}


</style>

And Save. 

result:

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[PAUL8]

Thanks! And can you help me to have the collection name on the bottom right on the desktop version? 

[Made4uo-Ribe · Accepted solution]

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!

[PAUL8]

Hello, 

Your solution was very great, can you help me to do the same on this page of my website? 
thanks!

[Made4uo-Ribe]

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!

[PAUL8]

What do I have to delete and what do I have to replace? 

[Made4uo-Ribe · Accepted solution]

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!

[PAUL8]

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

[Made4uo-Ribe]

Did you already solved this one? 

[PAUL8]

Yes thanks i