How can I add image as a background on Newsletter.

Solved

How can I add image as a background on Newsletter.

Danielaaa
New Member
4 0 2

I use Dawn Theme, I would like to add an image or a picture as background on Newsletter

1.png

Accepted Solution (1)

KetanKumar
Shopify Partner
37585 3668 12151

This is an accepted solution.

@Danielaaa 

i have updated the code please check

also, someone needs some please use this code 
newsletter.liquid

{{ 'component-newsletter.css' | asset_url | stylesheet_tag }}
{{ 'newsletter-section.css' | asset_url | stylesheet_tag }}

<div class="newsletter center{% if section.settings.full_width == false %} newsletter--narrow page-width{% endif%}">
  <div class="newsletter__wrapper color-{{ section.settings.color_scheme }} gradient">
    {%- for block in section.blocks -%}
      {%- case block.type -%}
        {%- when '@app' -%}
          {% render block %}
        {%- when 'heading' -%}
          <h2 class="h1" {{ block.shopify_attributes }}>{{ block.settings.heading | escape }}</h2>
        {%- when 'paragraph' -%}
          <div class="newsletter__subheading rte" {{ block.shopify_attributes }}>{{ block.settings.text }}</div>
        {%- when 'email_form' -%}
          <div {{ block.shopify_attributes }}>
            {% form 'customer', class: 'newsletter-form' %}
              <input type="hidden" name="contact[tags]" value="newsletter">
              <div class="newsletter-form__field-wrapper">
                <div class="field">
                  <input
                    id="NewsletterForm--{{ section.id }}"
                    type="email"
                    name="contact[email]"
                    class="field__input"
                    value="{{ form.email }}"
                    aria-required="true"
                    autocorrect="off"
                    autocapitalize="off"
                    autocomplete="email"
                    {% if form.errors %}
                      autofocus
                      aria-invalid="true"
                      aria-describedby="Newsletter-error--{{ section.id }}"
                    {% elsif form.posted_successfully? %}
                      aria-describedby="Newsletter-success--{{ section.id }}"
                    {% endif %}
                    placeholder="{{ 'newsletter.label' | t }}"
                    required
                  >
                  <label class="field__label" for="NewsletterForm--{{ section.id }}">
                    {{ 'newsletter.label' | t }}
                  </label>
                  <button type="submit" class="newsletter-form__button field__button" name="commit" id="Subscribe" aria-label="{{ 'newsletter.button_label' | t }}">
                    {% render 'icon-arrow' %}
                  </button>
                </div>
                {%- if form.errors -%}
                  <small class="newsletter-form__message form__message" id="Newsletter-error--{{ section.id }}">{% render 'icon-error' %}{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}</small>
                {%- endif -%}
              </div>
              {%- if form.posted_successfully? -%}
                <h3 class="newsletter-form__message newsletter-form__message--success form__message" id="Newsletter-success--{{ section.id }}" tabindex="-1" autofocus>{% render 'icon-success' %}{{ 'newsletter.success' | t }}</h3>
              {%- endif -%}
            {% endform %}
          </div>
      {%- endcase -%}
    {%- endfor -%}
  </div>
</div>

<style>
  
  .color-background-image {
  {%- if section.settings.image != blank -%}   
  background: url({{section.settings.image | img_url:'master'}});
  {%- endif -%}  
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;  
  }
</style>

{% schema %}
{
  "name": "t:sections.newsletter.name",
  "tag": "section",
  "class": "spaced-section spaced-section--full-width",
  "settings": [
    {
      "type": "select",
      "id": "color_scheme",
      "options": [
        {
          "value": "accent-1",
          "label": "t:sections.newsletter.settings.color_scheme.options__1.label"
        },
        {
          "value": "accent-2",
          "label": "t:sections.newsletter.settings.color_scheme.options__2.label"
        },
        {
          "value": "background-1",
          "label": "t:sections.newsletter.settings.color_scheme.options__3.label"
        },
        {
          "value": "background-2",
          "label": "t:sections.newsletter.settings.color_scheme.options__4.label"
        },
		{
          "value": "background-image",
          "label": "Background Image"
        },
        {
          "value": "inverse",
          "label": "t:sections.newsletter.settings.color_scheme.options__5.label"
        }
      ],
      "default": "background-1",
      "label": "t:sections.newsletter.settings.color_scheme.label"
    },
	{
      "type": "image_picker",
      "id": "image",
      "label": "t:sections.image-banner.settings.image.label"
    },
    {
      "type": "checkbox",
      "id": "full_width",
      "default": true,
      "label": "t:sections.newsletter.settings.full_width.label"
    },
    {
      "type": "paragraph",
      "content": "t:sections.newsletter.settings.paragraph.content"
    }
  ],
  "blocks": [
    {
      "type": "heading",
      "name": "t:sections.newsletter.blocks.heading.name",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "default": "Subscribe to our emails",
          "label": "t:sections.newsletter.blocks.heading.settings.heading.label"
        }
      ]
    },
    {
      "type": "paragraph",
      "name": "t:sections.newsletter.blocks.paragraph.name",
      "limit": 1,
      "settings": [
        {
          "type": "richtext",
          "id": "text",
          "default": "<p>Be the first to know about new collections and exclusive offers.</p>",
          "label": "t:sections.newsletter.blocks.paragraph.settings.paragraph.label"
        }
      ]
    },
    {
      "type": "email_form",
      "name": "t:sections.newsletter.blocks.email_form.name",
      "limit": 1
    },
    {
      "type": "@app"
    }
  ],
  "presets": [
    {
      "name": "t:sections.newsletter.presets.name",
      "blocks": [
        {
          "type": "heading"
        },
        {
          "type": "paragraph"
        },
        {
          "type": "email_form"
        }
      ]
    }
  ]
}
{% endschema %}

