Design and button text

The Design page sets what Sticky and Quick Cart does on your storefront. It opens with the two things most stores change: the Look and Quick add on product cards. Everything else (quick add options, what happens after an add, the sticky bar, the cart bar on other pages and the banner) is under More options. There is no visual editor to fiddle with: everything uses your theme's font and page colours, so it looks like part of your store from the start. Changes reach your storefront as soon as you click Save in the save bar; the page stays on Design and confirms the save.

You do not need to visit Design before going live: new installs start with your theme's look, quick add on, and your theme's own behaviour after an add (its cart drawer, its cart popup or its cart page).

Look

• Button colour - Match my theme's add-to-cart button copies your theme's button colour, or Use my own colour applies the Accent colour you pick. The button text turns black or white to stay readable.
• Corners - match your theme's buttons, or choose square, rounded or pill.

The accent colour is used for the add-to-cart buttons, the quick add buttons, the floating cart icon and the banner. Everything else follows your theme.

Next to these fields, a small Preview shows a product card with the quick add button and the floating bar, and follows the colour and corners as you change them. See it on my store opens a product page of your store in a new tab.

If you set custom colours before this page was simplified, your old button colour became the accent colour and your old corner setting became the corners, so your storefront looks the same.

Quick add on product cards

Show quick add buttons on product cards works on every plan. On Free the + button adds one-variant products and opens the product page for the rest; Pro adds the option picker, the added-to-cart popup and More options > Quick add options. See Quick add and theme compatibility.

Sticky bar

Under More options. The sticky bar is always a floating, centred bar with rounded corners at the bottom of the screen, on desktop and on phones. It shows the product image, title and price (or the bundle the shopper picked), and on desktop the options and quantity.

• Display style - show the bar once the shopper scrolls past your theme's add-to-cart button, or keep it always visible.
• When your theme has its own sticky add-to-cart - see Quick add and theme compatibility.

The bar leaves room at the end of the page while it shows, so your footer can always be scrolled clear of it. It also steps aside whenever your theme's cart drawer, a cart popup or a pop-up window is open, so it never covers the drawer's checkout button.

Button text

• Add to cart button text - what the bar's button says, for example Buy now.
• Sold out button text - shown when the chosen variant is sold out.
• Quick add button text (Pro and Max) - the button on product cards.

Leave a field empty to use the default text in your shopper's language.

After adding to cart

Under More options. Add-to-cart action applies to the sticky bar and to quick add. Default opens your theme's cart drawer when it has one. When it has none, or when Open the cart drawer after adding is off, a small popup confirms the add with the product, the cart subtotal, View cart and Checkout. You can also refresh the page, go to the cart, or go straight to checkout.

Other pages

Choose a cart summary bar (the same floating bar, with the cart total) or a floating cart icon, which buttons the cart bar shows, and where the icon sits.

Custom CSS

The app no longer has a Custom CSS field: add CSS in your theme (Online Store > Themes > Customize > Theme settings > Custom CSS). CSS you saved in the app before keeps working on the Max plan. Target the bar with #sqc-bar, the cart bar with #sqc-cart-bar, card buttons with .sqc-qa-btn and the added-to-cart popup with .sqc-qc.