Broadcast: Add space between products and collections

[MarianaU]

Hi!

I would like to know how can I add a space in the product grid between the different products and the different collections:

What I have:

What I want:

Same thing with the collections:

What I have:

What I want:

I would really appreciate your help!

Thank you!!

[SagarSukhanandi]

Hi @MarianaU

Please share your store URL and password if any?

[MarianaU]

Hi!
Sure, my url is matiere-studio.com and password is weareg
Thanks!

[SagarSukhanandi]

Hi
Add the below style to the end of your theme.css file

.flickity-slider>.product-item.one-whole {
    margin-left: 10px;
}

.brick__block{
margin: 5px;
padding: 5px;
}

[MarianaU]

Thank you so much! It works for the categories but I would also like to apply this for the product grid:

[cid:image001.png@01D8889C.291271E0]

[SagarSukhanandi]

Hi @MarianaU
Not able to see attached image. Also on the home page “best seller product” list, I can see space.

Do you want space on the dedicated product list page?

[MarianaU]

Hi, yes I would also like to have space in the all products grid. How can I do this?
Also, in the home page in the category part one image doesn’t have the same space with the image below than with the image on the right. Would it be possible to have the same space with the image on the right as with the one below?

Thank you!

[made4Uo]

Hi @MarianaU ,

You can add a divider. It is a section that you can add and remove. I wrote a code in my website and happy to share it here. Remove the color so it is just a padding

1. In your Admin page, go to Online store > Themes
2. Choose the theme you want to edit then click Actions > Edit code.
3. Open Section folder, and click Add a new section. You can name it whatever you want.
4. Open the newly created section and replace the existing code with the code below. Then click SAVE.

 

{% schema %}
{
"name": "Section divider",
"settings": [
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 1,
"unit": "px",
"label": "Padding top",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 1,
"unit": "px",
"label": "Padding bottom",
"default": 36
},
{
"type": "range",
"id": "height",
"min": 0,
"max": 100,
"step": 1,
"unit": "px",
"label": "Height of the divider",
"default": 5
},
{
"type": "color",
"id": "color",
"default": "#000",
"label": "Divider color"
},
{
"type": "checkbox",
"id": "full_width",
"default": false,
"label": "Section full-width"
}
],
"presets": [
{
"name": "Section divider"
}
]
}
{% endschema %}

5. In your theme editor, you can now add this Section divider.

[MarianaU]

Thank you so much this helps to put an horizontal divider! The thing is that I want my products to be separated by space in the product grid like this:

What I have:

What I want:

I don’t know if you can help with this.

Thank you so much!

[MarianaU]

Hi @SagarSukhanandi !

I’m attaching a picture so you can see what I mean, the spaces between the categories are not the same. I would like to have the same space in horizontal than in vertical:

Also I would like to have this same space between products in the category page:

I don’t know if you can help with this.

Thank you so much!

KR,

Mariana

[SagarSukhanandi]

@MarianaU
Add the below style to add space into the product grid

.product-item{
    margin: 5px;
    width: 24.3%;
}

to set same space on categories for home page :

.brick__block {
    margin: 0px !important;
    padding: 5px !important;
}

[MarianaU]

Thank you @SagarSukhanandi it works but now I have a blank space at the right of the screen. How can I solve this??

[made4Uo]

Hi @MarianaU ,

Sorry I misunderstood. Flex CSS uses gap and this can solve without causing other problems.

1. In your Admin store, click Online store > Themes
2. Go to the theme you want to edit, click Actions > Edit code
3. In your Asset folder, open the theme.css and add the code below.

Note: Adjust the 10px on the spacing that you want.

.flickity-viewport .flickity-slider {
gap: 10px
}

[MarianaU]

Thank you @SagarSukhanandi it works but now I have a blank space at the right of the screen. How can I solve this??

[MarianaU]

Not working

[made4Uo]

Hi @MarianaU ,

I don’t actually see the code in my end.