Buttons drive navigation, purchases, and interactivity across your storefront. In the builder, open Insert, switch to the elements view, open Basics, and choose Button. Four presets are available:
Primary — filled, high-emphasis button.
Secondary — outlined style for supporting actions.
Icon — button with an icon slot next to the label.
Circular — round button, often used for icon-only controls.
Each preset inserts a container with a child Text element (default copy "Button text") that you can edit inline. Style colors, radius, padding, and typography on the Style tab of the Design panel.
Add an action
Select the button (or any clickable element), open the Interactions tab in the Design panel, and find the Action section. Click + to choose what happens on click. Actions are grouped into categories:
General
Link to — navigate to a URL, or a Shopify page, product, collection, blog article, policy page, or metafield link. Optionally open in a new tab.
Go to checkout — send the shopper directly to Shopify checkout.
Go to section — scroll to another section on the same page.
Email to — open the shopper's mail client with a pre-filled address.
Open cart — set what opens: Cart page, Instant cart, or Custom cart (custom cart requires theme integration).
Triggers
Toggle overlay — show or hide an overlay container on the page.
Toggle dropdown — open or close a dropdown container.
Toggle lightbox — expand an image in a lightbox overlay.
Product
Available when Shopify product content is connected to the element or a parent:
Add to cart — add the current variant to cart. Configure On click (Go to cart or Go to checkout) and Open (Cart page, Instant cart, or Custom cart). Optional: discount code, quantity, and clear cart.
Go to product — navigate to a product page (useful inside collection repeaters).
Select variant option — set a variant option on click (for swatches and custom pickers).
Select selling plan — choose a subscription or selling plan option.
Toggle add-on — add or remove a cart add-on (cart layouts only).
Set quantity — update the quantity selector value.
When you're working inside a cart items repeater, Remove item from cart is also available to delete a line item.
Collection
Available on collection templates and inside product repeaters:
Go to collection — navigate to a collection page.
Clear filters — reset active collection filters.
Load more products — fetch the next page of products.
Product buttons vs. generic buttons
The Product group in Insert includes dedicated Button (add to cart) and Checkout presets with actions pre-configured. You can also add actions to Text, Image, or container elements — not only Button presets.
Avoid conflicting actions
If a parent layer already has an action, a child button can inherit unexpected behavior. Instant shows an Overlap in Actions warning when this happens; use View action in the warning to jump to the parent layer, then keep the action on the element you actually want to be clickable.
Tips
Use Primary for one main call-to-action per section (Add to cart, Buy now) and Secondary for supporting actions. Match Open cart settings across your site so every add-to-cart button behaves consistently.