Atelier Theme - Unable to add email icon on website footer

Technical Q&A
,
1

Hi Guys,

I’m new to Shopify and struggling to add an icon for my email /social link footer of my website.

This theme appears to automatically assign an svg from the website w3 for social media links.

The theme is not recognising the “mailto:” prefix and assigning an icon, instead it leaves it as plaintext, when previewing the website the email text is not there.

I haven’t been able to find out a way to manually add an icon which is where I’m needing some help.

Any help is much appreciated.
Website link:

image
image1920×987 80.4 KB

2

_footer-social-icons.liquid:



<div
  class="social-icons__wrapper"
  {{ block.shopify_attributes }}
>
  {% content_for 'blocks' %}
</div>

{% stylesheet %}
  .social-icons__wrapper {
    display: flex;
    gap: var(--gap-sm);
    flex-wrap: wrap;
    justify-content: center;

    @media screen and (min-width: 750px) {
      flex-wrap: nowrap;
      justify-content: flex-start;
    }
  }
{% endstylesheet %}

{% schema %}
{
  "name": "t:names.social_media_links",
  "tag": null,
  "blocks": [
    {
      "type": "_social-link"
    }
  ]
}
{% endschema %}

footer.liquid


<div class="section-background color-{{ section.settings.color_scheme }}"></div>
<div
  class="
    section section--{{ section.settings.section_width }} color-{{ section.settings.color_scheme }}
    {% if section.settings.section_height != "" %} {{ section.settings.section_height | prepend: "section--height-" }}{% endif %}
  "
>
  {% render 'background-media',
    background_media: section.settings.background_media,
    background_video: section.settings.video,
    background_video_position: section.settings.video_position,
    background_image: section.settings.background_image,
    background_image_position: section.settings.background_image_position
  %}

  <div
    class="
      spacing-style
      layout-panel-flex
      layout-panel-flex--{{ section.settings.content_direction }}
      section-content-wrapper
      {% if section.settings.vertical_on_mobile %} mobile-column{% endif %}
    "
    style="
      {% render 'layout-panel-style', settings: section.settings %}
      {%  render 'spacing-style', settings: section.settings %}
    "
  >
    {% content_for 'blocks' %}
  </div>
</div>

