How can I center and resize the variant option in my online store?

Store Design
1

Hi there!

I’d like to know the following:

  1. How do I put the Variant section in the CENTER?

  2. How do I change the Variant option name’s SIZE?

  3. How do I manipulate the unchecked variant label

Currently using the following for the checked label:

.variant-input-wrap input[type=radio]:checked+label
{
position: center;
padding-bottom: 10px;
padding-top: 10px;
padding-left: 20px;
padding-right: 20px;
font-weight: 525;
box-shadow: 0 0 0 2px #fff;
background: #000;
color: #fff;
border-radius: 30px;
}

Store: pinsowl.com

1 Like
2

Hi @blcksjfds

For request #1 and #3, please follow the instructions below.

  1. From your Admin Page, click Online Store > Themes >Actions > Edit code
  2. In the Asset folder, open the base.css
  3. Paste the code below at the very bottom of the file.
fieldset.variant-input-wrap {
    display: flex;
    justify-content: center;
}

.variant-input label {
    border-radius: 10px;
    background: red;
}

For request #2, you have to change it in your product Admin.

  1. From your Admin Page, click Product
  2. Select the product, go to Options
  3. Change the Size
1 Like
3

Hi there!

It almost worked! However ‘‘color’’ didn’t move to the center. And I’d wish to know how I could make this bigger. Also, do you know how I can change the thickness of seperator above color?

fem2.jpeg
fem2.jpeg1170×2532 183 KB