Change Newsletter Form position in Footer Menu in Dawn Theme

Change Newsletter Form position in Footer Menu in Dawn Theme

DINOGYM
Visitor
2 0 0

Hello everyone,

 

I want to change the position of my Newsletter form in the footer menu of the Dawn Theme 2.0.

 

I already checked the post here: https://community.shopify.com/c/shopify-design/dawn-theme-adjust-footer-menu-quick-links-and-newslet... 

 

And here: https://community.shopify.com/c/technical-q-a/dawn-theme-change-newsletter-form-position-in-footer-m...

 

Both did not work for me. Attached you can see where the position of my newsletter should be.

 

Screenshot 2024-07-09 at 10.30.56.png

 

Thank you in advance for your help!

 

My website is https://www.dinogymwear.com/

 

Footer.liquid code is;

 

{% comment %}theme-check-disable UndefinedObject{% endcomment %}
{{ 'section-footer.css' | asset_url | stylesheet_tag }}
{{ 'component-newsletter.css' | asset_url | stylesheet_tag }}
{{ 'component-list-menu.css' | asset_url | stylesheet_tag }}
{{ 'component-list-payment.css' | asset_url | stylesheet_tag }}
{{ 'component-list-social.css' | asset_url | stylesheet_tag }}

{%- style -%}
  .footer {
    margin-top: {{ section.settings.margin_top | times: 0.75 | round: 0 }}px;
  }

  .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;
  }

  @media screen and (min-width: 750px) {
    .footer {
      margin-top: {{ section.settings.margin_top }}px;
    }

    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}

