Newsletter subscription Dawn theme

[Harny]

Hi! I would like to be able to set the background of the "newsletter subscription" banner with an image, and button on the right side with in white and animated (same as the main banner). Thank you very much!

https://isardsports.com/

reference website:

https://agongym.com/

[devmont-digital]

Hello @Harny, 

Go to the Shopify admin dashboard, then navigate to Themes, and click on 'Edit Code.' Search for the 'newsletter' file, open it, and replace the code with my code. After saving it, go to 'Customize,' and in the newsletter section, you will see the option to change the background image.

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

{%- style -%}
.section-{{ section.id }}-padding {
  padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
  padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}
.newsletter__wrapper{
  background-color: transparent;
}
.newsletter{
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.newsletter__wrapper .newsletter-form__field-wrapper,
.newsletter-form{
  max-width:unset !Important;
}
.field__inputs{
  background-color: transparent;
  border: 1px solid #fff;
  width: 304px;
  height: 45px;
  color: #fff;
  padding: 5px 15px;
}
.field__buttons{
  width: 239px !Important;
  height: 45px !important;
  border: 1px solid #fff;
  background-color: #fff !important;
}
.field__inputs::placeholder{
  color: #fff;
}
.newsletter-form__field-wrapper .fields{
  display: flex;
  justify-content: center;
  gap: 16px;
}
@media screen and (min-width: 750px) {
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top }}px;
    padding-bottom: {{ section.settings.padding_bottom }}px;
  }
}
@media (max-width:699px){
  .newsletter-form__field-wrapper .fields {
    flex-direction: column;
    align-items: center;
  }
  .field__inputs,
  .field__buttons{
    width: 353px !important;
  }
}
@media (max-width:370px){
  .field__inputs, .field__buttons {
    width: 100% !important;
  }
}
{%- endstyle -%}