Pompons _ Custom.png

 

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 16 (16)

Zworthkey
Shopify Partner
5581 641 1581

@Danielaaa 
Its need custom codding to add. to create background image section.
or simple go to the theme.liquid file and find it's class name and add their image with the anchor tag.
if you are developer then you can fix it. without knowledge you can't add it.
thank you.

KetanKumar
Shopify Partner
37585 3668 12151

@Danielaaa 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

KetanKumar
Shopify Partner
37585 3668 12151

This is an accepted solution.

@Danielaaa 

i have updated the code please check

also, someone needs some please use this code 
newsletter.liquid

{{ 'component-newsletter.css' | asset_url | stylesheet_tag }}
{{ 'newsletter-section.css' | asset_url | stylesheet_tag }}

<div class="newsletter center{% if section.settings.full_width == false %} newsletter--narrow page-width{% endif%}">
  <div class="newsletter__wrapper color-{{ section.settings.color_scheme }} gradient">
    {%- for block in section.blocks -%}
      {%- case block.type -%}
        {%- when '@app' -%}
          {% render block %}
        {%- when 'heading' -%}
          <h2 class="h1" {{ block.shopify_attributes }}>{{ block.settings.heading | escape }}</h2>
        {%- when 'paragraph' -%}
          <div class="newsletter__subheading rte" {{ block.shopify_attributes }}>{{ block.settings.text }}</div>
        {%- when 'email_form' -%}
          <div {{ block.shopify_attributes }}>
            {% form 'customer', class: 'newsletter-form' %}
              <input type="hidden" name="contact[tags]" value="newsletter">
              <div class="newsletter-form__field-wrapper">
                <div class="field">
                  <input
                    id="NewsletterForm--{{ section.id }}"
                    type="email"
                    name="contact[email]"
                    class="field__input"
                    value="{{ form.email }}"
                    aria-required="true"
                    autocorrect="off"
                    autocapitalize="off"
                    autocomplete="email"
                    {% if form.errors %}
                      autofocus
                      aria-invalid="true"
                      aria-describedby="Newsletter-error--{{ section.id }}"
                    {% elsif form.posted_successfully? %}
                      aria-describedby="Newsletter-success--{{ section.id }}"
                    {% endif %}
                    placeholder="{{ 'newsletter.label' | t }}"
                    required
                  >
                  <label class="field__label" for="NewsletterForm--{{ section.id }}">
                    {{ 'newsletter.label' | t }}
                  </label>
                  <button type="submit" class="newsletter-form__button field__button" name="commit" id="Subscribe" aria-label="{{ 'newsletter.button_label' | t }}">
                    {% render 'icon-arrow' %}
                  </button>
                </div>
                {%- if form.errors -%}
                  <small class="newsletter-form__message form__message" id="Newsletter-error--{{ section.id }}">{% render 'icon-error' %}{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}</small>
                {%- endif -%}
              </div>
              {%- if form.posted_successfully? -%}
                <h3 class="newsletter-form__message newsletter-form__message--success form__message" id="Newsletter-success--{{ section.id }}" tabindex="-1" autofocus>{% render 'icon-success' %}{{ 'newsletter.success' | t }}</h3>
              {%- endif -%}
            {% endform %}
          </div>
      {%- endcase -%}
    {%- endfor -%}
  </div>
</div>

<style>
  
  .color-background-image {
  {%- if section.settings.image != blank -%}   
  background: url({{section.settings.image | img_url:'master'}});
  {%- endif -%}  
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;  
  }
