Button settings

Buttons are where a visitor decides to act, so how they look carries more weight than almost anything else on a page. These four settings apply to every button in the theme at once: add to cart, checkout, newsletter sign-up, and any button you place inside a section. You will find them in Theme settings → Buttons, reached from the gear icon at the bottom of the theme editor sidebar. Settings in this group apply store-wide, while options for a single section live on that section.

Choose how buttons fill

Button style decides how primary and secondary buttons are filled and how they react when hovered. The colors themselves always come from the color scheme running on that section, so what you are choosing here is the treatment, not the palette.

• Solid, inverts on hover is the default. The button is filled, and the fill and label colors trade places on hover.
• Solid with accent label keeps the solid button but draws the label in your accent color.
• Accent fill fills the button with the accent color itself.
• Outline, accent replaces the fill with an accent outline, which sits more quietly on busy pages.
• Outline, subtle is the softest of the set, useful when you want the product photography to lead.

A bright accent color, a neon for example, stays readable as a fill behind dark text, so pair one with Solid, inverts on hover or Solid with accent label. If your accent is darker or mid-tone, Accent fill and the two outline styles will hold their contrast well. See Colors for choosing that accent in the first place.

Set the label case and spacing

• Button and navigation label case applies one letter case to both buttons and the header navigation, so the two never drift apart. Defaults to Normal. Uppercase gives a confident, editorial feel and works best when your labels are short. Longer labels such as “Continue shopping” take up noticeably more room in capitals, so check the header before you commit.
• Button label letter spacing opens the letters out, on a range of 0 to 30%, and defaults to 1%. Capitals usually want more air than lowercase, so if you switch the case to Uppercase, try nudging this to somewhere between 6 and 12%. With Normal case, keep it low.

Pick a hover effect

Button hover effect controls how a button responds to a pointer. It defaults to Invert colors.

• Invert colors fades the fill and label into each other.
• Color snap changes the color instantly with no transition, for a crisp, precise feel.
• Lift raises the button slightly, as though it were being picked up.
• Glow adds a halo, taking its shadow from the Depth setting in Theme settings → Corners, borders, and depth. Set a shadow there first, or the effect will be very quiet.
• Slow fill sweeps the new color across the button.

The timing of all of these follows the animation speed you set in Theme settings → Animations. Hover effects show on desktop, where a pointer is involved, so judge them on a large screen, then open the same page on a phone to confirm the button still reads clearly at rest.

Tip

Preview your choices on a product page rather than the homepage. The add-to-cart button sits right beside the price and the product image, which is the hardest place in the store to get contrast right. If it reads clearly there, it will read everywhere.

Note

Whichever combination you land on, the theme keeps the visible focus outline for keyboard users and a comfortable tap size on phones, so you are free to choose on looks alone.