Adding Whatsapp icon footer list publisher theme

[CNB]

Hello,

I want to add a whatsapp icon with a link associated to it to redirect to whatsapp .
I'm having some trouble adding it on the publisher theme

Can someone explain how to do it ?

[galaxy_k]

Hello, I was also wondering the same thing, and with a little trial and error, plus some help from a previous post, I worked out how to do it for the ‘Spotlight’ theme. Maybe the same method will work on another Shopify 2.0 theme.

1. Go to Admin > Themes > Edit Code (from expanding the ... menu)
2. Scroll to the Snippets folder and add a new snippet called 'icon-whatsapp.liquid'
3. In this file, paste the svg code for any WhatsApp icon you want to use. I used one from Font Awesome.
4. In the <svg> tag, add 

aria-hidden="false" focusable="true" class="icon icon-whatsapp"

• Now, scroll to the 'social-icons.liquid'  file under the Snippets folder.
• Just before the end of the <ul> list, add a <li> element like so:

<li class="list-social__item">

    <a href="INSERT YOUR WHATSAPP LINK HERE" class="link list-social__link">

      {%- render 'icon-whatsapp' -%}

    </a>

  </li>

Finally, click save and preview to see whether it worked! I hope it does - fingers crossed. 😊

Here's how mine looked.

[leogalvan28]

<a href="{{ section.settings.link_whatsapp   }}" class="whatsapp-icon"><img src="{{ section.settings.imagen_whatsapp |  image_url }}" alt="whatsapp"></a>
{% style %}
 
   .whatsapp-icon img{
         width:{{ section.settings.size_img_whatsapp }}px;
        
   }
{% endstyle %}
{% if section.settings.alineacion_horizontal == 'left' %}
      <style>
         .whatsapp-icon{
             position: fixed;
             left: 1%;
             padding:10px;
             z-index:10;
             bottom: {{ section.settings.alineacion_horizontal_img_whatsapp }}%;
         }
      </style>
     
{% endif %}

{% if section.settings.alineacion_horizontal == 'right' %}
    <style>
        .whatsapp-icon{
            position: fixed;
            right: 1%;
            bottom: 50%;
            padding:10px;
             z-index:10;
             bottom: {{ section.settings.alineacion_horizontal_img_whatsapp }}%;
        }
    </style>
    
{% endif %}






{% schema %}
{
    "name": "whatsapp",
    "settings": [
           {
            "type": "image_picker",
             "id":"imagen_whatsapp",
             "label":"ingresa la imagen de whatsapp"
           },
           {
            "type":"url",
            "id":"link_whatsapp",
            "label":"Ingresa el link de whatsapp"
           },
           {
            "type":"range",
            "id": "size_img_whatsapp",
            "label": "Ingresa el tamaño para el icono de whatsapp",
            "min":16,
            "max": 100,
            "unit": "px",
            "default": 18  
           },
        {
        "type": "select",
        "id": "alineacion_horizontal",
        "label": "Alineacion Horizontal",
        "options": [
        
        {
        "value": "left",
        "label": "left"
        },
        {
        "value": "right",
        "label": "right"
        }
        ],
        "default": "left"
        },
        {
            "type":"range",
            "id": "alineacion_horizontal_img_whatsapp",
            "label": "Ingresa la alineacion del icono de whatsapp",
            "min":5,
            "max": 50,
            "unit": "%",
            "default": 5 
        }
        ],
        "presets": [
            {
                "name":"whatsapp"
            }
        ]
}
{% endschema %}

Hola solo crea un archivo en la carpeta sections de tu tema, puedes nombrarlo whatsapp-icon.liquid , esto hara que lo puedas utilizar en cualquier template del tema , incluso con diferentes url de whatsapp, ya trae controles para el tamaño del icono posicionamiento del icono y agregar la url de whatsapp a la que va apuntar 🙂

[adamskan12]

Hey,

 I have the Previous Post method on my Shopify store but it is not working for me. Can someone please check it and guide me. I want to integrate it in my Shopify website. 

https://community.shopify.com/c/technical-q-a/how-to-add-a-whatsapp-icon-to-a-november-theme-footer/

I want to add it in footer. 

Thanks & Regards