Add padding above colour variant circles

[peterotoole]

Hi there,

How can I add a bit of padding right above the colour variant circles on collection pages?

Kids' T-Shirts

Thanks!

[AnneLuo]

Hi @peterotoole
You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code before the </head> tag

<style>
.swatches-globo .swatch--gl .ul-swatches-list.g-variant-color {
    padding-top: 20px;
}
</style>

Results:

Hope this helps! If yes then Please don’t forget hit Like and Mark it as solution!

[devcoders]

Hi @peterotoole

In your Shopify Admin go to online store > themes > actions > edit code
Find Asset > base.css and paste this at the bottom of the file:

.swatches-globo .swatch--gl .ul-swatches-list.g-variant-color {
    padding-top: 20px;
}

Best regards,
Devcoder

[Dan-From-Ryviu]

Please add this code to Custom CSS in Theme settings

.swatches-globo--list { margin-top: 8px; }

[Steve_TopNewYork]

Hi @peterotoole,

1. Go to Online Store → Theme → Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

ul.ul-swatches-list.value.g-variant-color {
    margin-top: 20px;
}