Happening now | Office Hours: Customizing Your Theme With Moeed | Ask your questions now!

Edit the look of the contact form on envy theme

Solved

Edit the look of the contact form on envy theme

flammagreg
Trailblazer
276 0 39

Hi guys, 

 

I would greatly appreciate any help on this!! I am looking to make my contact form have a rectangle surrounding the whole entry (for every entry) just like the "message" entry. Website: seraneeva.com

 

Screenshot 2024-05-23 at 12.02.02 PM.png

 

 

Accepted Solution (1)

pawankumar
Shopify Partner
754 111 128

This is an accepted solution.

Hi @flammagreg 
Please put this code in theme.liquid before body closing tag </body>

 

 

<style>
#ContactForm input{
    border: 1px solid var(--border-color);
    padding: 10px;
}
</style>

 

 

It will result in like this

pawankumar_0-1716481380961.png

Thanks!

 

- Need a Shopify developer? Chat on WhatsApp +91-9467121281
- Coffee Tip: Buymeacoffee  | Email: thepkpawankumar@gmail.com
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Best regards,
Pawan

View solution in original post

Replies 5 (5)

pawankumar
Shopify Partner
754 111 128

This is an accepted solution.

Hi @flammagreg 
Please put this code in theme.liquid before body closing tag </body>

 

 

<style>
#ContactForm input{
    border: 1px solid var(--border-color);
    padding: 10px;
}
</style>

 

 

It will result in like this

pawankumar_0-1716481380961.png

Thanks!

 

- Need a Shopify developer? Chat on WhatsApp +91-9467121281
- Coffee Tip: Buymeacoffee  | Email: thepkpawankumar@gmail.com
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Best regards,
Pawan
flammagreg
Trailblazer
276 0 39

Thank you!! Any chance do you know how to move the stars on the required sections to be after the text and have a space between the text and star?

pawankumar
Shopify Partner
754 111 128

@flammagreg 
Put this code in theme.liquid before body closing tag

<style>
.reviews-star-rating__stars {
order: 2;
}
</style>

Final result will be like this

pawankumar_0-1716483763262.png

Thanks!

- Need a Shopify developer? Chat on WhatsApp +91-9467121281
- Coffee Tip: Buymeacoffee  | Email: thepkpawankumar@gmail.com
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Best regards,
Pawan
flammagreg
Trailblazer
276 0 39

The stars on the required sections of the contact us page

pawankumar
Shopify Partner
754 111 128

@flammagreg 
You have to do it through liquid code, search for a file like contact.liquid or similar file and edit it from there
Thanks!

- Need a Shopify developer? Chat on WhatsApp +91-9467121281
- Coffee Tip: Buymeacoffee  | Email: thepkpawankumar@gmail.com
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Best regards,
Pawan