DAWN THEME: How do i put phone number and email address in annoucement bar?

Solved
SCHOIE1981
Excursionist
16 0 4

Hi.

 

im wanting to put my phone number and email address in announcement bar, do anyone know how i can do this?

 

kind regards,

Accepted Solution (1)
wmisback
Shopify Partner
31 6 26

This is an accepted solution.

Hello,

You can add links to your site's announcement bar by doing the following:

  1. Log in to your Shopify admin.
  2. Click on "Online Store" in the left-hand menu, and then click on "Themes."
  3. Find the theme you want to edit and click the '...' -> Edit Code
  4. Open your 'announcement.liquid' file in the Sections folder of your site's code
  5. Locate the following lines
 <p class="announcement-bar__message h5">
                {{ block.settings.text | escape }}
                {%- if block.settings.link != blank -%}
                  {% render 'icon-arrow' %}
                {%- endif -%}
              </p>

6. Remove the '| escape' from the {{ block.settings.text | escape}} line. It should now look like:

<p class="announcement-bar__message h5">
                {{ block.settings.text }}
                {%- if block.settings.link != blank -%}
                  {% render 'icon-arrow' %}
                {%- endif -%}
              </p>

7. Save the changes

8. Back in the theme customizer on your announcement bar's text settings enter the following

Welcome to our store! <a href="tel:1234567890">Call us!</a> <a href="mailto:example@example.com">Email us!</a>

9. The a tags can now be wrapped around any text to create a link. tel: prefix lets the browser know it is  a phone number & mailto: let's the browser know it is an email. 

Check out my Shopify coding tutorials on YouTube
Need custom coding done? Get in touch: willmiswebdev@gmail.com

View solution in original post

Replies 5 (5)
wmisback
Shopify Partner
31 6 26

This is an accepted solution.

Hello,

You can add links to your site's announcement bar by doing the following:

  1. Log in to your Shopify admin.
  2. Click on "Online Store" in the left-hand menu, and then click on "Themes."
  3. Find the theme you want to edit and click the '...' -> Edit Code
  4. Open your 'announcement.liquid' file in the Sections folder of your site's code
  5. Locate the following lines
 <p class="announcement-bar__message h5">
                {{ block.settings.text | escape }}
                {%- if block.settings.link != blank -%}
                  {% render 'icon-arrow' %}
                {%- endif -%}
              </p>

6. Remove the '| escape' from the {{ block.settings.text | escape}} line. It should now look like:

<p class="announcement-bar__message h5">
                {{ block.settings.text }}
                {%- if block.settings.link != blank -%}
                  {% render 'icon-arrow' %}
                {%- endif -%}
              </p>

7. Save the changes

8. Back in the theme customizer on your announcement bar's text settings enter the following

Welcome to our store! <a href="tel:1234567890">Call us!</a> <a href="mailto:example@example.com">Email us!</a>

9. The a tags can now be wrapped around any text to create a link. tel: prefix lets the browser know it is  a phone number & mailto: let's the browser know it is an email. 

Check out my Shopify coding tutorials on YouTube
Need custom coding done? Get in touch: willmiswebdev@gmail.com
SCHOIE1981
Excursionist
16 0 4

Can I left justify it without it being a global setting for all announcements?

EcomGraduates
Shopify Partner
588 48 63

In the "Announcement message" field, type in your phone number and email address, like this:

For phone number: "Call us at: 123-456-7890"

For email address: "Email us at: info@example.com"

Click "Save" to save your changes.

You have a business to run. Let us handle the theme.
115+ ★★★★★ star reviews
Check Out Our New Theme -Ecomify
Do you need help building a brand?
SCHOIE1981
Excursionist
16 0 4

Ho ho ho

SCHOIE1981
Excursionist
16 0 4
Ho ho ho