Solved

Dawn Theme - Footer email sign up as a column next to the menu

Femmi
Excursionist
30 0 1

Hello community!

I am a new user and having some difficulty with footer on my store.

Right now my footer looks like below:

Screen Shot 2023-09-10 at 11.38.16 PM.png

 

Is there a way to move the 'Subscribe  to get latest next to the 'Customer care' menu. I would like to display all the information as a single column along with the Social media icons like the one below:

Screen Shot 2023-09-10 at 11.39.59 PM.png

I hope there is a way to make this change to the footer without coding. I am a small business just starting out and dont want to pay monthly fee. But if there a way to just purchase this section, i would like to know the app info.

 

Thank you so much for all your help!

Femmi

Accepted Solution (1)
namphan
Shopify Partner
194 28 43

This is an accepted solution.

Hi @Femmi,

Please change text here:

Screenshot.png

Shopify Development Service

View solution in original post

Replies 16 (16)

Artzen_tech
Shopify Partner
528 105 104
Hello @Femmi 

Its Artzen Technologies! We will be happy to help you today.

 

please send ur store url

 

Let me know if need further assistance
Regards,
Artzen Technologies

If helpful, please Like and Accept this Solution to help others
Artzen Technologies | A Shopify Development Agency
WhatsApp - 9877983930

Book FREE CONSULTATION who want to migrate to Shopify or want to start an eCommerce business with Shopify
Femmi
Excursionist
30 0 1

Thank you for your help!

My store url is https://femmiflare.com/ and collaborator code is 2800

 

Sincerely,

Femmi

Dan-From-Ryviu
Shopify Partner
6915 1305 1333

Hi @Femmi 

You will need to custom your footer.liquid file to do that, recommend you hire an expert so they can help you. 

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

namphan
Shopify Partner
194 28 43

Hi @Femmi,

You can send me a collaborator invitation, I will help you edit it, because it will need to change some code in the footer.liquid file

Shopify Development Service
Femmi
Excursionist
30 0 1

Thank you for offering your help. Please let me know ur email address or where to send the collaborator invitation. On the other hand, if its easier my store name is 

www.femmiflare.com and collaboration code is 2800.

 

Many thanks,

Femmi

namphan
Shopify Partner
194 28 43

Hi @Femmi,

I sent it, after you access, I will check it for you

Shopify Development Service
Femmi
Excursionist
30 0 1

Hi Namphan, I think i gave you the access. Would you please let me know the files you modified and the code that you added so i can follow along.

 

Thank you very much!

Femmi

namphan
Shopify Partner
194 28 43

Hi @Femmi,

You can refer https://yqs57gx15kfzh9cf-75623235878.shopifypreview.com

Is this what you want?

Shopify Development Service
Femmi
Excursionist
30 0 1

Yes! That looks great!!

Can you also tell me what the code changes are. If i need to change the wording, Please let me know which file(s) need changes.

 

I appreciate your help!

namphan
Shopify Partner
194 28 43

Hi @Femmi,

You can follow these steps:

- Step 1: Change all code footer.liquid file:

{% 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 }}
{%- if section.settings.enable_country_selector or section.settings.enable_language_selector -%}
  {{ 'component-localization-form.css' | asset_url | stylesheet_tag }}
{%- endif -%}

{%- 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
    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 }}">
            {%- for block in section.blocks -%}
              <div
                class="footer-block grid__item{% if block.type == 'link_list' %} footer-block--menu{% endif %}"
                {{ block.shopify_attributes }}
              >
                {%- 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 global-media-settings"
                          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' -%}
                      {%- 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 global-media-settings"
                          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>
                  {%- when 'newsletter' -%}
                    <div class="footer-block__details-content footer-block-newsletter {{ block.settings.alignment }}">
                      <div class="footer-block__newsletter">
                        {%- if block.settings.newsletter_heading != blank -%}
                          <h2 class="footer-block__heading inline-richtext">{{ block.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--{{ block.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--{{ block.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>
                      
                      {%- if shop.features.follow_on_shop? and block.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 block.settings.show_social and has_social_icons -%}
                        {%- render 'social-icons' -%}
                      {%- endif -%}
                    </div>
                {%- endcase -%}
              </div>
            {%- endfor -%}
          </div>
        {%- endif -%}
      </div>
    {%- endunless -%}
  {%- endif -%}

  <div class="footer__content-bottom">
    <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>

{%- if section.settings.enable_country_selector or section.settings.enable_language_selector -%}
  <script src="{{ 'localization-form.js' | asset_url }}" defer="defer"></script>
{%- endif -%}

{% 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"
        }
      ]
    },
    {
      "type": "newsletter",
      "name": "Newsletter",
      "settings": [
        {
          "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"
        }
      ]
    }
  ],
  "settings": [
    {
      "type": "select",
      "id": "color_scheme",
      "options": [
        {
          "value": "accent-1",
          "label": "t:sections.all.colors.accent_1.label"
        },
        {
          "value": "accent-2",
          "label": "t:sections.all.colors.accent_2.label"
        },
        {
          "value": "background-1",
          "label": "t:sections.all.colors.background_1.label"
        },
        {
          "value": "background-2",
          "label": "t:sections.all.colors.background_2.label"
        },
        {
          "value": "inverse",
          "label": "t:sections.all.colors.inverse.label"
        }
      ],
      "default": "background-1",
      "label": "t:sections.all.colors.label"
    },
    {
      "type": "header",
      "content": "t:sections.footer.settings.header__1.content",
      "info": "t:sections.footer.settings.header__1.info"
    },
    {
      "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 %}

- Step 2: Go to section-footer..css file and paste this at the bottom of the file:

.footer-block-newsletter .list-social {
  justify-content: flex-start;
  margin-left: -1.3rem;
}

Hope it is clear to you.

Shopify Development Service
Femmi
Excursionist
30 0 1

Thank you so much!! I will try it out later today!

 

Best Regards,

Femmi

bpuc
Tourist
6 0 2

Hey I'm trying to move the email sign up to the right of a footer menu column as well.  Did you get yours to work? Can you help?

Femmi
Excursionist
30 0 1

Hi Namphan,

I tried to change the Wording from 'Subscribe to our emails' to 'Sign-up to get the latest on Discounts & Arrivals'. However it still comes up as the Subscribe to our emails'. What am i missing?

 

Thanks

Femmi

namphan
Shopify Partner
194 28 43

This is an accepted solution.

Hi @Femmi,

Please change text here:

Screenshot.png

Shopify Development Service
Femmi
Excursionist
30 0 1

Hi Namphan, It worked and Thank you so much for your help!

 

Thanks,

Femmi

 

namphan
Shopify Partner
194 28 43

Hi @Femmi,

If you have any further questions, you can contact me.
Happy to help you.

Shopify Development Service