*RESOLVED * Jumpstart Theme - Adding Social Icons to Announcement Bar?

Highlighted
Shopify Partner
13 0 0

Hi all,

I'm working on a store for a client right now who requested to have social media icon links in the announcement bar on the left side. Is this even possible? Or does somebody know where/what code to input to have the social icons appear between the logo and nav links in the header menu bar? Please let me know, thank you.

0 Likes
Explorer
83 0 25

Hi there,

It's certainly possible to do this however since the option isn't already available there will be multiple steps to get this up there and there are certain consequences as well. For example, if your message is long there will be overlaps in mobile. There are a couple ways around that like hiding the buttons on mobile, floating the message to the right and truncating it when it reaches a certain character count, turning the share options into a dropdown button (kinda like the menu) and the list goes on. Below is the option where it hides on mobile, you can customize it any way you'd like. In your themes code follow the steps below.

 

Navigate to Sections > header.liiquid and find the code below:

.announcement-bar__message {
  color: {{ section.settings.announcement_color_text }};
}

Right under this paste the following:

/* Announcement Social Sharing */
.announce_social {
  left:0px;
  position:absolute;
}
.page___sharing {
  margin-top: 20px;
}
.page___sharing li {
  float: left;
  margin: 0 10px;
}
.page___sharing li:first-child {
  margin-left: 0;
  position: relative;
  top: -6px;
}
.page___sharing li a {
  display: block;
  margin-top: -8px;
}
.page___sharing li a svg * {
  fill: {{ section.settings.announcement_color_text }};
}
.page___sharing li a:hover svg * {
  {% if brightness <= 192 %}
    {% assign lightenAmount = 255 | minus: brightness | divided_by: 255 | times: 16 %}
    background-color: {{ section.settings.announcement_color_bg | color_lighten: lightenAmount }};
  {% else %}
    {% assign darkenAmount = 255 | divided_by: brightness | times: 8 %}
    background-color: {{ section.settings.announcement_color_bg | color_darken: darkenAmount }};
  {% endif %}
}
.page___sharing li a svg.google path {
  fill: {{ section.settings.announcement_color_bg }} !important;
}
.svg.asocial {
  width: 22px;
  height: 22px;
  margin-top:5px;
}
.col-item-9 {
  float: left;
}
@media (max-width: 517px) {
  .col-item-9 {
    visibility:hidden;
  }
}
@media (min-width: 518px) {
  .col-item-9 {
    visibility:visible;
  }
}
/* Announcement Social Sharing End */

In the same file find this code:

<div class="announcement-bar">

Paste this right under:

{% if section.settings.show_announcement_social %}
  <span class="announce_social col-item-9">{% include 'announce_share' %}</span>
{% endif %}

Scroll down to where the schema is and find this code and paste the code below right under it:

{
  "type": "checkbox",
  "id": "home_page_only",
  "label": "Home page only",
  "default": true
},

Paste this under the code above:

{
  "type": "checkbox",
  "id": "show_announcement_social",
  "label": "Show social buttons",
  "default": false
},

 

In your snippets create a new file named "announce_share.liquid" and paste this:

{% if template.name == 'article' %}

  {% capture share_link %}{{ shop.url }}{{ article.url }}{% endcapture %}
  {% capture share_title %}{{ article.title | url_param_escape }}{% endcapture %}
  {% if article.image %}
    {% capture share_img %}{{ article.image.src | img_url: '1024x1024' }}{% endcapture %}
  {% endif %}

{% elsif template.name == 'product' %}

  {% capture share_link %}{{ shop.url }}{{ product.url }}{% endcapture %}
  {% capture share_title %}{{ product.title | url_param_escape }}{% endcapture %}
  {% capture share_img %}{{ product.featured_image | product_img_url: '1024x1024' }}{% endcapture %}

{% elsif template.name == 'index' %}

  {% capture share_link %}{{ shop.url }}{{ product.url }}{% endcapture %}
  {% capture share_title %}{{ product.title | url_param_escape }}{% endcapture %}
  {% capture share_img %}{{ product.featured_image | product_img_url: '1024x1024' }}{% endcapture %}

{% elsif template.name == 'password' %}

  {% capture share_link %}{{ shop.url }}{% endcapture %}
  {% capture share_title %}{% unless shop.metafields.global.description_tag == blank %}{{ shop.metafields.global.description_tag | url_param_escape }}{% else %}{{ shop.name | url_param_escape }}{% endunless %}{% endcapture %}
  {% assign share_img = '' %}

{% endif %}

<ul class="page___sharing">

  <li>
    <a class="share-on-facebook" target="_blank" href="//www.facebook.com/sharer.php?u={{ share_link }}">
      <span aria-hidden="true">{% include 'asset_svg' with 'afacebook' %}</span>
      <span class="fallback-text">{{ 'general.sharing.social_sharing.facebook' | t }}</span>
    </a>
  </li>

  <li>
    <a class="share-on-twitter" target="_blank" href="//twitter.com/share?text={{ share_title }}&amp;url={{ share_link }}">
      <span aria-hidden="true">{% include 'asset_svg' with 'twitter' %}</span>
      <span class="fallback-text">{{ 'general.sharing.social_sharing.twitter' | t }}</span>
    </a>
  </li>

  <li>
    <a class="share-on-google" target="_blank" href="//plus.google.com/share?url={{ share_link }}">
      <span aria-hidden="true">{% include 'asset_svg' with 'google_plus' %}</span>
      <span class="fallback-text">{{ 'general.sharing.social_sharing.google' | t }}</span>
    </a>
  </li>

  {% unless share_img == blank %}
    <li>
      <a class="share-on-pinterest" target="_blank" href="http://pinterest.com/pin/create/button/?url={{ share_link }}&amp;media={{ share_img }}&amp;description={{ share_title }}">
        <span aria-hidden="true">{% include 'asset_svg' with 'pinterest' %}</span>
        <span class="fallback-text">{{ 'general.sharing.social_sharing.pinterest' | t }}</span>
      </a>
    </li>
  {% endunless %}

</ul>

In your snippets find asset_svg.liquid and paste the code just above the "{% endif %}" statement

{% elsif icon_name == 'afacebook' %}
	<svg class="svg asocial" xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="24" height="24" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"><path d="M15.4 4h2.6v-4h-3.3v0c-4.4 0.2-5.6 2.6-5.7 5.2H9v2.8h-3v4h3v12H14v-12h3l0.7-4H14V5.5C14 4.6 14.6 4 15.4 4z"/></svg>

 

I hope this helps!

2 Likes
Highlighted
Shopify Partner
13 0 0

Thank you Nick for the response and well written instructions! This worked except for one small detail. The only four social buttons that appear are Facebook, Twitter, Pinterest and Google+. The client does not use Pinterest or Google+, can we change these to show instagram, linked in and an email icon?


EDIT: Nevermind, I figured it out :)

0 Likes
Highlighted
New Member
1 0 0

Good afternoon Sir,

 

Would this also apply to the Debut Theme? I got as far as your last step "snippets find asset_svg.liquid" but the Debut Theme does not have an asset_svg.liquid file. I have looked hard and it is not where to be found.

 

Please help. Thank you.

0 Likes