Re: My Colors Changed in my share-buttons.liquid file

Solved

My Colors Changed in my share-buttons.liquid file

DarkHorse
Tourist
15 0 2

I changed the link color in my theme setting and so my icons that are usually white for the  share buttons are now green/teal like my theme.

I've tried to figure out how to make them white, but so far nothing.

Here's the theme code.

{% comment %}
  @Anonymous social_url {String}
    URL to share
 
  @Anonymous social_title {Object}
    If sending data to a service, description or title to share

  @Anonymous social_image {String|Boolean}
    If sending data to a service, URL of image to share, or false for no image
{% endcomment %}

{% assign share_url = social_url | url_param_escape %}
{% assign share_title = social_title | url_param_escape %}
{% assign share_image = false %}
{% if social_image %}
  {% assign share_image = social_image | url_param_escape %}
{% endif %}

<aside class="share-buttons" aria-label="{{ snippet_title | t }}">

  <span class="share-buttons--title">
    {{ snippet_title | t }}
  </span>


  
  <div class="share-buttons--list">
    <a
      class="share-buttons--button share-buttons--facebook"
      target="_blank"
      href="//www.facebook.com/sharer.php?u={{ share_url }}">
      {%-
        render 'social-icon',
        id: 'facebook'
      -%}
      <span class="visually-hidden">{{ 'general.accessibility.share_on_facebook' | t }}</span>
    </a>
    <a
      class="
        share-buttons--button
        share-buttons--x
      "
      target="_blank"
      href="//x.com/intent/tweet?url={{ share_url }}">
      {%-
        render 'social-icon',
        id: 'x',
      -%}
      <span class="visually-hidden">{{ 'general.accessibility.share_on_x' | t }}</span>
    </a>

    <a
      class="share-buttons--button share-buttons--linkedin"
      target="_blank"
      href="//www.linkedin.com/shareArticle?mini=true&url={{ share_url }}&title={{ share_title }}">
      {%-
        render 'social-icon',
        id: 'linkedin'
      -%}
      <span class="visually-hidden">{{ 'general.accessibility.share_on_linkedin' | t }}</span>
    </a>

    {% if share_image %}
      <a
        class="share-buttons--button share-buttons--pinterest"
        target="_blank"
        href="//pinterest.com/pin/create/button/?url={{ share_url }}&amp;media={{ share_image }}&amp;description={{ share_title }}">
        {%-
          render 'social-icon',
          id: 'pinterest'
        -%}
        <span class="visually-hidden">{{ 'general.accessibility.share_on_pinterest' | t }}</span>
      </a>
    {% endif %}
  </div>
</aside>

 

Accepted Solution (1)
ThePrimeWeb
Shopify Partner
2138 615 494

This is an accepted solution.

Add this to the CSS and it should be fine

.product-share path {
    color: #fff !important;
}
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

Replies 6 (6)

ThePrimeWeb
Shopify Partner
2138 615 494

Hey @DarkHorse,

Can I have the store link?

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
DarkHorse
Tourist
15 0 2

https://darkhorseworkshop.com/collections/bag-patterns/products/leather-satchel2

You can see the 4 icons are odd coloring.

Like Facebok, X, Pinterest, whatever.

ThePrimeWeb
Shopify Partner
2138 615 494

This is an accepted solution.

Add this to the CSS and it should be fine

.product-share path {
    color: #fff !important;
}
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
DarkHorse
Tourist
15 0 2

To that same file?

DarkHorse
Tourist
15 0 2

Added it to theme.css.liquid and it worked.

 

Appreciate it. 🙂

ThePrimeWeb
Shopify Partner
2138 615 494

Yeah sorry, couldn't reply you on time, glad you figured that part 😊

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!