</style>

{% schema %}
{
  "name": "t:sections.newsletter.name",
  "tag": "section",
  "class": "spaced-section spaced-section--full-width",
  "settings": [
    {
      "type": "select",
      "id": "color_scheme",
      "options": [
        {
          "value": "accent-1",
          "label": "t:sections.newsletter.settings.color_scheme.options__1.label"
        },
        {
          "value": "accent-2",
          "label": "t:sections.newsletter.settings.color_scheme.options__2.label"
        },
        {
          "value": "background-1",
          "label": "t:sections.newsletter.settings.color_scheme.options__3.label"
        },
        {
          "value": "background-2",
          "label": "t:sections.newsletter.settings.color_scheme.options__4.label"
        },
		{
          "value": "background-image",
          "label": "Background Image"
        },
        {
          "value": "inverse",
          "label": "t:sections.newsletter.settings.color_scheme.options__5.label"
        }
      ],
      "default": "background-1",
      "label": "t:sections.newsletter.settings.color_scheme.label"
    },
	{
      "type": "image_picker",
      "id": "image",
      "label": "t:sections.image-banner.settings.image.label"
    },
    {
      "type": "checkbox",
      "id": "full_width",
      "default": true,
      "label": "t:sections.newsletter.settings.full_width.label"
    },
    {
      "type": "paragraph",
      "content": "t:sections.newsletter.settings.paragraph.content"
    }
  ],
  "blocks": [
    {
      "type": "heading",
      "name": "t:sections.newsletter.blocks.heading.name",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "default": "Subscribe to our emails",
          "label": "t:sections.newsletter.blocks.heading.settings.heading.label"
        }
      ]
    },
    {
      "type": "paragraph",
      "name": "t:sections.newsletter.blocks.paragraph.name",
      "limit": 1,
      "settings": [
        {
          "type": "richtext",
          "id": "text",
          "default": "<p>Be the first to know about new collections and exclusive offers.</p>",
          "label": "t:sections.newsletter.blocks.paragraph.settings.paragraph.label"
        }
      ]
    },
    {
      "type": "email_form",
      "name": "t:sections.newsletter.blocks.email_form.name",
      "limit": 1
    },
    {
      "type": "@app"
    }
  ],
  "presets": [
    {
      "name": "t:sections.newsletter.presets.name",
      "blocks": [
        {
          "type": "heading"
        },
        {
          "type": "paragraph"
        },
        {
          "type": "email_form"
        }
      ]
    }
  ]
}
{% endschema %}

Pompons _ Custom.png

 

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
ardenny
Tourist
4 0 3

Hi I would like to add a background in the back of the newsletter sign-up like the image below I have the broadcast theme, but it only alows me to display an image side-by-side.

 Screen Shot 2022-10-16 at 4.55.52 PM.png

MLG0810
Excursionist
65 1 8

this did not work. there are missing links. also i cannot see the image when i upload. probably code is broken or something. any corrections or assist on this? thanks!

KetanKumar
Shopify Partner
37585 3668 12151

@MLG0810 

can you please send store url

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
MLG0810
Excursionist
65 1 8

LINK HERE

 

i just want to add a background image or an image on top (center) of the newsletter section. thank you!

KetanKumar
Shopify Partner
37585 3668 12151

@MLG0810 

This site can’t be reached

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
MLG0810
Excursionist
65 1 8

LINK HERE

 

please check again thank you!

KetanKumar
Shopify Partner
37585 3668 12151

@MLG0810 

oh sorry for that issue can you please try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/base.css ->paste below code at the bottom of the file.

.newsletter__wrapper {
    background: #545454 !important;
}

 

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
MLG0810
Excursionist
65 1 8

hi. ok that code just changed the background color. i want to be able to put a backgroound image or an actual block inside the newsletter section. any help?

MLG0810
Excursionist
65 1 8

i mean is there a way or is it possible to add an image block in the newsletter section? 

MLG0810
Excursionist
65 1 8

any update on this? to add a background image or an image block (NOT BACKGROUND COLOR). thank you.

MLG0810
Excursionist
65 1 8

waiting for an updte. any help on this? 

KetanKumar
Shopify Partner
37585 3668 12151

@MLG0810 

yes, please share store url and section code

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
delphinesoade
Shopify Partner
1 0 0

Hello there,

Thank you for that. Your solution worked for me.
The only question is: how can I change the color of the text so it appears white instead of black?
And how can I change the opacity of the picture so there is a light black filter on it so it's more visible.

Thanks a lot in advance

Here is a link to my store: https://psychestore.be/

 

Capture d’écran 2023-09-20 à 17.14.26.png