Buttons, layout, images, logos and animations
Five small groups under Theme settings that shape the whole store at once.
Buttons
Section titled “Buttons”Style applies to every button: Solid, Plain without the shadow, or Inverted as an outline. The colours come from each colour scheme’s button roles. Border thickness shows on outline and inverted buttons. Corner radius, Horizontal padding and Vertical padding set the shape. The type is its own: font (body or heading), weight, case, letter spacing and size, with a smaller size for phones.
Full-width buttons under Mobile layout stretch every button to the width of its container on mobile. ‘Load more’ controls whether lists use a standard button or a circular control to load the next set of items.
Layout
Section titled “Layout”Maximum page width is the width boxed sections follow; at the top of the range the page is uncapped. Page margin is the side spacing inside that width, and it tightens by itself on small screens. Corner radius rounds cards and panels. Start loading pages on hover begins loading a page the moment a shopper’s pointer rests on its link, so it opens faster.
Images
Section titled “Images”Clickable images makes a picture with a link clickable as a whole, not only its button. Blend product images into the background hides the white ground of studio photos. Corner radius rounds image cards and thumbnails across the store, with a smaller radius for phones.
Logos and favicon
Section titled “Logos and favicon”Logo is used in the header and on the password page. Set its width for desktop and for phones, and upload a separate Mobile logo if the main one does not suit a small screen. Favicon is the browser-tab icon: a square image, 512 pixels or larger.
Animations
Section titled “Animations”Show animations is one switch for decorative motion across the store: sections easing in as they scroll into view, hover effects, the turning text orbit, smooth scrolling and similar touches. Off removes them for every visitor: sections appear in place, the scrolling text and the text orbit stand still, hover effects and smooth scrolling stop. What a shopper asked for still happens: videos play, slideshows advance, and the cart still confirms an add.
Follow the device’s reduce-motion setting, off by default, adds one exception when turned on: a visitor whose phone or computer asks for less motion sees the store as if animations were off, and everyone else sees them as you set them.