Allign variant swatches - Horizon theem

Store Design
1

Hello! Can you please help me allign the variant swatches? Thanks in advance

2

Hey @andreivasu ,

Go to your Shopify Admin Panel.

Navigate to Online Store → Themes.

Click on Edit Code (not Customize).

Open the theme.liquid file (found inside the Layout folder).

Scroll down and paste the code just before the tag:
3

I love you thanks. solved :heart:

4

Thank you so much, I appreciate it! :heart:
If you ever need assistance, please contact me at your convenience.

5

Hey there!

Here’s how to align your variant swatches in Horizon theme:

Quick fix:

  1. Go to Shopify Admin → Online Store → Themes → Actions → Edit Code
  2. Open assets/base.css
  3. Add this CSS:

css

/* Center variant swatches */
.variant-picker__list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

 

For left-align instead, use:

css

.variant-picker__list {
  justify-content: flex-start;
}

 

Alternative: I built Easy Edits that lets you click and drag those swatches into perfect alignment without any code!

Let me know if you need them aligned differently!