How to create an animated Special Offer banner (GIF) on your Shopify product page

All customers like discounts and what better way to give one than to offer them a Special Offer. I am suggestion you to do that with an animated special offer banner that won’t go unnoticed 🙂 It will boost your turnover as you will sell more !

What does it look like ?

We will put the banner shown below under the “Add to cart” button of your Shopify product page. It is useful to add such a banner because the title is flashing to attract the customer’s attention. Moreover everything will be easily manageable 😉

You can see the animated example on this demo store : https://speed-ecom-tutorials.myshopify.com/products/product-1

Password : Speedecom

How to install the animated banner on your theme?

The CSS code

We will first install the code that defines the design of the animated box.

Go to Online Store – Actions – Edit Code – Assets – Find and open your xxx.scss.liquid file, usually it’s theme.scss.liquid, style.scss.liquid or timber.scss.liquid. Then go to the very bottom of the file and copy/paste the code below:

.dg-so-pulse { animation: dg-pulse 3s infinite ease-in; }
@keyframes dg-pulse { 20%, 100% { opacity: 1; } 0% { opacity: 0; } 10% { opacity: 1; } }   
.dg-special-offer { letter-spacing: 1px; font-style:italic; text-align:center; margin:10px 0; padding:3px; border-radius:5px; font-size:20px; width:100%; max-width:100%; }
.dg-so-wrapper { display:flex;  padding:15px 10px; border-radius:0 0 5px 5px; }
.dg-so-wrapper p { margin:5px 0; }
.dg-so-info-value { font-size:57px; line-height: 54px; font-weight: bold; }
.dg-so-info-text { line-height: 24px; position: relative;  text-align:left; padding-left:10px;}
.dg-so-info-text .dg-so-info-plus {  font-size:42px; font-weight: bold; position: relative; top: .35rem; display: inline-block; height: 2rem;}
.dg-so-title { font-size: 32px;  border-radius:5px 5px 0 0; padding:5px 3px; display:block; font-weight: bold; }
@media screen and (max-width: 500px) {
  .dg-so-info-value { font-size:35px; }
  .dg-so-info-text { font-size:18px; }
}

The HTML & Javascript code

Let’s now move on to the implementation of the features and the content of the special offer banner that will be shown on your shopify product pages.

Go to Online Store – Actions – Edit Code – Sections – Find a product-template.liquid file and open it. If you don’t have one try to look in Templates – product.liquid. At this point you will have to find the location of your choice. You should typically add this banner right after the “Add to cart” button. To do this you will press Ctrl + F or CMD + F to find the following code in the search bar: {% endform %}. On Speedfly or Turbo you will find it in Snipppets – product-form-1.liquid or product-form.liquid. After that, all you have to do is copy/paste the code below:

<div class="dg-special-offer">
  <strong class="dg-so-title dg-so-pulse">SPECIAL OFFER</strong>
  <div class="dg-so-wrapper">
    <div class="dg-so-info-value">-30%</div>
    <div class="dg-so-info-text"><span class="dg-so-info-text-1"> OFF</span><br />
      <span class="dg-so-info-plus">+</span><span class="dg-so-info-text-2">  FREE SHIPPING</span></div> 
  </div>
</div>

<script>
  /* text and color customization */
  let OfferTittle = "SPECIAL OFFER!";
  let OfferDiscount = "-30%";
  let OfferText1 = "OFF";
  let OfferText2 = " FREE SHIPPING";

  let BGcolor = "#333333";
  let Textcolor = "#FFFFFF";
  let TitleBGcolor = "#FF8900";
  let Titlecolor = "#FFFFFF";
  let Discountcolor = "#c5e80c";
  let Pluscolor = "#FF8900";

  function insertDom(elem,text) {
    document.querySelector(elem).textContent = text;
  }
  insertDom(".dg-so-title",OfferTittle);
  insertDom(".dg-so-info-value",OfferDiscount);
  insertDom(".dg-so-info-text-1",OfferText1);
  insertDom(".dg-so-info-text-2",OfferText2);

document.querySelector(".dg-so-wrapper").style.backgroundColor = BGcolor;
document.querySelector(".dg-special-offer").style.color = Textcolor;
document.querySelector(".dg-so-title").style.color = Titlecolor;          
document.querySelector(".dg-special-offer").style.backgroundColor = TitleBGcolor;
document.querySelector(".dg-so-info-value ").style.color = Discountcolor;
document.querySelector(".dg-so-info-plus").style.color = Pluscolor;

</script>

How to modify texts and colors?

You want to customize the offer with your own text and change the colors so that they blend in perfectly with your store? Well it’s easy because I’ve got it all planned 🙂

Indeed I have added specific details that are intuitive to understand! It is thus in this part of the code where you will be able to make your changes to the contents and the design of the banner:

<script>
  /* text and color customization */
  let OfferTittle = "SPECIAL OFFER !";
  let OfferDiscount = "-30%";
  let OfferText1 = "OFF";
  let OfferText2 = " FREE SHIPPING";

  let BGcolor = "#333333";
  let Textcolor = "#FFFFFF";
  let TitleBGcolor = "#FF8900";
  let Titlecolor = "#FFFFFF";
  let Discountcolor = "#c5e80c";
  let Pluscolor = "#FF8900";

I won’t give you a long explanation as it’s fairly straight forward 😉

Note that to change the colors you will have to find the hexadecimal codes of the colors! For that you can look up on Google “hexadecimal color generator”.

Be careful! You must keep the quotation marks before and such details untouched so as not to break the code ;

I also want to remind you that everything is done in code. This is not an animated image/a real GIF which means that you will not have any performance issues.

This tutorial is also available in video format

Hope you found this tutorial helpful !

You have any ideas for new tutorials ? Any questions about this one ? Leave me a comment 😉

Share this article

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on telegram
Share on whatsapp
Share on email

Leave a Reply

Your email address will not be published. Required fields are marked *