How do I change the width of the form? Also, how do I change the color of button text?

Store Design
,
1

Hi, few questions:

  1. how do I change the width of the form so that the text (be the first to know…) is in 2 lines instead of 3 lines?

  2. Or is there is a way to change the size of the text? I just want it in 2 lines.

  3. Also, how do I change the color of the button text where it says “JOIN” to purple?

  4. Finally, is there a way to make the word “Email” in purple?

Untitled.png
Untitled.png1152×648 279 KB

2

Hello @SweatFree

would you like to share your store URL and password if any please.
so i can check and provide you possible solution for your question.

3

Hello @SweatFree
your website is password protected.

4

Hey @SweatFree

Your website is password protected, can you share the password as well?

Best Regards,

Moeed

5

Hi SweatFree,

Here are the solutions for each of your queries:

  1. Changing the width of the form to fit text in 2 lines:

    • To adjust the form width so that the text (“Be the first to know…”) fits into 2 lines instead of 3, we can modify the CSS for the form container. Could you please provide me with the URL of the page or the specific form code snippet you’re referring to? This will help me provide you with more targeted instructions.

  2. Changing the size of the text:

    • Yes, you can change the size of the text to ensure it fits into 2 lines. Depending on how your form is structured (whether it’s embedded, a popup, or part of a specific app), we can adjust the font size using custom CSS. If you can share the form code or where it’s located, I can guide you on the exact CSS adjustments needed.

  3. Changing the color of the button text (“JOIN”) to purple:

    • This can be done using custom CSS. If you provide me with the class or ID of the button element, I can assist you with the CSS code to change the text color to purple.

  4. Making the word “Email” in purple:

    • Similar to changing the button text color, we can target the “Email” label specifically with CSS to change its color to purple. Again, knowing where this label is located (form field, button label, etc.) will help me give you precise instructions.
6

Website is www.sweatfree.co & password is sweatfree123

7

The website is www.sweatfree.co & the password is sweatfree123

8

Website: www.sweatfree.co & password: sweatfree123

9

My website is www.sweatfree.co & my password is sweatfree123

10

Go to online store ---------> themes --------------> actions ------> edit code------->base.css or theme.css
add this code at the bottom of the file.

:not(.isPreview)._floating_1w3ro_52 ._grid_1w3ro_148, ._overlay_1w3ro_100 ._grid_1w3ro_148 {
max-width: 40% !important;
}

label._formInputFieldLabel_1ydxd_37 {
color: #5433eb;
}

button._formSubmitButton_1ll8d_81 {
color: #5433eb;
cursor: pointer;
}

and the result will be

16.png
16.png1235×755 210 KB

If this was helpful, hit the like button and mark the job as completed.
Thanks

11

Sorry it didn’t work. Could you please double check?

12

Hello @SweatFree

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

h2._textHeading_2aowh_35 { font-size: 20px !important; } button._formSubmitButton_1ll8d_81 { color: #5433eb !important; } label._formInputFieldLabel_1ydxd_37 { color: #5433eb !important; } input._formInputField_237zm_7 { color: #5433eb !important; }

techlyser_web_0-1720798789453.png
techlyser_web_0-1720798789453.png514×414 110 KB

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.