Create a sticky ‘Add to cart’ button for Shopify

With the Getsitecontrol app, you can add this button to your store and customize it with zero technical skills. You also won’t need to change the theme of your Shopify store or deal with the code.

The ‘Add to cart’ button remains within sight as your customers scroll down the product page and serves as a gentle nudge to help them follow through with the purchase.

In this tutorial, we’ll show you how to do it, step by step.

How to create a floating ‘Add to cart’ button for Shopify without coding

Before getting started, you may want to install Getsitecontrol on your website. Once you do that, follow the steps below.

Step 1. Add a button template to the Getsitecontrol dashboard

You’ll find plenty of button templates in the Getsitecontrol gallery. Select the one that looks appealing to you and matches the layout of your store.

You don’t have to settle for a standard sticky button: feel free to select a sticky bar or a button with an image as a template.

Step 2. Adjust the appearance of the button

Once you add a template to the dashboard, you can change its copy, design, and position. To change the position on a page, color theme, and font, use the Position and Theme menus at the top 👇

If you want to change the text on the button, click on it right in the preview window and type a different call to action. For example, depending on your scenario, you can type:

• Buy it now
• Buy now at 20% off
• Only 3 left – buy now

We’ll talk more about the additional settings for these scenarios in the next paragraphs.

Step 3. Assign the ‘Add to cart’ action to the button click

The next step is to assign the right action to the button click. Once you’re done with the appearance of the button, go back to the main screen and scroll down to Background click. Open the menu and remove the default ‘Open URL’ action. Then proceed to add a new action and select ‘Add to cart.’

Notice that the default option will add a product variant from the current page. This means that when a customer clicks on the button, the product variant they’re currently viewing — regardless of the product page they’re on — will be added to the cart.

💡 If you want to streamline the purchasing process, you can also redirect customers straight to the shopping cart or the checkout page upon button click.

Step 4. Adjust targeting settings

Finally, you want to make sure your sticky ‘Add to cart’ button only pops up on the product pages of your store. To implement this, open the Targeting tab, find ‘Include’ and remove the default value. Then hit + Add URL and select ‘Product pages’ from the menu.

Now the button will be visible to everyone who opens any product page in your store. However, if you want, you can display it only to those visiting from mobile devices or those who have scrolled a page a bit. Toggle the Targeting controls to see what your options are.

What if an item is out of stock?

If a customer selects a product variant that has been sold out, it makes sense for the ‘Add to cart’ button to disappear as well. This is what it will look like 👇

To recreate this scenario in your store, you need to set one more targeting condition. Scroll down to Show widget to visitors if and add a new filter: Variant is available. Voila!

Step 5. Activate the button in your store

At this point, your floating ‘Add to cart’ button for Shopify is ready. Hit Save & close and activate it on the website. As soon as the button starts getting hits, you’ll be able to start tracking its performance using the Statistics report right in the Getsitecontrol dashboard.

You’ll be able to see the overall click-through rate as well as a detailed breakdown by page, device, and even screen resolution. Not only will it provide you with an insight into your customers’ shopping behavior, but it will also help you make informed decisions about your store optimization.

How to notify a customer that the item has been added to the cart

If you choose not to redirect customers after they hit the ‘Add to cart’ button, you may want to display a brief message to confirm that they’ve successfully added the item to the cart 👇

To create a notification like this one for your store, click on the template above and add it to your Getsitecontrol dashboard.

Then open the Targeting tab and select the following conditions:

• Include Product pages
• Start to display the widget if Product added to cart (remove the default ‘at once’ option)

This way, each time a customer adds an item to the shopping cart, the message will pop up and remain visible until they close it or move from the product page.

How to add an item with a discount on a button click

If you’re running a promo, you can feature it on the floating button as well. Chances are, a discount will encourage customers to click the button even sooner.

The settings for this scenario will be identical to what we’ve already described earlier. The only difference is that instead of one, you‘ll need to assign two actions to the button: ‘Add to cart’ and ‘Apply discount’ 👇

Keep in mind that Getsitecontrol merely pulls a discount code from your Shopify dashboard. This means you first need to create a discount in your store dashboard; only then will it pop up in the search field when you start setting up the floating button.

Want more ideas for promoting discount codes in your Shopify store? Check out this guide.

Floating ‘Add to cart’ button for Shopify may help you skyrocket sales

Floating ‘Add to cart’ buttons have proven their efficiency for ecommerce stores, and you’ll find plenty of dedicated apps in the Shopify App Store designed just for that. But why use 3^rd-party apps, when you can create such a button by yourself?

Should you have any questions, you can always reach us at help@getsitecontrol.com.