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

Christian_R · ‎03-20-2024

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.

ThePrimeWeb · ‎03-21-2024

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

ThePrimeWeb · ‎03-20-2024

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 · ‎03-20-2024

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 · ‎03-20-2024

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 · ‎03-20-2024

my bad, removed.

ThePrimeWeb · ‎03-20-2024

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.

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 · ‎03-20-2024

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 · ‎03-21-2024

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 · ‎05-23-2024

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 · ‎05-23-2024

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 · ‎05-27-2024

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

LukeMac · ‎05-27-2024

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 · ‎05-27-2024

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

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