Customising Footer: Payment Icons & Images

[louisesookee]

Hi,

I am wanting to create some small changes to my footer design. This is what it looks like now:

Essentially what I would like, is the copyright notice (currently bottom left) to be beneath the payment icons. At the moment I have the copyright info in the 'powered by shopify' theme content section but if needed I don't mind controlling it elsewhere.

I would also like to add this B-Corp logo to the left hand column titled "/skin regimen". I'd like it to sit just under the 'skin longevity roooed in science' text. It is quite large so I'd like it sized to fit comfortably within that column.

Link to the theme I am working on: https://ea2argov851xrna7-66004811958.shopifypreview.com

Thanks in advanced!

 

[webwondersco]

@louisesookee Hope you are doing well.

It looks like you have updated thee content for the power by shopify. 

Regarding the logo, please check if the theme supports the section in the footer to add the additional logo as per the requirement. Otherwise, you need to add one custom option to add the image below the specified location through the footer schema.

[louisesookee]

Hi, yes it is in the powered by shopify section, is there a way to align this to the right so it sits under the payment icons?

As for the logo, I don't have any sections available in theme editor that allow for an image/logo to be added so if you could please advise which code I'll need to add and where I'll need to add it to that'd be awesome.

Thanks!

[webwondersco]

@louisesookee Please add the below line of CSS code at the end of your theme.css file:

@media(min-width:768px){
body .footer--sub{
flex-direction:column-reverse;
}
body .footer--sub--block{
flex:1 1 100%;
}
}

Result:

Regarding the image in the footer, need to check the code for the same

[louisesookee]

Thanks! That has worked. 

Are you able to give some guidance on what code I need to add for the image to appear within the first column of the footer?

[webwondersco]

@louisesookee That's great.

Could you please share your footer code so can guide you accordingly? 

[louisesookee]

Hi,

I figured out how to add the logo to the footer column, however it isn't displaying how I want it to on mobile, see below desktop vs mobile view:

 

Is there a way to force the logo to be centred on mobile? I want it to remain left aligned on desktop and only be centred on mobile.

I've added my footer.liquid code below for your reference.

Thanks!

{%- liquid
  assign navigation_t = 'layout.footer.navigation' | t

  assign bg_color = section.settings.background-color
  assign block_count = section.blocks.size
  assign heading_type = section.settings.heading-type
  assign top_border = section.settings.top-border
  assign white_text = section.settings.white-text

  assign region_enabled = false
  if section.settings.show-region-selector and localization.available_countries.size > 1
    assign region_enabled = true
  endif

  assign locale_enabled = false
  if section.settings.show-locale-selector and localization.available_languages.size > 1
    assign locale_enabled = true
  endif
-%}

<div
  class="footer--root"
  data-section-id="{{ section.id }}"
  data-section-type="footer"
  data-background-color="{{ bg_color }}"
  {% if white_text %}
    data-text-color="white"
  {% endif %}
  data-top-border="{{ top_border }}"
>
  <div class="footer--blocks">
    {%- for block in section.blocks limit: block_count -%}
      <div
        class="footer--block"
        data-block-type="{{ block.type }}"
        {{ block.shopify_attributes }}
      >
        <div class="footer--block--container">
          {%- case block.type -%}
            {%- when 'about' -%}
              {%- assign show_social = block.settings.subscribe--show-social-icons -%}

              {%- if block.settings.about-title != blank -%}
                <div class="footer--block--heading" data-item="{{ heading_type }}">
                  {{- block.settings.about-title | escape -}}
                </div>
              {%- endif -%}

              <div class="footer--block--body">
                {%- if block.settings.text != blank -%}
                  <div class="footer--about-text" data-item="rte-content">
                    {%- assign current_year = 'now' | date: '%Y' -%}
                    {{- block.settings.text | replace: '[current_year]', current_year -}}
                  </div>
                {%- endif -%}

                {%- liquid
                  if show_social
                    render 'social-icons', type: 'follow', align: 'left', mobile_align: 'center'
                  endif

                  if section.settings.enable-follow-on-shop
                    echo shop | login_button: action: 'follow'
                  endif
                -%}
              </div>

            <div style="width:25%;margin-top:30px">
