Center Color Swatches on Vessel Theme

[Tobyraphael]

Am currently having an alignment issue with my theme color swatches, am using VESSEL THEME. The theme has an option to place the swatches in the center, but it’s different from what I have seem in other stores. I just want the center option for the swatches to be able to align it in the pattern shown in the second photo.

How I want it:

Please, any help provided, would be very much appreciated. Thanks in advance

[Denishamakwana]

Hi,

Good morning,

Welcome to the shopify ,

Please share your store URL and if your store is password protected then also provide password too.
Thank you.

[Tobyraphael]

Okay, the store url is (affbuy.com). Thanks

[Denishamakwana]

in end of styles.css file add below code

swatches-variant-picker-component {

justify-content: center;

}

Thank you.

[Mustafa_Ali]

hey @Tobyraphael dear follow these steps
Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->before the ----->
before the body ----->
if this code work please do not forget to like and mark it solution

[TheScriptFlow]

Hey In order to make the color swatches on the collection page and featured collection then you need to place the following code in the end of base.css file.

Here is how you can find the base.css file.

• Go to Shopify Admin.
• Click on Online Store > Themes.
• In the theme click on three dots and then Edit Code.
• In the Edit code search for base.css file.
• Go to the end of this file and paste the following code.

swatches-variant-picker-component {
justify-content: center !important;
}

Results:

[Rahul_dhiman]

Hello @Tobyraphael
Go to online store ----> themes ----> actions ----> edit code ----> base.css
add this code at the end of the file and save.

swatches-variant-picker-component {
width: unset !important;
}

result

If this was helpful, hit the like button and accept the solution.
Thanks

[Bang_T]

in the file styles.css search for “swatches-variant-picker-component” then add

justify-content: center;

Full code:

swatches-variant-picker-component {
display: flex;
width: 100%;
flex-direction: row;
justify-content: center;
}

[topnewyork]

Hello @Tobyraphael ,

Try this code

Navigate to Online Store > Themes > click on Edit code.
Locate and open the theme.css or base.css file. Scroll to the bottom and add the following CSS code:

swatches-variant-picker-component {
  
justify-content: center !important;
}

Result:

[Dan-From-Ryviu]

Please go to store admin > Sales channels > Online Store > Themes > Customize > Theme settings > Custom CSS

swatches-variant-picker-component {
    justify-content: center;
}

[Tobyraphael]

It worked like magic. Thanks a lot

[Mustafa_Ali]

hey @Tobyraphael thank you for your response if you need more help feel free to share it and plz don’t forget to like