How to make variant pickers smaller on collection page - Horizon

Store Design
1

Hello, can you please help me make the variant pickers (sizes) smaller and centered? Thanks. Photo added in comments

2

image
image437Ă—649 84 KB

3

Hey @andreivasu

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>
.variant-option--buttons legend {
    width: 100% !important;
    text-align: -webkit-center !important;
}
.variant-option--buttons {
    display: flex !important;
    justify-content: center !important;
}
.variant-option__button-label {
    font-size: 10px !important;
    padding: 0 !important;
    min-width: 0px !important;
}
</style>

RESULT:

image
image1008Ă—461 76.7 KB

If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

4

I am pretty sure moeed’s solution would work just fine. Just one thing I wanted to add is the red background on them.

When it comes to Readability it doesn’t go pretty well. Very catching on the eye, something a user wouldn’t want to look closely. Just pooped up my mind thouggt i should share.

5

@andreivasu

  1. Go to Online Store → Themes → … → Edit code

  2. Open theme.liquid

  3. Paste the CSS below just before </head> (or at the very bottom before </body>)

<style>
/* Horizon – smaller & centered variant buttons (collection cards) */

/* Center the Size label */
fieldset.variant-option > legend {
  width: 100%;
  text-align: center;
  margin-bottom: 4px;
}

/* Center the variant buttons */
fieldset.variant-option.variant-option--buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
}

/* Shrink the button itself */
.variant-option__button-label {
  padding: 2px 6px;
  min-width: auto;
}

/* Shrink the text */
.variant-option__button-label__text {
  font-size: 10px;
  line-height: 1.4;
}

</style>

Thanks!