What's your biggest current challenge? Have your say in Community Polls along the right column.

I want to resize the collection list image distribution. I currently have a 3 column squared ratio.

Solved

I want to resize the collection list image distribution. I currently have a 3 column squared ratio.

Christian_R
Tourist
11 0 1

I currently have a 3 column squared ratio as shown below, but would like to make it a 2 column, 1st picture height (double the size of the other 2 collection pictures) and the other 2 pictures on the second column one above the other, both adding up to the same height of the 1st picture. Captura de pantalla 2024-03-20 104708.pngCaptura de pantalla 2024-03-20 1051122.png

Accepted Solution (1)
ThePrimeWeb
Shopify Partner
2139 616 515

This is an accepted solution.

Replace the code above with this. 

<style>

#Slider-template--17595188936949__collection_list_gDFa8B .card__content {
    position: absolute !important;
    bottom: 20px !important;
    left: 20px !important;
}

#Slider-template--17595188936949__collection_list_gDFa8B .card__content h3 a {
    color: white !important;
}

#Slider-template--17595188936949__collection_list_gDFa8B .card__inner.color-scheme-2.gradient.ratio {
    height: 100% !important;
}

ul#Slider-template--17595188936949__collection_list_gDFa8B li {
    max-height: 35vh !important;
}

#Slider-template--17595188936949__collection_list_gDFa8B .collection-list__item:not(:last-child) {
    margin-bottom: 0 !important;
}

#Slider-template--17595188936949__collection_list_gDFa8B .collection-list__item:first-child {
    max-height: 71vh !important;
}

.collection-list {
    grid-template-columns: 1fr 1fr !important;
}
</style>

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

Replies 12 (12)

ThePrimeWeb
Shopify Partner
2139 616 515

Hey @Christian_R,

 

Can you share the link to your store? Thanks!

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
Christian_R
Tourist
11 0 1

https://066cfc-10.myshopify.com/

 

found a partial solution code, but the width of the second column is not the same as the first

ThePrimeWeb
Shopify Partner
2139 616 515

Hey @Christian_R,

 

The store is password protected, can you share the password or remove it temporarily?

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
Christian_R
Tourist
11 0 1

my bad, removed.

ThePrimeWeb
Shopify Partner
2139 616 515

Hey @Christian_R,

 

Keep the code that you already found, I've just added on top of it.

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
#Slider-template--17595188936949__collection_list_gDFa8B .card__content {
    position: absolute !important;
    bottom: 20px !important;
    left: 20px !important;
}

#Slider-template--17595188936949__collection_list_gDFa8B .card__content h3 a {
    color: white !important;
}

#Slider-template--17595188936949__collection_list_gDFa8B .card__inner.color-scheme-2.gradient.ratio {
    height: 100% !important;
}

#Slider-template--17595188936949__collection_list_gDFa8B .collection-list__item:not(:last-child) {
    margin-bottom: 0 !important;
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1710956191132.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
Christian_R
Tourist
11 0 1

It worked! Thanks a lot! How can I make the width of the columns the same? and Reduce the height of the pictures? That would be really helpfull!

ThePrimeWeb
Shopify Partner
2139 616 515

This is an accepted solution.

Replace the code above with this. 

<style>

#Slider-template--17595188936949__collection_list_gDFa8B .card__content {
    position: absolute !important;
    bottom: 20px !important;
    left: 20px !important;
}

#Slider-template--17595188936949__collection_list_gDFa8B .card__content h3 a {
    color: white !important;
}

#Slider-template--17595188936949__collection_list_gDFa8B .card__inner.color-scheme-2.gradient.ratio {
    height: 100% !important;
}

ul#Slider-template--17595188936949__collection_list_gDFa8B li {
    max-height: 35vh !important;
}

#Slider-template--17595188936949__collection_list_gDFa8B .collection-list__item:not(:last-child) {
    margin-bottom: 0 !important;
}

#Slider-template--17595188936949__collection_list_gDFa8B .collection-list__item:first-child {
    max-height: 71vh !important;
}

.collection-list {
    grid-template-columns: 1fr 1fr !important;
}
</style>

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
LukeMac
Excursionist
26 0 4

Hi, love the look. I would like to do the exact same, but i am struggling. I see that Christian had found code before you added to it. We do not have access to that code. I have added all this available code and it didn't work. Could you please supply me with the code to make this whole process happen? 

 

Thanks. 

ThePrimeWeb
Shopify Partner
2139 616 515

Hey @LukeMac,

 

That code is very specific to their store. Can you share the link to you store and share a screenshot of where you need this layout?

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
LukeMac
Excursionist
26 0 4

Hi PrimeWeb, thanks for getting back to me. Here is my link: https://itscalledfragrances.com/ . The password is: auskao

LukeMac
Excursionist
26 0 4

I need it to be under my banner. You will see the section is titled: "WHAT ARE YOU LOOKING FOR". I would like the same look as Christian's store please, with the "FOR HIM & HER" being the longer/portrait thumbnail in the collection. Thanks. 

LukeMac
Excursionist
26 0 4

Don't stress, I have changed my mind about the layout. Thanks for the help/assistance.