<footer class="footer color-{{ section.settings.color_scheme }} gradient section-{{ section.id }}-padding">
  {%- liquid
    assign has_social_icons = true
    if settings.social_facebook_link == blank and settings.social_instagram_link == blank and settings.social_youtube_link == blank and settings.social_tiktok_link == blank and settings.social_twitter_link == blank and settings.social_pinterest_link == blank and settings.social_snapchat_link == blank and settings.social_tumblr_link == blank and settings.social_vimeo_link == blank
      assign has_social_icons = false
    endif

    if settings.brand_image == blank and settings.brand_headline == blank and settings.brand_description == blank
      assign brand_empty = true
    endif

    if section.blocks.size == 1 and section.blocks[0].type == 'brand_information' and brand_empty and has_social_icons == false and section.settings.newsletter_enable == false and section.settings.enable_follow_on_shop == false
      assign only_empty_brand = true
    endif
  -%}
  {%- if section.blocks.size > 0
    or section.settings.newsletter_enable
    or section.settings.show_social and has_social_icons == true
    or section.settings.enable_follow_on_shop
  -%}
    {%- unless only_empty_brand -%}
      <div class="footer__content-top page-width">
        {%- if section.blocks.size > 0 -%}
          {%- liquid
            if section.blocks.size == 9
              assign footer_grid_class = 'grid--3-col-tablet'
            elsif section.blocks.size > 6
              assign footer_grid_class = 'grid--4-col-desktop'
            elsif section.blocks.size > 4
              assign footer_grid_class = 'grid--3-col-tablet'
            endif
          -%}
          <div
            class="footer__blocks-wrapper grid grid--1-col grid--2-col grid--4-col-tablet {{ footer_grid_class }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
            {% if settings.animations_reveal_on_scroll %}
              data-cascade
            {% endif %}
          >
            {%- for block in section.blocks -%}
              <div
                class="footer-block grid__item{% if block.type == 'link_list' %} footer-block--menu{% endif %}{% 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 %}
              >
                {%- if block.settings.heading != blank -%}
                  <h2 class="footer-block__heading inline-richtext">{{- block.settings.heading -}}</h2>
                {%- endif -%}

                {%- case block.type -%}
                  {%- when '@app' -%}
                    {% render block %}
                  {%- when 'text' -%}
                    <div class="footer-block__details-content rte">
                      {{ block.settings.subtext }}
                    </div>
                  {%- when 'link_list' -%}
                    {%- if block.settings.menu != blank -%}
                      <ul class="footer-block__details-content list-unstyled">
                        {%- for link in block.settings.menu.links -%}
                          <li>
                            <a
                              href="{{ link.url }}"
                              class="link link--text list-menu__item list-menu__item--link{% if link.active %} list-menu__item--active{% endif %}"
                            >
                              {{ link.title }}
                            </a>
                          </li>
                        {%- endfor -%}
                      </ul>
                    {%- endif -%}
                  {%- when 'brand_information' -%}
                    <div class="footer-block__brand-info">
                      {%- if settings.brand_image != blank -%}
                        {%- assign brand_image_height = settings.brand_image_width
                          | divided_by: settings.brand_image.aspect_ratio
                        -%}
                        <div
                          class="footer-block__image-wrapper"
                          style="max-width: min(100%, {{ settings.brand_image_width }}px);"
                        >
                          {{
                            settings.brand_image
                            | image_url: width: 1100
                            | image_tag:
                              loading: 'lazy',
                              widths: '50, 100, 150, 200, 300, 400, 550, 800, 1100',
                              height: brand_image_height,
                              width: settings.brand_image_width
                          }}
                        </div>
                      {%- endif -%}
                      {%- if settings.brand_headline != blank -%}
                        <h2 class="footer-block__heading rte">{{ settings.brand_headline }}</h2>
                      {%- endif -%}
                      {%- if settings.brand_description != blank -%}
                        <div class="rte">{{ settings.brand_description }}</div>
                      {%- endif -%}
                      {%- if block.settings.show_social and has_social_icons -%}
                        {%- render 'social-icons', class: 'footer__list-social' -%}
                      {%- endif -%}
                    </div>
                  {%- when 'image' -%}
                    <div class="footer-block__details-content footer-block-image {{ block.settings.alignment }}">
                      {%- if block.settings.image != blank -%}
                        {%- assign image_size_2x = block.settings.image_width | times: 2 | at_most: 5760 -%}
                        <div
                          class="footer-block__image-wrapper"
                          style="max-width: min(100%, {{ block.settings.image_width }}px);"
                        >
                          <img
                            srcset="{{ block.settings.image | image_url: width: block.settings.image_width }}, {{ block.settings.image | image_url: width: image_size_2x }} 2x"
                            src="{{ block.settings.image | image_url: width: 760 }}"
                            alt="{{ block.settings.image.alt | escape }}"
                            loading="lazy"
                            width="{{ block.settings.image.width }}"
                            height="{{ block.settings.image.height }}"
                          >
                        </div>
                      {%- else -%}
                        {{ 'image' | placeholder_svg_tag: 'placeholder-svg placeholder' }}
                      {%- endif -%}
                    </div>
                {%- endcase -%}
              </div>
            {%- endfor -%}
          </div>
        {%- endif -%}

        <div
          class="footer-block--newsletter{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
          {% if settings.animations_reveal_on_scroll %}
            data-cascade
          {% endif %}
        >
          {%- if section.settings.newsletter_enable -%}
            <div class="footer-block__newsletter">
              {%- if section.settings.newsletter_heading != blank -%}
                <h2 class="footer-block__heading inline-richtext">{{ section.settings.newsletter_heading }}</h2>
              {%- endif -%}
              {%- form 'customer', id: 'ContactFooter', class: 'footer__newsletter 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="ContactFooter-error"
                      {% elsif form.posted_successfully? %}
                        aria-describedby="ContactFooter-success"
                      {% 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="ContactFooter-error">
                      {%- 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="ContactFooter-success"
                    tabindex="-1"
                    autofocus
                  >
                    {% render 'icon-success' -%}
                    {{- 'newsletter.success' | t }}
                  </h3>
                {%- endif -%}
              {%- endform -%}
            </div>
          {%- endif -%}

          {%- if shop.features.follow_on_shop? and section.settings.enable_follow_on_shop -%}
            <div class="footer__follow-on-shop">
              {% comment %} TODO: enable theme-check once `login_button` is accepted as valid filter {% endcomment %}
              {% # theme-check-disable %}
              {{ shop | login_button: action: 'follow' }}
              {% # theme-check-enable %}
            </div>
          {%- endif -%}

          {%- if section.settings.show_social and has_social_icons -%}
            {%- render 'social-icons', class: 'footer__list-social' -%}
          {%- endif -%}
        </div>
      </div>
    {%- endunless -%}
  {%- endif -%}

  <div
    class="footer__content-bottom{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
    {% if settings.animations_reveal_on_scroll %}
      data-cascade
    {% endif %}
  >
    <div class="footer__content-bottom-wrapper page-width">
      <div class="footer__column footer__localization isolate">
        {%- if section.settings.enable_country_selector and localization.available_countries.size > 1 -%}
          <noscript>
            {%- form 'localization', id: 'FooterCountryFormNoScript', class: 'localization-form' -%}
              <div class="localization-form__select">
                <h2 class="visually-hidden" id="FooterCountryLabelNoScript">{{ 'localization.country_label' | t }}</h2>
                <select
                  class="localization-selector link"
                  name="country_code"
                  aria-labelledby="FooterCountryLabelNoScript"
                >
                  {%- for country in localization.available_countries -%}
                    <option
                      value="{{ country.iso_code }}"
                      {%- if country.iso_code == localization.country.iso_code %}
                        selected
                      {% endif %}
                    >
                      {{ country.name }} ({{ country.currency.iso_code }}
                      {{ country.currency.symbol }})
                    </option>
                  {%- endfor -%}
                </select>
                {% render 'icon-caret' %}
              </div>
              <button class="button button--tertiary">{{ 'localization.update_country' | t }}</button>
            {%- endform -%}
          </noscript>
          <localization-form>
            {%- form 'localization', id: 'FooterCountryForm', class: 'localization-form' -%}
              <div class="no-js-hidden">
                <h2 class="caption-large text-body" id="FooterCountryLabel">{{ 'localization.country_label' | t }}</h2>
                {%- render 'country-localization', localPosition: 'FooterCountry' -%}
              </div>
            {%- endform -%}
          </localization-form>
        {%- endif -%}

        {%- if section.settings.enable_language_selector and localization.available_languages.size > 1 -%}
          <noscript>
            {%- form 'localization', id: 'FooterLanguageFormNoScript', class: 'localization-form' -%}
              <div class="localization-form__select">
                <h2 class="visually-hidden" id="FooterLanguageLabelNoScript">
                  {{ 'localization.language_label' | t }}
                </h2>
                <select
                  class="localization-selector link"
                  name="locale_code"
                  aria-labelledby="FooterLanguageLabelNoScript"
                >
                  {%- for language in localization.available_languages -%}
                    <option
                      value="{{ language.iso_code }}"
                      lang="{{ language.iso_code }}"
                      {%- if language.iso_code == localization.language.iso_code %}
                        selected
                      {% endif %}
                    >
                      {{ language.endonym_name | capitalize }}
                    </option>
                  {%- endfor -%}
                </select>
                {% render 'icon-caret' %}
              </div>
              <button class="button button--tertiary">{{ 'localization.update_language' | t }}</button>
            {%- endform -%}
          </noscript>

          <localization-form>
            {%- form 'localization', id: 'FooterLanguageForm', class: 'localization-form' -%}
              <div class="no-js-hidden">
                <h2 class="caption-large text-body" id="FooterLanguageLabel">
                  {{ 'localization.language_label' | t }}
                </h2>
                {%- render 'language-localization', localPosition: 'FooterLanguage' -%}
              </div>
            {%- endform -%}
          </localization-form>
        {%- endif -%}
      </div>
      <div class="footer__column footer__column--info">
        {%- if section.settings.payment_enable -%}
          <div class="footer__payment">
            <span class="visually-hidden">{{ 'sections.footer.payment' | t }}</span>
            <ul class="list list-payment" role="list">
              {%- for type in shop.enabled_payment_types -%}
                <li class="list-payment__item">
                  {{ type | payment_type_svg_tag: class: 'icon icon--full-color' }}
                </li>
              {%- endfor -%}
            </ul>
          </div>
        {%- endif -%}
      </div>
    </div>
    <div class="footer__content-bottom-wrapper page-width{% if section.settings.enable_country_selector == false and section.settings.enable_language_selector == false %} footer__content-bottom-wrapper--center{% endif %}">
      <div class="footer__copyright caption">
        <small class="copyright__content"
          >&copy; {{ 'now' | date: '%Y' }}, {{ shop.name | link_to: routes.root_url -}}
        </small>
        <small class="copyright__content">{{ powered_by_link }}</small>
        {%- if section.settings.show_policy -%}
          <ul class="policies list-unstyled">
            {%- for policy in shop.policies -%}
              {%- if policy != blank -%}
                <li>
                  <small class="copyright__content"
                    ><a href="{{ policy.url }}">{{ policy.title }}</a></small
                  >
                </li>
              {%- endif -%}
            {%- endfor -%}
          </ul>
        {%- endif -%}
      </div>
    </div>
  </div>
</footer>

{% schema %}
{
  "name": "t:sections.footer.name",
  "blocks": [
    {
      "type": "@app"
    },
    {
      "type": "link_list",
      "name": "t:sections.footer.blocks.link_list.name",
      "settings": [
        {
          "type": "inline_richtext",
          "id": "heading",
          "default": "Quick links",
          "label": "t:sections.footer.blocks.link_list.settings.heading.label"
        },
        {
          "type": "link_list",
          "id": "menu",
          "default": "footer",
          "label": "t:sections.footer.blocks.link_list.settings.menu.label",
          "info": "t:sections.footer.blocks.link_list.settings.menu.info"
        }
      ]
    },
    {
      "type": "brand_information",
      "name": "t:sections.footer.blocks.brand_information.name",
      "settings": [
        {
          "type": "paragraph",
          "content": "t:sections.footer.blocks.brand_information.settings.paragraph.content"
        },
        {
          "type": "header",
          "content": "t:sections.footer.blocks.brand_information.settings.header__1.content"
        },
        {
          "type": "checkbox",
          "id": "show_social",
          "default": true,
          "label": "t:sections.footer.blocks.brand_information.settings.show_social.label",
          "info": "t:sections.footer.blocks.brand_information.settings.show_social.info"
        }
      ]
    },
    {
      "type": "text",
      "name": "t:sections.footer.blocks.text.name",
      "settings": [
        {
          "type": "inline_richtext",
          "id": "heading",
          "default": "Heading",
          "label": "t:sections.footer.blocks.text.settings.heading.label"
        },
        {
          "type": "richtext",
          "id": "subtext",
          "default": "<p>Share contact information, store details, and brand content with your customers.</p>",
          "label": "t:sections.footer.blocks.text.settings.subtext.label"
        }
      ]
    },
    {
      "type": "image",
      "name": "Image",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        },
        {
          "type": "range",
          "id": "image_width",
          "min": 50,
          "max": 550,
          "step": 5,
          "unit": "px",
          "label": "Image width",
          "default": 100
        },
        {
          "type": "select",
          "id": "alignment",
          "label": "Image alignment on large screen",
          "options": [
            {
              "value": "",
              "label": "Left"
            },
            {
              "value": "center",
              "label": "Center"
            },
            {
              "value": "right",
              "label": "Right"
            }
          ],
          "default": "center"
        }
      ]
    }
  ],
  "settings": [
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.colors.label",
      "default": "scheme-1"
    },
    {
      "type": "header",
      "content": "t:sections.footer.settings.header__1.content",
      "info": "t:sections.footer.settings.header__1.info"
    },
    {
      "type": "checkbox",
      "id": "newsletter_enable",
      "default": true,
      "label": "t:sections.footer.settings.newsletter_enable.label"
    },
    {
      "type": "inline_richtext",
      "id": "newsletter_heading",
      "default": "Subscribe to our emails",
      "label": "t:sections.footer.settings.newsletter_heading.label"
    },
    {
      "type": "header",
      "content": "t:sections.footer.settings.header__9.content",
      "info": "t:sections.footer.settings.header__9.info"
    },
    {
      "type": "checkbox",
      "id": "enable_follow_on_shop",
      "default": true,
      "label": "t:sections.footer.settings.enable_follow_on_shop.label"
    },
    {
      "type": "header",
      "content": "t:sections.footer.settings.header__2.content",
      "info": "t:sections.footer.settings.header__2.info"
    },
    {
      "type": "checkbox",
      "id": "show_social",
      "default": true,
      "label": "t:sections.footer.settings.show_social.label"
    },
    {
      "type": "header",
      "content": "t:sections.footer.settings.header__3.content",
      "info": "t:sections.footer.settings.header__4.info"
    },
    {
      "type": "checkbox",
      "id": "enable_country_selector",
      "default": true,
      "label": "t:sections.footer.settings.enable_country_selector.label"
    },
    {
      "type": "header",
      "content": "t:sections.footer.settings.header__5.content",
      "info": "t:sections.footer.settings.header__6.info"
    },
    {
      "type": "checkbox",
      "id": "enable_language_selector",
      "default": true,
      "label": "t:sections.footer.settings.enable_language_selector.label"
    },
    {
      "type": "header",
      "content": "t:sections.footer.settings.header__7.content"
    },
    {
      "type": "checkbox",
      "id": "payment_enable",
      "default": true,
      "label": "t:sections.footer.settings.payment_enable.label"
    },
    {
      "type": "header",
      "content": "t:sections.footer.settings.header__8.content",
      "info": "t:sections.footer.settings.header__8.info"
    },
    {
      "type": "checkbox",
      "id": "show_policy",
      "default": false,
      "label": "t:sections.footer.settings.show_policy.label"
    },
    {
      "type": "header",
      "content": "t:sections.all.spacing"
    },
    {
      "type": "range",
      "id": "margin_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.footer.settings.margin_top.label",
      "default": 0
    },
    {
      "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": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 36
    }
  ],
  "default": {
    "blocks": [
      {
        "type": "link_list"
      },
      {
        "type": "text"
      }
    ]
  }
}
{% endschema %}
<style>
  .footer-payment-icons {
    float: left;
  }
  .footer-social-icons {
    float: right;
  }
  .footer-clearfix::after {
    content: "";
    display: table;
    clear: both;
  }
</style>
 

Thank you in advance! 

Replies 2 (2)

instasell
Shopify Partner
6 0 0

To change the position of the Newsletter form in the footer menu of the Dawn Theme 2.0, you will need to make adjustments in the footer.liquid file of your theme. Here's a general guide to help you achieve this:

1. Locate the footer.liquid file in your Shopify admin under Online Store > Themes > Actions > Edit Code.

2. Search for the code related to the current position of the Newsletter form. Look for the section that renders the Newsletter form within the footer menu.

3. To change the position, you can cut the code block responsible for the Newsletter form and paste it within the desired location in the footer.liquid file.

4. Save the changes and ensure to test the placement on your live website to confirm the new position.If the previous methods you tried did not work, I recommend trying to adjust the positioning in the footer.liquid file directly to achieve the desired layout.For further customization or if you find coding challenging, you may consider reaching out to a Shopify Expert or using a page builder app like Shogun, PageFly, or GemPages to easily rearrange elements in your footer without the need for coding.

 

Instasell
DINOGYM
Visitor
2 0 0

Thank you for the response, which part of the code would I need to change?