it seems while TEL:// works, I would like to have a SMS:// URL work in my Shopify header menu. I purchased an 888 toll free number for text messaging support (using services like SimpleTexting, etc.) since I’m running this business solo, and answer queries through text messages much more easily.
Is there a way to edit code to “allow” SMS:// url format to be allowed in the header menu? I’m comfortable with editing code, and have theme code backups already.
My theme is the Impulse theme.
@CaelanB – there’s no way to get this inserted in the dashbard, if Shopify doesn’t modify the filters.
However, in your theme you can manipulate a “placeholder” link to become your sms link; either through JS or – which I would prefer – using the replace-filter, where the link-list gets rendered. If you use the link with the tel://-protocol (and you don’t use any other tel://-links), then something like this would work in your liquid code:
{% for link in linklists.header-sidebar.links %}
{{ link.title }}
{% endfor %}
Does this help?
Mario
Hello there!
Correct, at this time (2 years?) I have no intention of using the number for telephone calls; calling it will hang up after a message anyway. I would like to try this; your help is quite appreciated.
This code would be inserted in theme.liquid?
@CaelanB - what theme are you using?
Theme is Impulse.
Alright. I don’t have a copy of it, but if there’s a /sections/header.liquid file, that would be a good place to start looking. Is there a loop, where
linklists.header-sidebar.links
is mentioned? If so, can you please share that block of the source code?
Mario
I’m getting a result for “linklist” but not “linklists” specifically, but the immediate code after that appears to be theme stuff related to the blocks of the footer. And below that, I saw some header-sidebar stuff too:
.site-footer__linklist{
margin:0
}
.site-footer__linklist a{
display:inline-block;
padding:4px 0;
}
.footer__newsletter{
position:relative;
display:inline-block;
max-width:300px;
width:100%;
}
.footer__newsletter-input{
padding:10px 45px 10px 0;
background-color:{{ settings.color_footer | default: "#111" }};
background-color:var(--colorFooter);
color:{{ settings.color_footer_text | default: "#fff" }};
color:var(--colorFooterText);
max-width:300px;
width:100%;
border:0;
border-radius:0;
border-bottom:2px solid;
border-bottom-color:{{ settings.color_footer_text | default: "#fff" }};
border-bottom-color:var(--colorFooterText)
}
.footer__newsletter-input:focus{
border:0;
border-bottom:2px solid;
border-bottom-color:{{ settings.color_footer_text | default: "#fff" }};
border-bottom-color:var(--colorFooterText);
}
.footer__newsletter-input::-webkit-input-placeholder{
color:{{ settings.color_footer_text | default: "#fff" }};
color:var(--colorFooterText);
opacity:1;
}
.footer__newsletter-input:-moz-placeholder{
color:{{ settings.color_footer_text | default: "#fff" }};
color:var(--colorFooterText);
opacity:1;
}
.footer__newsletter-input::-moz-placeholder{
color:{{ settings.color_footer_text | default: "#fff" }};
color:var(--colorFooterText);
opacity:1;
}
.footer__newsletter-input:-ms-input-placeholder{
color:{{ settings.color_footer_text | default: "#fff" }};
color:var(--colorFooterText);
opacity:1;
}
.footer__newsletter-input::-ms-input-placeholder{
color:{{ settings.color_footer_text | default: "#fff" }};
color:var(--colorFooterText);
opacity:1;
}
.footer__newsletter-input--active{
padding-right:80px;
}
.footer__newsletter-btn{
position:absolute;
top:50%;
transform:translateY(-50%);
right:0;
color:{{ settings.color_footer_text | default: "#fff" }};
color:var(--colorFooterText);
padding:0
}
.footer__newsletter-btn .icon{
width:26px;
height:24px;
}
.footer__newsletter-input--active+.footer__newsletter-btn .icon{
display:none;
}
.footer__newsletter-input--active+.footer__newsletter-btn .footer__newsletter-btn-label{
display:block;
}
.footer__newsletter-btn-label{
display:none;
font-size:calc(var(--typeBaseSize)*0.85);
}
.footer__logo{
margin:15px 0
}
@media only screen and (min-width:769px){
.footer__logo{
margin:0 0 20px
}
}
.footer__logo a{
display:block;
}
.footer__logo img{
display:inline-block;
transform:translateZ(0);
max-height:100%;
}
.footer__social{
margin:0
}
form+.footer__social{
margin-top:30px
}
.footer__social li{
display:inline-block;
margin:0 15px 15px 0;
}
.footer__social a{
display:block;
}
.footer__social .icon{
width:22px;
height:22px
}
@media only screen and (min-width:769px){
.footer__social .icon{
width:24px;
height:24px
}
}
.footer__social .icon.icon--wide{
width:40px;
}
@media only screen and (max-width:768px){
.footer__collapsible{
padding:0 0 15px 0
}
}
.collapsible-content--sidebar{
visibility:hidden;
overflow:hidden;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
opacity:0;
height:0
}
@media only screen and (min-width:769px){
.collapsible-content--sidebar.is-open{
overflow:visible;
overflow:initial;
visibility:visible;
opacity:1;
height:auto;
}
}
.collection-sidebar{
padding-right:10px;
margin-bottom:20px;
}
@media only screen and (min-width:769px){
.grid__item--sidebar{
position:-webkit-sticky;
position:sticky;
top:10px;
max-height:90vh;
overflow-y:auto;
}
}
.collection-sidebar__group{
border-top:1px solid;
border-top-color:{{ settings.color_drawer_border | default: "#343535" }};
border-top-color:var(--colorDrawerBorder);
padding-top:5px;
margin-top:5px;
margin-bottom:5px;
overflow:hidden
}
.collection-sidebar__group:first-child{
margin-top:0
}
.drawer .collection-sidebar__group:first-child{
border-top:0
}
@media only screen and (min-width:769px){
.collection-sidebar__group .collapsible-content__inner{
padding-bottom:5px;
}
}
.collection-sidebar__group .tag-list{
margin-bottom:0;
}
.collection-sidebar div:first-of-type .collection-sidebar__group{
border-top:0;
padding-top:0;
}
This is a premium theme, so there’s a lot of extra stuff like .megamenu, I notice. It’s my first time diving into this file, but here’s the most relevant stuff I’ve found. Should I snippet more for you?
… that’s just CSS. We need a liquid template. If you message me your url, I can respond with a collaborator request and take a look myself.
@CaelanB - thanks! I’ll give it a look and send you the request in a minute!
There you go. I bet it’s something so small in desktop view that’s causing the issue. On mobile it appears ok.
Alright – I added the tel:-link myself, so I could actually test the code. That means, that the SMS-link is in your nav twice now – the first leads to the contact page, the second is the tel/sms-link now. It’ll also show on your prod theme, as the navigation is a shared asset!
That being said – in the dev-theme I created, tel links in the secondary menu will be converted to sms-links both on desktop and mobile:
Does this solve your problem?
Mario
Yes it does, I see it now, and just tested it after I woke up here (11:04 AM over here in east USA). You’ve been wonderful! I’ll send you one more message, and I appreciate the help. Coding is definitely not my forte.
@CaelanB - you’re welcome … I’m glad I could help and get you sortee out!
Mario
Hey there, I’m facing same issue with sense/Dawn themes. I tried using the replace filter at the header.liquid file but it didn’t workd, any idea where the links file is or how to solve this on these themes?
Also is there a different between ‘tel:’ to ‘tel//:’ I’m asking because i do use on my website the ‘tel:’ URL, and if this are the same is there a way to replace a different URL so i can have ‘SMS:’ and ‘tel:’ working on my site?
@Menny is this problem solved yet?
Mario
