How to make the email box, country selector, and quantity selector also have rounded corners?

Store Design
1

The email, language selector, and quantity selector boxes all have sharp edges and I can’t find where to round them, how do I do this? My website is : https://westaysmiling.com/

2

Hey @westaysmiling

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 tag.

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
3

Hi @westaysmiling

This is Lucas from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

.newsletter-form__field-wrapper .field__input, .field:after, button.disclosure__button.localization-form__select.localization-selector.link.link–text.caption-large {

border-radius: 100px !important;

}

Hope that my solution works for you.

Best regards,

Lucas | PageFly

4

Hello @westaysmiling

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

.field:after, .select:after, .customer .field:after, .customer select:after, .localization-form__select:after {
    border-radius: 33px !important;
}
.localization-form:only-child .button, .localization-form:only-child .localization-form__select {
    border-radius: 33px !important;
}
5

This worked for both the country selector and the email box, but not the quantity selector.

6

Also the quantity selector outline is not wrapped to the new edges.

7

Similarly, this only works for the country selector and email box, not the quantity selector.