Brooklyn - Issue on collection page swatches and spacing

Store Design
1

Hi,

I am currently using an app for the swatches, i have three things i need to amend for the swatches on the collection page,

  1. The color swatches are not align properly on the center as you can see the black swatch is off to the left a little, i want to make them to be exactly on the center.

  2. I want to reduce the size of the color circle on the collection page only.

  3. I want to add some spacing between the price and the color swatches so that they are not sticky.

Please help me. Thanks.

9.PNG
9.PNG824×537 345 KB

1 Like
2

@vanessaliew

Please add the following code at the bottom of your assets/timber.scss.liquid file.

.template-collection .swatches-globo .swatch--gl li .globo-size-small {
width: 20px !important;
height: 20px !important;
padding: 0;
}

.template-collection .swatches-globo .swatch--gl .ul-swatches-list li:not(ul.ul-globo-dropdown-option li) {
display: block;
float: left;
margin: 8px 0px 10px 0!important;
}

Hope this works.

3

@dmwwebartisan thank you so so much, works like a charm!

1 Like