When I add a background image to the Newsletter the email box stops working

Solved
Excursionist
16 1 1

Basically when I put a background image to my Newsletter, it turns a little darker, like grey, and I can't select the email box to type anymore.

 

Any help?

0 Likes
Shopify Staff
Shopify Staff
371 44 80

Hey, iago!

 

I'm Lizzy, from the support team at Shopify.

 

I had a few questions for you to help the community offer suggestions on the trouble you've been having with your newsletter box.

 

1) Which theme are you currently using in your store?

 

2) How are you adding the background image? Is it an option within your theme or are you making an adjustment to the theme code?

 

It sounds like there may be some sort of overlay on the image. There could also be something going on with the z-index of the input field and the image that is stopping you from being able to type.

 

Let us know!

 

Thank you,
Lizzy

Lizzy | 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
Excursionist
16 1 1

Hello Lizzy! 

 

I'm adding the image through the Newsletter section when I'm editing the theme, there is a "add image" buttom.

 

I don't remember the theme quite well because I always rename them... I think it's Booster theme.

 

I also have another question if you could help me as well, I will use this opportunity if you don't mind. I was trying to implement the Mouse-Over effect on product image. I could make it the effect, but now it appears a white space above the image. I'll show you the code and a photo.

helpme.png

 

 

  <a class="grid-view-item__link grid-view-item__image-container" href="{{ product.url }}">
    {% capture img_id %}ProductCardImage-{{ section.id }}-{{ product.id }}{% endcapture %}
    {% capture wrapper_id %}ProductCardImageWrapper-{{ section.id }}-{{ product.id }}{% endcapture %}
    {%- assign img_url = product.featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

       {% if product.featured_image.src== blank %}	  
      <img class="grid-product__image" src="{{ product.featured_image.src | img_url: 'grande' }}" alt="{{ product.featured_image.alt | escape }}">
        {% else %}

          {% include 'image-style' with image: product.featured_image, small_style: true, width: width, height: height, wrapper_id: img_wrapper_id, img_id_class: img_id_class %}
          <div id="{{ img_wrapper_id }}" class="product--wrapper">
            <div style="padding-top:{{ 1 | divided_by: product.featured_image.aspect_ratio | times: 100 }}%;">      
               <div class="reveal">
              <img class="product--image lazyload {{ img_id_class }}"
                   src="{{ product.featured_image | img_url: 'grande' }}"
                   data-src="{{ img_url }}"
                   data-widths="[180, 370, 590, 740, 900, 1080, 1296, 1512, 1728, 2048]"
                   data-aspectratio="{{ product.featured_image.aspect_ratio }}"
                   data-sizes="auto"
                   alt="{{ product.featured_image.alt | escape }}">

        
       <img class="hidden" src="{{ product.images.last | img_url: 'grande' }}" alt="{{ product.images.last.alt | escape }}" />


              </div>
            </div>           
          </div>
 
          <noscript>
 <img class="grid-product__image" src="{{ product.featured_image.src | img_url: 'grande' }}" alt="{{ product.featured_image.alt | escape }}">
 </noscript>
              {% endif %}
0 Likes

Success.

Shopify Staff
Shopify Staff
371 44 80

Hey iaog.

 

Thank you for letting me know! In that case it sounds like there is something going on within the theme's code which is causing the background image to interact strangely with your sign up box.

 

You can check the name of your theme by going into the theme customizer and clicking on "Theme Settings." On this page you will see the theme title.

 

28-31-yecz9-hzyef

 

I looked up Booster Themes and was able to find this contact information for them. They will be the best people to take a look into what is going on, as they developed the theme code.

 

I would also recommend reaching out to them about the code you've pasted here, as it is possible it is interacting with something already set up within the theme files in a way that is causing the white space to appear.

 

There may be a member in the forums community as well that has experience with your theme and would be able to help troubleshoot the hover effect with you!

 

Thank you,
Lizzy

Lizzy | 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
New Member
4 0 0

Hey iago, I have the exact same problem. Where you able to fix it?

0 Likes
New Member
4 0 0

I just replied to this topic and 2 minutes later solved the problem. Turns out if you add an image, for some reason, you need to turn on both "display last name" and " display first name" and it turns white again. That way you can keep the image and the cool newsletter. Dont know why, bet its not supposed to work like that...

0 Likes
New Member
1 0 0

Hi BadHabit.

All right?

 

While reading this topic looking for a solution to the same problem, I was able to find the right solution.

I am using the Booster theme.

Go to the theme editing area and look for the "newsletter.liquid" file.

Inside it, look for the line below:

 

"{% if section.settings.display_first_name and section.settings.display_last_name%} newsletter-both-names - true {% else%} newsletter-both-names - false {% endif%}"

 

Change the first "both-names" to "false" and the second to "true" as follows:

 

"{% if section.settings.display_first_name and section.settings.display_last_name%} newsletter-both-names - false {% else%} newsletter-both-names - true {% endif%}"

 

Save and take the test.

Hugs.

0 Likes