Why use Sticky Add to Cart on Shopify?
shopify-trial-fuznet

Why use a Sticky Add to Cart on Shopify?

2 comments

What is a sticky Add to Cart button?

The sticky add to cart button (also called sticky add to cart) is a bar stuck at the bottom or top of the web page of an e-commerce site. It follows the navigation of the visitor and offers at any time to add the visited product to the basket.



Benefits of using a sticky add to cart button

The buy button is always visible

When you embed a sticky add to cart button on your Shopify product page, the buy button is always visible to visitors. Even when they are scrolling down the web page, they can access the product purchase at any time without scrolling the whole page up.

Important product information always displayed

Un Sticky add to cart displays the most important elements of a product no matter where you are on the page: name, price, available variants. This improves the user experience who does not have to go all the way up to check this information and can therefore read the description and consult the customer reviews without interruption.

How to add a sticky add to cart button on Shopify?

Method 1: by code

Click here if you don't want to venture into code and move on to a simpler method.

  • Since your Shopify admin interface, go to Online Shop > Topics: .
  • Find the theme you want to edit, then click Actions > Edit Code.
  • In the directory snippets, click on Add a new snippet and call him sticky-atc-fuznet.

atc-snippet

Then add these lines of code:

{% if template contains 'product' %}



{% for variant in product.variants %}
{{variant.title}}
{% endfor%}


Add to Cart
</form>
</div>

#sticky-atc-fuznet{
display: flex;
justify-content: center;
position: fixed;
bottom: 0;
width: 100%;
z-index: 9999;
background: #fff;
padding-top: 5px;
border-top: 1px solid #e2e2e2;
}
#sticky-atc-fuznet select,
#sticky-atc-fuznet input,
#sticky-atc-fuznet-button{
height: 40px;
margin:0px;
vertical-align: middle;
}
#sticky-atc-fuznet input{
width: 60px;
text-align: center;
}
#sticky-atc-fuznet-button{
padding: 0 10px;
}

{% endif%}

Now go back to theme.liquid and find the beacon (at the bottom).

Paste this code just above: {% include 'sticky-atc-fuznet' %}

body tag

Method 2: with an app

If you don't feel like taking risks by touching your theme's code or if the previous solution doesn't work on your current theme, the easiest way is to use our app ATClone.

Indeed our application allows to add 2 things:

  • A second add to cart button wherever you want on the product page.
  • A sticky button on the product page.

Add a 2nd "Add to cart" button on your products.

Back to blog
shopify-trial-fuznet

2 comments

great work

ahmad

nice blog

jaz

Leave comments

Veuillez noter que les commentaires doivent être approuvés avant d'être publiés.

1 de 2