Solved

Adding address and number number to footer - Narrative theme

Trulines87
Tourist
8 0 2

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!

Accepted Solution (1)

Olivia
Shopify Staff
1698 146 305

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:

08-26-ndww6-2kmgo

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

View solution in original post

Replies 17 (17)

Olivia
Shopify Staff
1698 146 305

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:

08-26-ndww6-2kmgo

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

Trulines87
Tourist
8 0 2

Incredibly helpful, thank you very much! 

Olivia
Shopify Staff
1698 146 305

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

MichaelCharles
Visitor
1 0 0

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!

Olivia
Shopify Staff
1698 146 305

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:

  1. Head to Admin > Online Store > Themes > Boundless > Edit Code > Sections > footer.liquid
  2. Find this piece of code on line 4:
    {% endcomment %}​
  3. Without altering this, hit enter after this line to create a blank space on line 5
  4. Now line 5 should be empty, paste the code below:
     <center><p> Add your contact info </p></center>​
  5. Don't forget to replace the text with your contact info and save.

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

ShyamKawshal
Visitor
2 0 2

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.

Olivia
Shopify Staff
1698 146 305

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

ShyamKawshal
Visitor
2 0 2

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 🙂

Olivia
Shopify Staff
1698 146 305

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

PetlyNaid
Visitor
1 0 1

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

Olivia
Shopify Staff
1698 146 305

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:

  • the edited code
  • how it appears on the front-end of your site

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

nhend88
Visitor
1 0 0

Hi, where does the code go in the Debut theme?

Olivia
Shopify Staff
1698 146 305

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

MSIP
Visitor
2 0 0

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 !

 

 

 

 

 

Olivia
Shopify Staff
1698 146 305

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:

  1. Head to Admin > Online Store > Themes > Express > Customize
  2. Under Home Page > open Footer > content > add content > text
  3. Add your desired text and hit save

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

MSIP
Visitor
2 0 0

You haven't answered my question

Olivia
Shopify Staff
1698 146 305

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.


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