Narrative Theme - Footer Newsletter

Highlighted
New Member
1 0 0

I'm having an issue where my footers background color is black and the input text color for the newsletter is also black. I would either like this text or the input box itself to be white. I looked for the specific parameters to change it in the theme.scss.liquid file but was unable to isolate either of them. Any help would be greatly appreciated.

Note: This is not an issue with the newsletters placeholder text color.

0 Likes
Highlighted
Shopify Staff
Shopify Staff
335 32 116

Hi, Anok!

This is May from Shopify.

Thank you for posting your question here. I did some testings on my test store, and found that there are two ways to fix this. First is to edit your theme settings, and second is to edit your theme code. Feel free to follow the steps below to achieve this!

  1. Editing your theme setting

    1. From your admin, click on ‘Online Store > Customize’.

    2. On the left hand side, click on ‘Theme Settings > Colors > Primary body text’. Changing the primary body text will change the newsletter input value text, however, it will also change the font color of your body content.

    3. Click ‘Save’.

  2. Editing your theme code - If you only want to change the color of the text input, you can follow the steps below:

    1. From your admin, click on ‘Online Store > Actions > Edit code’.

    2. On the left hand side, look for a folder called ‘Sections’ and click on ‘footer.liquid’.

    3. Search for ‘input type=”email”’ by pressing Command + F if you are on a Mac or Control + F if you are using Windows.

    4. Inside the bracket, add this code:

style=”color: #FFFFFF;”

Your final code should look like:

<input type="email" style="color: #FFFFFF;" value="{% if customer %}{{ customer.email }}{% endif %}" placeholder="{{ 'general.newsletter_form.newsletter_placeholder' | t }}" name="contact[email]" id="NewsletterEmail" class="input-group__field site-footer__newsletter-input" aria-label="{{ 'general.newsletter_form.newsletter_placeholder' | t }}" autocorrect="off" autocapitalize="off">

 

 

You can adjust the color by replacing ‘#FFFFFF’ with any hex colours you wish to display.

                   5. Click ‘Save’.

Before making any changes to your code, I highly recommend making a duplicate of your theme, in case of any unintended results. For future reference, if you would like to change the font color back to what you had before, you can always roll back to an older version of your theme. If you are not comfortable with making this change, I highly suggest reaching out to our Shopify Experts. Alternatively, since you are using a theme made by Shopify, our theme support may be able to look into making the change as well if your account is eligible!

If this isn't quite what you were after, let me know and we can continue with our support.

Kind Regards,

May

Shopify Support

 

May | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
New Member
8 0 0

hi,

 

I want to change the text of my placeholder and the color of it, how can I do it?

0 Likes
Highlighted

Hello @Anok 

Please share your store URL and reference site URL.

So that I can check and let you know the exact solution for this.

Thanks...

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted

Hello @hardikjain 

Please share your store URL and reference site URL.

So that I can check and let you know the exact solution for this.

Thanks...

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes