Customize collection list appearance

[JordiP]

Hello, I want to edit how the images in my collection list appear so there is more white space in-between the images, for both desktop and mobile. There is an example below how I want it to look. Any help is appreciated 🙂

(^ this is how it looks now, cluttered)

 (^ This is the type of white spacing I would like to see)

Store: artisimo.es

pass: pongia

[BSSCommerce-B2B]

@JordiP,

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head>

<style>
.collection-list.contains-card {
    gap: 10px !important;
    padding: 10px !important;
}
.collection-list.contains-card > .collection-list__item {
  width: fit-content!important;
} 
</style>

Result:

If it helps you, please like and mark it as the solution.

Best Regards 😊

[JordiP]

Thank you! It works on the landing page, however there are some issues on my collectios page (collections list), I want there to be 5 columns on desktop view. (Mobile view is perfect).

(^ Here is a screenshot, there are currently 10+ columns, I want the images to be bigger (their original size) and have 5 columns maximum.)

Thank you for your help!

[DaisyVo · Accepted solution]

Hi @JordiP 

You can follow the steps here:

Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/ypQ7nly2wv27
Step 3: Copy the code below and paste it there

Here is the code for step 3:

@media screen and (min-width: 768px){
.collection-list-wrapper > slider-component > ul.collection-list {
    column-gap: 10px !important;
    row-gap: 10px !important;
}
.collection-list-wrapper > slider-component > ul.collection-list > li {
    width: 20% !important;
}
}

To adjust the spacing between cards, modify the values in column-gap and row-gap. Please note that increasing the gap might necessitate decreasing the width to prevent them from wrapping to the next line.

Here is the result: 

Let me know if it helps!

Best,

Daisy

[JordiP]

How could I optimize for mobile view aswell? Thanks!