Shopify themes, liquid, logos, and UX
Hi,
im trying to add my address and phone number to the footer but I can’t work out how. I don’t want to add it into a contact us page. I’d like it to be embedded into the footer. Using Narrative theme. Any ideas?
Thank you!
Solved! Go to the solution
This is an accepted solution.
Hello, @Trulines87.
Welcome to Shopify Community. My name is Olivia and I work here.
Thanks for posting your question, I can definitely help you out with this today. There are a couple of different ways we can tackle this, so let's dive right in to your options.
A. Use your design time.
Each store on a paid plan, using a Shopify developed theme, is allotted a full 60 minutes of design time for minor changes. While it's best to check with our Support Team on what changes we can, and can't accommodate, your request is definitely one we could look after. If you have a specific idea of what you would like your footer to look like let me know and I can connect you with our Theme team. Just be as detailed as possible with your request, maybe even including examples, to help us make the right changes. Make sure to check out our design policy to read more about support for Shopify themes.
OR
B. Add text to your footer code.
If you're comfortable with making code changes you can save your design time for something else. It will be helpful to have basic knowledge of HTML and CSS to help you customize the style and layout of added text, but I can point you towards making these changes on your own. Head to Shopify Admin > Online Store > Themes > Narrative > Actions > Edit Code and scroll down to /sections to find the file footer.liquid.
Narrow down this piece of code on line 32:
{% when 'menu' %}
Now, insert your text after that line. Make sure to add <p> before your text, and </p> at the end of your text to close the code. Here's an example:
{% when 'menu' %}
<p> Add your contact info </p>
{%- assign link_list = block.settings.link_list -%}
This is how it would appear on your website:
That's it! You can take it a step further and make it even easier for your customers to contact you by adding a direct email link. Simple code like this would work:
<a href="mailto:yourmail@domain.com">Insert your business email address</a>
Same thing for a "click-able" phone number to help customers easily phone you:
<a href="tel:18001112233">1-800-111-2233</a>
And we're done! Don't forget to replace the email address and phone number in those codes with your own information.
That should work, but let me know if any other questions come up that I can help with.
Warm regards,
Olivia | Social Care @ Shopify
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit the Shopify Help Center or the Shopify Blog
This is an accepted solution.
Hello, @Trulines87.
Welcome to Shopify Community. My name is Olivia and I work here.
Thanks for posting your question, I can definitely help you out with this today. There are a couple of different ways we can tackle this, so let's dive right in to your options.
A. Use your design time.
Each store on a paid plan, using a Shopify developed theme, is allotted a full 60 minutes of design time for minor changes. While it's best to check with our Support Team on what changes we can, and can't accommodate, your request is definitely one we could look after. If you have a specific idea of what you would like your footer to look like let me know and I can connect you with our Theme team. Just be as detailed as possible with your request, maybe even including examples, to help us make the right changes. Make sure to check out our design policy to read more about support for Shopify themes.
OR
B. Add text to your footer code.
If you're comfortable with making code changes you can save your design time for something else. It will be helpful to have basic knowledge of HTML and CSS to help you customize the style and layout of added text, but I can point you towards making these changes on your own. Head to Shopify Admin > Online Store > Themes > Narrative > Actions > Edit Code and scroll down to /sections to find the file footer.liquid.
Narrow down this piece of code on line 32:
{% when 'menu' %}
Now, insert your text after that line. Make sure to add <p> before your text, and </p> at the end of your text to close the code. Here's an example:
{% when 'menu' %}
<p> Add your contact info </p>
{%- assign link_list = block.settings.link_list -%}
This is how it would appear on your website:
That's it! You can take it a step further and make it even easier for your customers to contact you by adding a direct email link. Simple code like this would work:
<a href="mailto:yourmail@domain.com">Insert your business email address</a>
Same thing for a "click-able" phone number to help customers easily phone you:
<a href="tel:18001112233">1-800-111-2233</a>
And we're done! Don't forget to replace the email address and phone number in those codes with your own information.
That should work, but let me know if any other questions come up that I can help with.
Warm regards,
Olivia | Social Care @ Shopify
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit the Shopify Help Center or the Shopify Blog
Incredibly helpful, thank you very much!
I'm so glad I could help, @Trulines87!
I personally really love the Narrative theme, I actually even use it in my own Shopify store. Though if you are still browsing, or looking for a couple other theme options there are themes that come with a contact section built-in to the footer. I narrowed down a fairly extensive list, but make sure to check out some top contenders below.
Let me know if anything else comes up,
Olivia | Social Care @ Shopify
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit the Shopify Help Center or the Shopify Blog
Hi I have the same issue.
I tried adding the line from the example above, but i get this error when i try to save " Liquid syntax error: Unknown tag 'when'".
I have the Boundless theme.
please help!
Hi, @MichaelCharles!
Welcome to Shopify Community and thanks for sharing your question on our thread.
Those instructions are meant to work for the Narrative theme, which explains the error you are running into. I had a look at the code for the Boundless theme and I can recommend the following code changes to get the same effect described above:
{% endcomment %}
<center><p> Add your contact info </p></center>
That should do the trick! Let me know if you run into any trouble.
Warm regards,
Olivia | Social Care @ Shopify
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit the Shopify Help Center or the Shopify Blog
Hi Olivia. I am a new Shopify user and currently setting up my Boutique using the Narrative theme. I love this theme and really enjoyed setting up the site using it. Everything is working out well so far. My only issue with it is the Footer Section which looks fine on Desktop View. However in the Mobile view it looks terrible as the Menu is not very neat. The links are displayed one after the other which I find is a little distracting. In other sites I have noticed they are well organized and displayed. Like this site for example: https://www.kantalabrands.com/
I have been trying to do that but its not working out. I dont have much programing experience on CSS. I would really appreciate if you can help me out as this section is the only reason I dislike the theme. Thank you.
Hey, @ShyamKawshal.
Welcome to Shopify!
I appreciate you connecting with me, and I'd be glad to help guide you in the right direction for support.
We are unable to provide 1:1 design support outside of the topic at hand on our forum threads, so I recommend that you start a new thread for custom advice to get feedback from our community members and partners. Check out our community guidelines for best practices on when to start a new thread.
If you have any further questions around this, please let me know.
Warm regards,
Olivia | Social Care @ Shopify
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit the Shopify Help Center or the Shopify Blog
Thank you for your reply. Will follow your advice and start a new thread. I am new here so good to know the rules. Have a nice day 🙂
Yes, I totally understand @ShyamKawshal.
I appreciate that, and don't forget if you don't get the advice you need in our forums our free in-house design time is still an option.
Warm regards,
Olivia | Social Care @ Shopify
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit the Shopify Help Center or the Shopify Blog
Hi Olivia,
I used the second method which worked but the contact details and email appear twice now.
used the <a href="mailto:yourmail@domain.com">Insert your business email address</a> and <a href="tel:18001112233">1-800-111-2233</a>
how do I get rid of the duplicate
Hey, @PetlyNaid!
Welcome to Shopify Community.
I'd love to help you out, so let's dive right in. Which theme are you using, was it Boundless as per the second set of instructions?
Also, since I can't access your site, can you share screenshots with me of:
That should give me enough context to guide you with next steps.
Warm regards,
Olivia | Social Care @ Shopify
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit the Shopify Help Center or the Shopify Blog
Hi, where does the code go in the Debut theme?
Hey, @nhend88!
Depending on your theme version try line 233 of the footer.liquid for the Debut theme. You can insert text after this code:
<hr class="site-footer__hr">
That should work.
Warm regards,
Olivia | Social Care @ Shopify
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit the Shopify Help Center or the Shopify Blog
Hi Olivia,
I would be most grateful if you're able to advise how to include a location address and email contact at the footer of the following theme :-
Express - version 1.7.0
Ideally, I would want the text size, font and colour as represented by the text in the copyright section, so essentially the new information appears as another line underneath the copyright info.
Thanks in Advance !
Thanks for your question, @MSIP.
The Shopify Express theme uses sections for the footer with built-in options for custom text with styling in line with your theme. Instead of using code to add your desired information you would instead follow these steps:
That should do the trick.
Warm regards,
Olivia | Social Care @ Shopify
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit the Shopify Help Center or the Shopify Blog
You haven't answered my question
I'm sorry if there's any confusion, @MSIP.
If you follow the steps I wrote out above that will let you add custom text to your footer. If you're looking for a placement different from what your sectioned theme allows then our in-house design team might be able to assist with your request.
Contact our 24/7 Support team to check if you're eligible for design support. To learn about customizations that Shopify doesn't support, see our design policy.
Warm regards,
Olivia | Social Care @ Shopify
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit the Shopify Help Center or the Shopify Blog
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024