Re: Border around email box

Solved

Border around email box

jeffreym
Pathfinder
98 2 19

What is the code to put a border around the email box on the main page? I have tried what is pasted below but I dont think my coding is yet effective.....

Hygiadental.com

Melek

 

textarea#Emailform-body.text-area.field__input { border: 1px solid #dadada; Screenshot 2024-07-24 at 6.50.34 PM.png

Accepted Solution (1)

Haptech
Shopify Partner
53 4 1

This is an accepted solution.

Hi @jeffreym 

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

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag: 

.newsletter-form__field-wrapper input[name="contact[email]"] {
  border: 1px solid #dadada !important;
}
- If helpful then please Like and Accept Solution.
- Try Haptech: B2B/wholsale Free? Check this app for all Shopify Plans.
- Need help from our expert? Kindly share your request with us via [email protected]

View solution in original post

Replies 3 (3)

Dan-From-Ryviu
Shopify Partner
9534 1917 1952

Hi @jeffreym 

Please use this code. 

.newsletter-form__field-wrapper .field__input { border: 1px solid #dadada; }

Screenshot 2024-07-24 at 15.56.54.png

 

- Helpful? Like and Accept solution! or Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

ZestardTech
Shopify Partner
5751 1051 1390

Hi @jeffreym 

 

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:

 

.newsletter-form__field-wrapper input[type="email"].field__input {
border: 1px solid #dadada;
}

 

ZestardTech_0-1721811637938.png

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: [email protected]
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

Haptech
Shopify Partner
53 4 1

This is an accepted solution.

Hi @jeffreym 

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

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag: 

.newsletter-form__field-wrapper input[name="contact[email]"] {
  border: 1px solid #dadada !important;
}
- If helpful then please Like and Accept Solution.
- Try Haptech: B2B/wholsale Free? Check this app for all Shopify Plans.
- Need help from our expert? Kindly share your request with us via [email protected]