<img src="https://cdn.shopify.com/s/files/1/0660/0481/1958/files/B-Corp-Logo-Black-RGB.png?v=1725328977"
width="100%" height="200px">
</div>

            {%- when 'menu' -%}
              {%- if block.settings.menu-title != blank -%}
                <div class="footer--block--heading" data-item="{{ heading_type }}">
                  {{- block.settings.menu-title | escape -}}
                </div>
              {%- endif -%}

              <div class="footer--block--body" role="navigation">
                <ul class="footer--menu" aria-label="{{ navigation_t }}">
                  {%- if linklists[block.settings.menu].links.size > 0 -%}
                    {%- assign footer_nav = block.settings.menu -%}

                    {%- for link in linklists[footer_nav].links -%}
                      <li>
                        {%- if link.url == routes.search_url -%}
                          <div
                            data-drawer-open="top"
                            data-drawer-view="search"
                            tabindex="0"
                            data-item="nav-text--sub"
                          >
                            {{- link.title -}}
                          </div>
                        {%- else -%}
                          <a
                            href="{{ link.url }}"
                            title="{{ link.title }}"
                            data-item="nav-text--sub"
                          >
                            {{- link.title -}}
                          </a>
                        {%- endif -%}
                      </li>
                    {%- endfor -%}
                  {%- endif -%}

                  {%- if block.settings.show-policy-links -%}
                    {%- for policy in shop.policies -%}
                      {%- if policy != blank -%}
                        <li>
                          <a
                            href="{{ policy.url }}"
                            title="{{ policy.title }}"
                            data-item="nav-text--sub"
                          >
                            {{- policy.title -}}
                          </a>
                        </li>
                      {%- endif -%}
                    {%- endfor -%}
                  {%- endif -%}
                </ul>
              </div>

            {%- when 'subscribe' -%}
              <div class="footer--subscribe">
                {%- if block.settings.subscribe--show-newsletter or show_social -%}
                  {%- if block.settings.newsletter--heading != blank -%}
                    <div class="footer--block--heading" data-item="{{ heading_type }}">
                      {{ block.settings.newsletter--heading }}
                    </div>
                  {%- endif -%}
                {%- endif -%}

                <div class="footer--block--body">
                  {%- if block.settings.subscribe--show-newsletter -%}
                    <div id="mailing-list-module">
                      {%- if block.settings.newsletter--info != blank -%}
                        <div class="footer--subscribe--info" data-item="paragraph">
                          {{- block.settings.newsletter--info -}}
                        </div>
                      {%- endif -%}

                      {%- render 'subscribe-form', id: 'footer_form' -%}
                    </div>
                  {%- endif -%}
                </div>
              </div>

            {%- when 'liquid' -%}
              {{- block.settings.custom-liquid -}}

          {%- endcase -%}
        </div>
      </div>
    {%- endfor -%}

    {%- liquid
      if section.blocks.size == 0
        render 'no-blocks'
      endif
    -%}
  </div>

  <div class="footer--sub">
    {%- if locale_enabled or region_enabled -%}
      <div class="footer--sub--block" data-type="localization">
        {%-
          render 'localization',
          locale_enabled: locale_enabled,
          region_enabled: region_enabled,
          loading: 'lazy',
          id: 'footer'
        -%}
      </div>
    {%- endif -%}

    {%- assign powered_check = powered_by_link | split: '>' -%}
    {%- if powered_check[1] != ' </a' -%}
      <div class="footer--sub--block" data-type="powered-by" data-item="nav-text">
        {{- powered_by_link -}}
      </div>
    {%- endif -%}

    {%- liquid
      if shop.enabled_payment_types != empty and section.settings.show-payment-icons
        echo '<div class="footer--sub--block" data-type="payment-icons">'
          for type in shop.enabled_payment_types
            echo type | payment_type_svg_tag
          endfor
        echo '</div>'
      endif
    -%}
  </div>
</div>

