Create Sticky Clever Buttons on Shopify

Table of Contents
You are here:

Sticky Clever Buttons are call-to-action buttons that respond to the current state of the user. It can show add to cart (ATC) & buy now buttons, go to cart messages, and so on, as well as promoting discounts and special offerings. They are built to motivate users to take the most optimal action at a given point in time. To learn more about clever buttons, check the Clever buttons widget page.

This tutorial covers everything you need to know in order to create Clever buttons on Shopify with just a few clicks. No coding required.

The Basics

  1. If you haven’t already, install the Juvico app.
  2. Click the “Clever Button” button through the Juvico app console, to create a clever button campaign.
  3. In the “Name” field, enter the name for your campaign.

Customize Button Style

The look and feel of a button can be based on one of the available themes, or specific colors you can choose.

  1. Choose a button position to determine where should the button is located on the screen.
  2. Choose one of the button themes, or select a background color and text color.
  3. Select the font that best suits your shop look and feel.

All changes in your buttons are reflected in the preview panel hovering at the bottom of the page, as seen here. You can shift between user states to understand how your button will behave in different states and circumstances.

User State and Button Actions

Clever buttons are responsive to the state of the customer at any given time. The widget identifies the current state of the user and presents the appropriate button promoting the optimal actions the user should take. The states are:

  1. Default Behavior – the state is true for cases where the user has nothing in their carts, and are not viewing a product page.
  2. Cart is Full – when the user cart has at least one item.
  3. Product page – true when the user is viewing a product page.

For each state, you can customize behavior, look and feel of the button, and the type of call-to-action promoted by the button.

Note, that for each state, you can define a "default" value, that will fallback on the previous state. For example, if you choose "default" behavior for when the cart is full, even if the cart is full, the "product page" state will take place when on product pages.

Default Behavior

  1. In the Behavior field, choose one of the following actions:
    1. None – The button won’t be active on-page unless other states take precedent.
    2. Promotion Code / Discount – You can present promotions and special discounts on your shop using a dedicated sticky button. By doing this, you will easily attract the user’s attention to your promotions, without disrupting their browsing experience.
      Note – that the app only allows you to use discounts created through the Juvico app. Discounts you created directly on Shopify are not visible to the app, and therefore cannot be used.
      1. If you already created a discount through Juvico, you can select it from the Discount Code dropbox. Otherwise, click on the “add new discounts & promotion” link at the bottom and add a discount.
      2. The “discount button text” content can be adjusted to reflect your unique message. It is recommended to use emojis to enhance your messages.
        If both text boxes contain text, the button will be animated, and show both messages running in a loop. Otherwise, there will be no animation and only the first text will appear.

If the Shopping Cart is Full

If the user has at least one item in their cart, you can motivate the user with one of the following call-to-actions:

  1. Instant Cart – When the user is clicking the button, an on-page mini-cart will appear and allow the customer to view and edit their cart, or to quickly proceed to checkout.
    1. If you enable the “Cart recommendations“, a small product carousel will appear in the cart. It will be showcasing a few items the customer is likely to purchase, based on their cart contents. This is a highly useful way to upsell to customers before they reach the checkout.
  2. Go to Cart – when clicked, the user will go directly to the shopping cart page.
  3. Go to Checkout – when clicked, the user will go directly to checkout.
  4. Default – if selected, no special action will be taken in case there is an item in the cart.

When Viewing Product Pages

When the user is viewing a product page, you can choose to show “add to buy buttons” to allow users to add an item to the shopping cart, or “buy now buttons” that will take the user directly to the checkout page. Choose an action for when the user is viewing a product page:

  1. Add to cart – allow the customer to add the item to the shopping cart. If the product has more than one variation, the user will be able to select the one that suits him the most.
  2. Buy Now – allows the customer to instantly buy the product and proceed to checkout.
  3. Add to cart & Buy Now – will present both buttons in one button, side by side.
  4. Default – the state of the “product page” will be ignored.

Note that the user will be able to choose product variations, before adding an item to the cart, or to buy now and proceed to checkout.