Solved

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

Christian_R
Tourist
9 0 0

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
1846 522 401

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 7 (7)

ThePrimeWeb
Shopify Partner
1846 522 401

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
9 0 0

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
1846 522 401

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
9 0 0

my bad, removed.

ThePrimeWeb
Shopify Partner
1846 522 401

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
9 0 0

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
1846 522 401

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!