{% schema %}
{
  "name": "t:names.footer",
  "class": "section-wrapper",
  "tag": "footer",
  "blocks": [
    {
      "type": "_divider"
    },
    {
      "type": "@app"
    },
    {
      "type": "button"
    },
    {
      "type": "email-signup"
    },
    {
      "type": "follow-on-shop"
    },
    {
      "type": "footer-utilities"
    },
    {
      "type": "group"
    },
    {
      "type": "icon"
    },
    {
      "type": "image"
    },
    {
      "type": "menu"
    },
    {
      "type": "payment-icons"
    },
    {
      "type": "text"
    },
    {
      "type": "logo"
    },
    {
      "type": "jumbo-text"
    }
  ],
  "enabled_on": {
    "groups": ["footer"]
  },
  "settings": [
    {
      "type": "header",
      "content": "t:content.layout"
    },
    {
      "type": "select",
      "id": "content_direction",
      "label": "t:settings.direction",
      "options": [
        {
          "value": "column",
          "label": "t:options.vertical"
        },
        {
          "value": "row",
          "label": "t:options.horizontal"
        }
      ],
      "default": "column"
    },
    {
      "type": "checkbox",
      "id": "vertical_on_mobile",
      "label": "t:settings.vertical_on_mobile",
      "default": true,
      "visible_if": "{{ section.settings.content_direction == 'row' }}"
    },
    {
      "type": "select",
      "id": "horizontal_alignment",
      "label": "t:settings.alignment",
      "options": [
        {
          "value": "flex-start",
          "label": "t:options.left"
        },
        {
          "value": "center",
          "label": "t:options.center"
        },
        {
          "value": "flex-end",
          "label": "t:options.right"
        },
        {
          "value": "space-between",
          "label": "t:options.space_between"
        }
      ],
      "default": "flex-start",
      "visible_if": "{{ section.settings.content_direction == 'row' }}"
    },
    {
      "type": "select",
      "id": "vertical_alignment",
      "label": "t:settings.position",
      "options": [
        {
          "value": "flex-start",
          "label": "t:options.top"
        },
        {
          "value": "center",
          "label": "t:options.center"
        },
        {
          "value": "flex-end",
          "label": "t:options.bottom"
        }
      ],
      "default": "center",
      "visible_if": "{{ section.settings.content_direction == 'row' }}"
    },
    {
      "type": "checkbox",
      "id": "align_baseline",
      "label": "t:settings.align_baseline",
      "default": false,
      "visible_if": "{{ section.settings.vertical_alignment == 'flex-end' }}"
    },
    {
      "type": "select",
      "id": "horizontal_alignment_flex_direction_column",
      "label": "t:settings.alignment",
      "options": [
        {
          "value": "flex-start",
          "label": "t:options.left"
        },
        {
          "value": "center",
          "label": "t:options.center"
        },
        {
          "value": "flex-end",
          "label": "t:options.right"
        }
      ],
      "default": "flex-start",
      "visible_if": "{{ section.settings.content_direction != 'row' }}"
    },
    {
      "type": "select",
      "id": "vertical_alignment_flex_direction_column",
      "label": "t:settings.position",
      "options": [
        {
          "value": "flex-start",
          "label": "t:options.top"
        },
        {
          "value": "center",
          "label": "t:options.center"
        },
        {
          "value": "flex-end",
          "label": "t:options.bottom"
        },
        {
          "value": "space-between",
          "label": "t:options.space_between"
        }
      ],
      "default": "center",
      "visible_if": "{{ section.settings.content_direction == 'column' }}"
    },
    {
      "type": "range",
      "id": "gap",
      "label": "t:settings.gap",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "default": 12
    },
    {
      "type": "header",
      "content": "t:content.size"
    },
    {
      "type": "select",
      "id": "section_width",
      "label": "t:settings.width",
      "options": [
        {
          "value": "page-width",
          "label": "t:options.page"
        },
        {
          "value": "full-width",
          "label": "t:options.full"
        }
      ],
      "default": "page-width"
    },
    {
      "type": "select",
      "id": "section_height",
      "label": "t:settings.height",
      "options": [
        {
          "value": "",
          "label": "t:options.auto"
        },
        {
          "value": "small",
          "label": "t:options.small"
        },
        {
          "value": "medium",
          "label": "t:options.medium"
        },
        {
          "value": "large",
          "label": "t:options.large"
        },
        {
          "value": "full-screen",
          "label": "t:options.full_screen"
        }
      ],
      "default": ""
    },
    {
      "type": "header",
      "content": "t:content.appearance"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:settings.color_scheme",
      "default": "scheme-1"
    },
    {
      "type": "select",
      "id": "background_media",
      "label": "t:settings.background_media",
      "options": [
        {
          "value": "none",
          "label": "t:options.none"
        },
        {
          "value": "image",
          "label": "t:options.image"
        },
        {
          "value": "video",
          "label": "t:options.video"
        }
      ],
      "default": "none"
    },
    {
      "type": "video",
      "id": "video",
      "label": "t:settings.video",
      "visible_if": "{{ section.settings.background_media == 'video' }}"
    },
    {
      "type": "select",
      "id": "video_position",
      "label": "t:settings.video_position",
      "options": [
        {
          "value": "cover",
          "label": "t:options.cover"
        },
        {
          "value": "contain",
          "label": "t:options.contain"
        }
      ],
      "default": "cover",
      "visible_if": "{{ section.settings.background_media == 'video' }}"
    },
    {
      "type": "image_picker",
      "id": "background_image",
      "label": "t:settings.image",
      "visible_if": "{{ section.settings.background_media == 'image' }}"
    },
    {
      "type": "select",
      "id": "background_image_position",
      "label": "t:settings.image_position",
      "options": [
        {
          "value": "cover",
          "label": "t:options.cover"
        },
        {
          "value": "fit",
          "label": "t:options.fit"
        }
      ],
      "default": "cover",
      "visible_if": "{{ section.settings.background_media == 'image' }}"
    },
    {
      "type": "header",
      "content": "t:content.padding"
    },
    {
      "type": "range",
      "id": "padding-block-start",
      "label": "t:settings.top",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "default": 0
    },
    {
      "type": "range",
      "id": "padding-block-end",
      "label": "t:settings.bottom",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "default": 0
    }
  ]
}
{% endschema %}
3

Hey :waving_hand:, @OCD-Garage

You’ve run into a common limitation with a lot of Shopify themes most will auto-map SVG icons only for the big social platforms (Facebook, Instagram, TikTok, etc.), but they don’t natively recognize mailto: links and therefore don’t assign an icon. That’s why your email is showing up as plain text (or disappearing on preview).

There are two good ways around this:

1. Quick Theme Edit (code-based):
I can add a custom SVG email icon into your theme’s social icons snippet and set it to trigger whenever a mailto: link is detected. That way, your email address will show with a proper email/envelope icon in the footer, consistent with your other social links.

2. Flexible Upgrade (future-proof):
If you’d like more control, I can adjust the theme so you can upload your own icons for any link whether it’s email, WhatsApp, or even something niche. This makes it easier to manage in the future without touching code again.

Both approaches are straightforward, but the second one will give you more flexibility as your store grows.

If you’d like, I can take care of this for you usually just a quick edit depending on your theme structure. That way you don’t have to wrestle with Liquid files or SVGs, and everything stays update-safe.

Would you like me to take a look under the hood of your theme and set it up?

4

Hi @OCD-Garage,

Please go to Actions > Edit code > blocks > _footer-social-icons.liquid file and add code here:

Screenshot
Screenshot912×510 35.7 KB

Code:

<div
    class="social-icons__icon-wrapper"
  >
    <a
      href="mailto:"
      target="_blank"
      rel="noopener noreferrer"
    >
      svg icon
    </a>
  </div>
5

Ended up going with this, thanks for the help.

<div

class=“social-icons__wrapper”

{{ block.shopify_attributes }}

>

{% content_for ‘blocks’ %}

<div 
class="social-icons__icon-wrapper"

</a>

 <a href="mailto:ocdgarageshopify@outlook.com" rel="noopener noreferrer">

  <svg class="email-icon" xmlns=" http://www.w3.org/2000/svg " viewBox="0 0 27 27" width="27" height="27">

    <path fill="#666666" d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 2l-8 5-8-5h16zm0 12H4V8l8 5 8-5v10z"/>

  </svg>

</a>
6

Hi @OCD-Garage,

It’s my pleasure :blush: