How can I align-center my custom color swatches on the drive theme?

Ask & Offer
1

Hello, I created custom color swatches to my drive theme. It works great but the color swatches appear on the bottom left under my product picture. Id like them to show up centered below the picture. I tried everything I can think of but nothing is working. Thanks in advance!

2 Likes
2

Hi @rosemoonjo25 ,
Please share your store url and password if password protected. So I can check and give you exact solution.
Thanks
Manoj

3

Hi @rosemoonjo25,

Please send the website link, I will check it for you

4

Hey @rosemoonjo25

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

5

Hi @rosemoonjo25

Please share the code or a link to your store so we can review it and give you the solution.

Best regards,

Dan from Ryviu: Reviews & QA

6

Hey @rosemoonjo25,

That’s a classic CSS centering challenge. It’s great that you’ve already successfully created the custom swatches and have them working – you’re 90% of the way there.

When elements are stuck to the “bottom left,” it usually means the parent container holding them is a default block-level element and needs to be told how to align its children. The modern and most reliable way to fix this is with CSS Flexbox.

Here’s the general solution that should work for you. You’ll need to add a small CSS snippet to your theme’s stylesheet:

  1. Identify the Parent Container: First, you need to find the unique class or ID of the container that directly wraps all of your color swatches. You can do this by right-clicking on the swatches on your site and choosing “Inspect.”

  2. Apply Flexbox CSS: Once you have the class name (let’s say it’s .swatch-wrapper for this example), you would add the following CSS:

    CSS

    .swatch-wrapper {
  display: flex;
  justify-content: center; /* This handles the horizontal centering */
  align-items: center;    /* This handles the vertical centering */
  gap: 8px;                 /* This adds a nice space between swatches */
}

This CSS tells your container to treat its children as flexible items and to center them perfectly in the available space.

If you’re not comfortable editing the theme’s CSS, or if it doesn’t quite work, feel free to share your store’s URL (no password needed). I can then give you the exact class name you need to target and the precise code to add.

7

Thank you all! The URL is https://rosemoonjo.com/ and the password is effale.

1 Like
8

Hey @rosemoonjo25

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
<style>
.collection-product-card__variants {
    justify-content: center !important;
}
</style>

RESULT:

image
image913Ă—573 78.1 KB

If you require any other help, feel free to reach out to me. If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

1 Like
9

Thank you @Lenox_99 it worked!

1 Like