You use Shopify to sell music products? How to make your "Add to Cart" button more visible without having to install a new app? Follow this tutorial and you can customize this button as you wish

Many online sales specialists advise us to highlight this beloved “Add to Cart” button on our product pages, and they are quite right, it's one of the basic optimization any Shopify music store should have.

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 with its TrustRank. 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.

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>
  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. But personally a shake effect on the "add to cart" button bothers me!

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

Do not hesitate to contact me for any questions on how to optimize web stores.