{% schema %}
{
  "name": "Footer",
  "class": "section--footer",
  "tag": "footer",
  "max_blocks": 4,
  "settings": [
    {
      "type": "header",
      "content": "Style and layout"
    },
    {
      "id": "top-border",
      "label": "Top border",
      "type": "checkbox",
      "default": false
    },
    {
      "id": "background-color",
      "label": "Background color",
      "type": "select",
      "options": [
        {
          "label": "None",
          "value": "none"
        },
        {
          "label": "Light",
          "value": "light"
        },
        {
          "label": "Dark",
          "value": "dark"
        },
        {
          "label": "Accent 1",
          "value": "accent-1"
        },
        {
          "label": "Accent 2",
          "value": "accent-2"
        }
      ],
      "default": "accent-1"
    },
    {
      "id": "heading-type",
      "label": "Heading type",
      "type": "select",
      "options": [
        { "label": "Medium", "value": "block-heading" },
        { "label": "Small", "value": "nav-text" }
      ],
      "default": "block-heading"
    },
    {
      "id": "white-text",
      "label": "Use white text color",
      "type": "checkbox",
      "default": false
    },
    {
      "type": "header",
      "content": "Follow on Shop",
      "info": "To allow customers to follow your store on the Shop app from your storefront, Shop Pay must be enabled. [Learn more](https:\/\/help.shopify.com\/manual\/online-store\/themes\/customizing-themes\/follow-on-shop)."
    },
    {
      "type": "checkbox",
      "id": "enable-follow-on-shop",
      "label": "Enable Follow on Shop",
      "default": true
    },
    {
      "type": "header",
      "content": "Country/region Selector",
      "info": "To add a country/region, go to your [payment settings](/admin/settings/payments)."
    },
    {
      "type": "checkbox",
      "id": "show-region-selector",
      "label": "Show country/region selector",
      "default": true
    },
    {
      "type": "header",
      "content": "Language Selector",
      "info": "To add a language, go to your [language settings](/admin/settings/languages)."
    },
    {
      "type": "checkbox",
      "id": "show-locale-selector",
      "label": "Show language selector",
      "default": true
    },
    {
      "type": "header",
      "content": "Payment methods"
    },
    {
      "type": "checkbox",
      "id": "show-payment-icons",
      "label": "Show payment icons",
      "default": true
    }
  ],
  "blocks": [
    {
      "type": "about",
      "name": "About and copyright",
      "settings": [
        {
          "type": "text",
          "id": "about-title",
          "label": "Title",
          "default": "About the store"
        },
        {
          "type": "richtext",
          "id": "text",
          "label": "Description and copyright",
          "default": "<p>[current_year] © Your brand name here.<br><br>A brief store summary, tagline, or vision statement.<p>",
          "info": "Inserting the text '[current_year]' will automatically insert the current year."
        },
        {
          "type": "checkbox",
          "id": "subscribe--show-social-icons",
          "label": "Show social icons",
          "default": true
        }
      ]
    },
    {
      "type": "menu",
      "name": "Menu",
      "settings": [
        {
          "type": "text",
          "id": "menu-title",
          "label": "Title",
          "default": "Quick links"
        },
        {
          "type": "link_list",
          "id": "menu",
          "label": "Menu",
          "default": "footer",
          "info": "This menu won't show submenu items."
        },
        {
          "type": "header",
          "content": "Policy links",
          "info": "To add store policies, go to your [policy settings](\/admin\/settings\/legal)."
        },
        {
          "type": "checkbox",
          "id": "show-policy-links",
          "label": "Show policy links",
          "default": true
        }
      ]
    },
    {
      "type": "subscribe",
      "name": "Subscribe",
      "limit": 1,
      "settings": [
        {
          "id": "newsletter--heading",
          "label": "Newsletter heading",
          "type": "text",
          "default": "Newsletter"
        },
        {
          "id": "newsletter--info",
          "label": "Newsletter information",
          "type": "richtext",
          "default": "<p>Be the first to receive updates on new arrivals, special promos and sales.</p>"
        },
        {
          "type": "checkbox",
          "id": "subscribe--show-newsletter",
          "label": "Show newsletter",
          "default": true
        }
      ]
    },
    {
      "type": "liquid",
      "name": "Custom liquid",
      "settings": [
        {
          "type": "liquid",
          "id": "custom-liquid",
          "label": "Custom Liquid",
          "info": "Add app snippets or other Liquid code to create advanced customizations."
        }
      ]
    }
  ],
  "enabled_on": {
    "groups": ["footer"]
  }
}
{% endschema %}