How to make varient picker rounded and align it to left on mobile

Technical Q&A
,
1

Hello,

This is my store link

https://mohidtaha.com/

Can any one guide me how to make varient picker rounded and align it to left on mobile screen

1 Like
2

Hi there, you will need to edit your theme .css or .scss files.
Take a look after these classes and add border radius property:

.variant-input-wrap input[type=radio]:checked+label {
    box-shadow: 0 0 0 2px var(--colorTextBody);
    border-radius: 15px;
}

.variant-input-wrap label {
    background-color: var(--colorBody);
    box-shadow: 0 0 0 1px var(--colorBorder);
    display: inline-block;
    font-family: var(--typeBasePrimary), var(--typeBaseFallback);
    font-size: calc(var(--typeBaseSize)* 0.92);
    font-weight: 400;
    letter-spacing: var(--typeBaseSpacing);
    line-height: var(--typeBaseLineHeight);
    margin: 0 8px 12px 0;
    overflow: hidden;
    padding: 7px 15px 7px;
    position: relative;
    border-radius: 15px;
}

FortesIT_0-1731532156539.png
FortesIT_0-1731532156539.png587Ă—388 16.9 KB

In order to align them on the left side on mobile please you can find these classes and add corresponding css classes. (for this to be applied only on mobyle you will need to use css media query).

.variant-input-wrap {
    border: 0;
    margin: 0 0 -12px;
    padding: 0;
    position: relative;
    text-align: left;
}
.label, label:not(.variant__button-label):not(.text-label) {
    font-size: 0.8em;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    text-align: left;
}

If you have any questions do not hesitate to contact me!

3

Hi @Mohidtaha

Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.variant-input-wrap label {
    border-radius: 20px;
}

.product-single__meta .product-block:has(.variant-wrapper.js) {
    text-align: left !important;
}

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

1 Like