How to develop a floating email icon in Shopify

Are you looking to develop a floating email icon in your Shopify store? Then no need to worry anymore. This post will help you to integrate the floating email icon in Shopify. You just need to follow the instructions provided below.

1. Log in to your Shopify admin panel.
2. From the sidebar, navigate to “Online Store” and select “Themes.”
3. In the Themes section, click on the Three dots button for your active theme, and then choose “Edit code.”
4. In the code editor, locate the “sections” direction and create a section with the name of the “floating-email” Then paste the below code inside that section.

<style>
  .new-whatsapp{
	position:fixed;
	width:60px;
	height:60px;
	bottom:40px;
	right:40px;
	background-color:{{ section.settings.icon_bg}};
	color:#FFF;
	border-radius:50px;
	text-align:center;
  font-size:30px;
	box-shadow: 2px 2px 3px #999;
  z-index:100;
      display: flex;
    align-items: center;
    justify-content: center;
}

  .new-whatsapp svg{
    width:40px;
  }
.new-float{
  height:50px;
  width:50px;
}

@media(max-width:768px){
  .new-whatsapp {
    position: fixed;
    width: 50px;
    height: 50px;
    bottom: 20px;
    right: 20px;
  }
}
</style>
{% if section.settings.show_email %}
<a href="{{ section.settings.put_email }}" class="new-whatsapp" target="_blank">
  
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M32,56H224a0,0,0,0,1,0,0V192a8,8,0,0,1-8,8H40a8,8,0,0,1-8-8V56A0,0,0,0,1,32,56Z" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/><polyline points="224 56 128 144 32 56" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/></svg>
</a>
  {% endif %}
{% schema %}
  {
    "name": "Floating Email Icon",
    "settings": [
      {
  "type": "checkbox",
  "id": "show_email",
  "label": "Show Email Icon",
  "default": true
},
      {
  "type": "text",
  "id": "put_email",
  "label": "Please Enter Your Email"
},   {
  "type": "color",
  "id": "icon_bg",
  "label": "Icon Bg",
        "default":"#000"
}
      


    ]
  }
{% endschema %}

5. Then locate the “layout” directory and open “theme.liquid” Scroll down until you find the </body> tag.

6. Above </body> tag write this code {% section ‘floating-email’ %} and save changes.

7. Now take a preview and you are done.