How to add a mailto: link to a button

tranquilweaves
Excursionist
52 0 2

Hi I really need help with making a button on my contact page a mailto: button that when it is clicked takes the customer to compose an email with my email address in the recipient place. Please help! 

Replies 17 (17)

mrashid
Shopify Partner
169 17 15

Hi @tranquilweaves use code 
mailto:someone@example.com

- Need a Shopify developer? Chat on WhatsApp +923068683199
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
tranquilweaves
Excursionist
52 0 2

@mrashid yes but how to I add this to the button? It is not an option to add the button currently, I am using DAWN theme, How can I add it to the button?

mrashid
Shopify Partner
169 17 15

@tranquilweaves please share screenshot where you want to add
and share email address

 

- Need a Shopify developer? Chat on WhatsApp +923068683199
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
tranquilweaves
Excursionist
52 0 2

@mrashid  I want it to be linked to the button on my contact page and my email address is tranquil.weaves@gmail.comScreenshot 2024-05-29 at 14.37.31.png

mrashid
Shopify Partner
169 17 15

@tranquilweaves  now open customization and enter link 

mailto:tranquil.weaves@gmail.com

image.png

 after enter link then select link on top like in screenshot 

- Need a Shopify developer? Chat on WhatsApp +923068683199
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
tranquilweaves
Excursionist
52 0 2

@mrashid it doesnt work when I do this for some reason it does not work, in the screenshot below you can see when I click the button all that happens is in the left bottom corner my email address shows

 

Screenshot 2024-05-31 at 17.39.54.png

mrashid
Shopify Partner
169 17 15

@tranquilweaves  oh , 

Now we need to edit the code .

- Need a Shopify developer? Chat on WhatsApp +923068683199
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
tranquilweaves
Excursionist
52 0 2

@mrashid I now understand it is working on my phone but not the desktop is there some quick code I can add myself to make it work for desktop? 

mrashid
Shopify Partner
169 17 15

@tranquilweaves is it possible for you to add me as a staff?

- Need a Shopify developer? Chat on WhatsApp +923068683199
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
tranquilweaves
Excursionist
52 0 2

@mrashid I edit all the code myself cause I need to know the changes made to my site, most people here give code in the forum so we can try it ourselves, is there any code you can suggest I try for this? 

mrashid
Shopify Partner
169 17 15

@tranquilweaves okay great 

Give me 5 minutes 

- Need a Shopify developer? Chat on WhatsApp +923068683199
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
tranquilweaves
Excursionist
52 0 2

@mrashid thank you, I will wait 5 minutes 😊

mrashid
Shopify Partner
169 17 15

@tranquilweaves section name?

- Need a Shopify developer? Chat on WhatsApp +923068683199
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
tranquilweaves
Excursionist
52 0 2

@mrashid the page name is Contact

mrashid
Shopify Partner
169 17 15

@tranquilweaves 

mrashid_0-1717177492178.png

{%- when 'buttons' -%}
<div
class="banner__buttons{% if block.settings.button_label_1 != blank and block.settings.button_label_2 != blank %} banner__buttons--multiple{% endif %}"
{{ block.shopify_attributes }}
>
{%- if block.settings.button_label_1 != blank -%}
<a
{% if block.settings.button_link_1 == blank %}
role="link" aria-disabled="true"
{% else %}
href="{% if block.settings.button_link_1 contains 'mailto:' %}{{ block.settings.button_link_1 }}{% else %}mailto:{{ block.settings.button_link_1 }}{% endif %}"
{% endif %}
class="button{% if block.settings.button_style_secondary_1 %} button--secondary{% else %} button--primary{% endif %}"
>
{{- block.settings.button_label_1 | escape -}}
</a>
{%- endif -%}
{%- if block.settings.button_label_2 != blank -%}
<a
{% if block.settings.button_link_2 == blank %}
role="link" aria-disabled="true"
{% else %}
href="{% if block.settings.button_link_2 contains 'mailto:' %}{{ block.settings.button_link_2 }}{% else %}mailto:{{ block.settings.button_link_2 }}{% endif %}"
{% endif %}
class="button{% if block.settings.button_style_secondary_2 %} button--secondary{% else %} button--primary{% endif %}"
>
{{- block.settings.button_label_2 | escape -}}
</a>
{%- endif -%}
</div>

replace this code

- Need a Shopify developer? Chat on WhatsApp +923068683199
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
tranquilweaves
Excursionist
52 0 2

@mrashid please could you paste it in the code format so I can copy it and paste it into that section? Right now if I copy and paste was you have written it pastes in a straight line and does not work, rather than like in the screenshot where it is staggered

tim
Shopify Expert
3566 302 1329

It could be that your browser does not know how to proceed with this type of links or maybe a popup blocker (especially if you're trying in Customizer)... Try on a different computer/ browser. 

But it works on my copy of the Dawn and does not require any extra code.

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com