Make the “Add to Cart” button stand-out in Shopify without any App

Published: Thu 13 September 2018 by L.Drolez In Marketing

tags: shopify css marketing

Translations: fr

Many online sales specialists advise us to highlight this beloved “Add to Cart” button on our product pages.

For Shopify many extensions for doing this exist, but as you know, the more extensions you add, the slower your site is, and the more Google penalizes your site in search results. For every second more that your site takes to load, you lose 10% of visitors, potential customers and conversions. Not to mention that some extensions are not free. Also Snapchat for Business, will reject your ads if your site takes more than 6 seconds to load. I advise you to use Google Pagespeed to check that Apps do not slow down your shop too much.

So let's see how to highlight this button, easily, by adding some HTML code in our templates, and have this “glow” effect. You can see the result on this shop.

add to cart button

For that we will edit the template "product-template.liquid" (if you use the Debut theme) and add the following text at the bottom of the template before the line "{% schema %}".

<script type='text/javascript'>
  window.onload = function () {
      $('head').append('<style>.pulse-primary {animation: pulse-primary 3s infinite;} \
      @-webkit-keyframes pulse-primary { \
        0% { -webkit-box-shadow: 0px 0px 16px 5px rgba(0, 170, 255, .8); color: rgba(255, 255, 255, 1); } \
        85% { -webkit-box-shadow: 0px 0px 16px 5px rgba(0, 170, 255, 0);} \
        100% { -webkit-box-shadow: 0px 0px 16px 5px rgba(0, 170, 255, .8); color: rgba(255, 255, 255, 1); } }\
      @keyframes pulse-primary { \
        0% { -moz-box-shadow: 0px 0px 16px 5px rgba(0, 170, 255, .8); box-shadow: 0px 0px 16px 5px rgba(0, 170, 255, .8); color: rgba(255, 255, 255, 1); }\
        85% { -moz-box-shadow: 0px 0px 16px 5px rgba(0, 170, 255, 0); box-shadow: 0px 0px 16px 5px rgba(0, 170, 255, 0); }\
        100% { -moz-box-shadow: 0px 0px 16px 5px rgba(0, 170, 255, .8); box-shadow: 0px 0px 16px 5px rgba(0, 170, 255, .8); color: rgba(255, 255, 255, 1); }}</style>');
      $('#AddToCart-product-template').addClass('pulse-primary');
   }
</script>

You can of course change the speed and color of the glow as you want.

  • The flashing speed of 3 seconds is defined by the "pulse-primary 3s" keywords,
  • and the colors of the animation by the values after "rgba(".

For more information, take a look at CSS animations guides, for example to have rotation, shake or zoom effect on the button.

In the end, we get a result similar to an App, and this without slowing down our Shopify Shop ;)

Do not hesitate to contact me for any questions here.

LD. --

Comment below