<div class="newsletter center {% if section.settings.full_width == false %}newsletter--narrow page-width{% endif %}" style="background-image:url('{{ section.settings.bg-img | img_url: 'master' }}')">
  <div class="newsletter__wrapper color-{{ section.settings.color_scheme }} gradient content-container isolate{% if section.settings.full_width %} content-container--full-width{% endif %} section-{{ section.id }}-padding">
    {%- for block in section.blocks -%}
      {%- case block.type -%}
        {%- when '@app' -%}
          {% render block %}
        {%- when 'heading' -%}
          <h2
            class="inline-richtext {{ block.settings.heading_size }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
            {{ block.shopify_attributes }}
            {% if settings.animations_reveal_on_scroll %}
              data-cascade
              style="--animation-order: {{ forloop.index }};"
            {% endif %}
          >
            {{ block.settings.heading }}
          </h2>
        {%- when 'paragraph' -%}
          <div
            class="newsletter__subheading rte{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
            {{ block.shopify_attributes }}
            {% if settings.animations_reveal_on_scroll %}
              data-cascade
              style="--animation-order: {{ forloop.index }};"
            {% endif %}
          >
            {{ 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{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
                {% if settings.animations_reveal_on_scroll %}
                  data-cascade
                  style="--animation-order: {{ forloop.index }};"
                {% endif %}
              >
                <div class="fields">
                  <input
                    id="NewsletterForm--{{ section.id }}"
                    type="email"
                    name="contact[email]"
                    class="field__inputs"
                    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
                  >
                  <button
                    type="submit"
                    class="newsletter-form__button field__buttons"
                    name="commit"
                    id="Subscribe"
                    aria-label="{{ 'newsletter.button_label' | t }}"
                  >
                    {{ 'newsletter.button_label' | t }}
                  </button>
                </div>
                {%- if form.errors -%}
                  <small class="newsletter-form__message form__message" id="Newsletter-error--{{ section.id }}">
                    <span class="svg-wrapper">
                      {{- 'icon-error.svg' | inline_asset_content -}}
                    </span>
                    {{- 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
                >
                  <span class="svg-wrapper">
                    {{- 'icon-success.svg' | inline_asset_content -}}
                  </span>
                  {{- 'newsletter.success' | t }}
                </h3>
              {%- endif -%}
            {% endform %}
          </div>
      {%- endcase -%}
    {%- endfor -%}
  </div>
</div>

{% schema %}
{
  "name": "t:sections.newsletter.name",
  "tag": "section",
  "class": "section",
  "disabled_on": {
    "groups": ["header"]
  },
  "settings": [
    {
      "type": "image_picker",
      "id": "bg-img",
      "label": "Background Image"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.colors.label",
      "default": "scheme-1"
    },
    {
      "type": "checkbox",
      "id": "full_width",
      "default": true,
      "label": "t:sections.newsletter.settings.full_width.label"
    },
    {
      "type": "paragraph",
      "content": "t:sections.newsletter.settings.paragraph.content"
    },
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 40
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 52
    }
  ],
  "blocks": [
    {
      "type": "heading",
      "name": "t:sections.newsletter.blocks.heading.name",
      "limit": 1,
      "settings": [
        {
          "type": "inline_richtext",
          "id": "heading",
          "default": "t:sections.newsletter.blocks.heading.settings.heading.default",
          "label": "t:sections.newsletter.blocks.heading.settings.heading.label"
        },
        {
          "type": "select",
          "id": "heading_size",
          "options": [
            {
              "value": "h2",
              "label": "t:sections.all.heading_size.options__1.label"
            },
            {
              "value": "h1",
              "label": "t:sections.all.heading_size.options__2.label"
            },
            {
              "value": "h0",
              "label": "t:sections.all.heading_size.options__3.label"
            },
            {
              "value": "hxl",
              "label": "t:sections.all.heading_size.options__4.label"
            },
            {
              "value": "hxxl",
              "label": "t:sections.all.heading_size.options__5.label"
            }
          ],
          "default": "h1",
          "label": "t:sections.all.heading_size.label"
        }
      ]
    },
    {
      "type": "paragraph",
      "name": "t:sections.newsletter.blocks.paragraph.name",
      "limit": 1,
      "settings": [
        {
          "type": "richtext",
          "id": "text",
          "default": "t:sections.newsletter.blocks.paragraph.settings.paragraph.default",
          "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 %}

Note: This code is valid for the latest version of the Dawn theme.

[Harny]

Amazing! It looks much nicer now and I can also change the image easily. Thank you so much for the work.
Anyway, can I put the text "Subscribe" in capital letters?
Can the button be animated like in the main banner?
Also, if I move the mouse over it, the pointer stays, but the cursor doesn't change with the typical hand with the finger.

[devmont-digital · Accepted solution]

You're welcome! Go to the Shopify admin dashboard, navigate to Themes, and click on Edit Code. Search for the 'newsletter' file and open it. Then, search for {%- style -%} in that file. After finding it, paste the code mentioned above inside that tag. This will enable the hover animation on the button, make the button text uppercase, and change the cursor when hovering over the button.

button#Subscribe {
    background: transparent !important;
    border: solid 1px white !important;
    color: white !important;
    mix-blend-mode: difference;
    position: relative;
    text-transform: uppercase;
    cursor: pointer;
}

button#Subscribe:hover:after {
    width: 100%;
    z-index: -1;
}
button#Subscribe::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    border-radius: var(--buttons-radius-outset);
    box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius) rgba(var(--color-shadow), var(--shadow-opacity));
}

button#Subscribe::after {
    height: 100%;
    background: #fff;
    width: 0%;
    transition: all .35s ease;
    z-index: -1;
    content: '';
    position: absolute;
    top: var(--buttons-border-width);
    right: var(--buttons-border-width);
    bottom: var(--buttons-border-width);
    left: var(--buttons-border-width);
    z-index: 1;
}

button#Subscribe:hover {
    color: #000 !important;
}

[Harny]

Just perfect. Thank you so much for helping me. It looks amazing now.