Magento 2. Sticky Add to Cart button.

by Peter D.

The “Sticky add to cart' bar is available for all Argento themes. We enabled it by default for the Argento Force theme. When it comes to other designs, please use our instructions to enable/disable the sticky component.

Magento 2 Sticky Add to Cart button makes this powerful call to action button always visible. Whenever users scroll, they can still see the title of the chosen product, price, and image along with the button in the viewport. So they can add the product instantly without scrolling back and searching the Add to Cart button again on the product page. The feature provides customers with a nice and easy shopping experience.

There are two ways to enable the sticky Add to Cart.

The first one is for a custom theme. Before adding the Sticky component, make sure you already created a custom theme based on one of Argento themes. Argento theme must have version 1.13.0 or above. The second one is via Theme Editor. Choose the most suitable way for you.

Enable Sticky Add To Cart for Magento 2 custom theme

You have to create a view.xml file at the directory ETC of your custom theme with the following content:


<?xml version="1.0"?>
<view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/view.xsd">
    <!-- settings go here -->
</view>

In case your theme has such a file, please add settings to view.xml. Insert them before closing the‘ view’ node ().


<vars module="Argento_Theme">
    <var name="sticky_add_to_cart">
        <var name="enabled">1</var>
    </var>
</vars>

Save file. Clear Magento Cache.

Now customers can see the always visible cart bar.

magento 2 sticky add to cart

Disable Sticky Add To Cart button

If you want to disable the sticky button, please follow the steps described above. But you have to set the value enabled as 0 in the sticky_add_to_cart node.

Please pay attention to some additional options. You can set them for the sticky button via view.xml if you need it.

  • offset_top - offset from window top in pixels when the button is stuck. It is useful if your store has a sticky menu.
  • media - media query rule. It specifies when the Add to cart button can stick.

Enable Sticky Add To Cart via Theme Editor

All Argento themes include Theme Editor. With a Product Page Builder, as a part of the editor, you can change the layout of the product detail page.

First, you have to go Swissup - Theme editor and select a required template. Then in the set of options for Product Page Builder, you will see the Additional tab.

magento 2 sticky add to cart

All you need is to set Yes in the Sticky add to cart field.

Recent articles