TUTORIAL – Available Icon for Shopify Product Page with LIQUID & CSS 

Illustration by Insight Bundle in collaboration with OpenAI Dall·E

Introduction

You can preview how the icon looks in this link. Also you can clone the code of our Github Repository.

Here's a simple modification you can make to improve your product page. In a couple minutes, you can boost conversions by reassuring customers that your product is currently available and creating an overall impression that your store is dynamic and regularly updated. 

Image: Available Icon in the product page. (at the top)

Summary

This is a straightforward technique, you just need the insert custom code on your page with the custom liquid block on your product page. This snippet will work in every free Shopify template, this tutorial is donde using a Dawn theme-based template.

Steps

Look for this option in your theme editor when you click "Add Block."

For optimal aesthetics, it's recommended to use a block (positioned to the right of the product images) rather than a full-width section. Just click "Add Block" and effortlessly paste the provided code.  

1

Image. Custom Liquid block.

Copy-Paste it

This code goes in the custom liquid section on your product page: 

2

{% if product.available %}

<div class="instock_ready"> 
    <span class="icon--ready"></span> 
    <span>Available, ready to ship</span> 
  </div> 
  <style> 
    .instock_ready { 
      display: flex; 
      flex-wrap: nowrap; 
      align-items: center; 
    } 
    .icon--ready { 
      position: relative; 
      width: 20px; 
      height: 20px; 
      margin-right: 10px; 
    } 
    .icon--ready:after,  .icon--ready:before { 
        background: #65b18b; 
        width: 10px; 
        height: 10px; 
        border-radius: 10px; 
        position: absolute; 
        left: 0; 
        top: 0; 
        content: ""; 
        margin: 5px; 
    } 
    @keyframes inventory-pulse{ 
      0%{ 
        opacity:0.5; 
      } 
      to{ 
        transform:scale(3.5); 
        opacity:0; 
      } 
    } 
    .icon--ready:before { 
        animation: inventory-pulse 2s linear infinite; 
    } 
  </style> 

  {% endif %}

Customize to your taste.

You can change the color of your icon by changing the hex code in the background: #65b18b; line.

This code also works in every website, just remove the {% if %} conditionals of the beginning and the end.

3

Available, ready to ship

Code Explanation

First off, we use a liquid conditional to pull data from the inventory to check if the current product page is in stock. If there is no stock, this icon will not appear. 

We created a div element with the class "instock_ready" containing two child elements: a span element with the class "icon--ready" and another span with the text "Available, ready to ship". 

We styled the elements to display the animation. It sets the layout for the "instock_ready" class using flexbox to align the child elements. The "icon--ready" class defines the size and position of the vibrating icon using absolute positioning. It also defines the vibrating animation using keyframes to create a visual vibration effect on the icon. 

Conclusion

Overall, we are creating a visual representation of a vibrating icon along with text to show that the product is in stock and ready to ship, providing a clear and eye-catching indicator for the user. 

Previous

Tutorial - Using Zapier, how to connect Calendly with Salesforce and Monday
Next

Tutorial - How to Build an Effective Email Campaign with Mailchimp