Get the most from Beyond
This guide is for merchants using Beyond, including Fleur. Beyond is for editorial or story-led stores with long-form sections, rich typography, and About us, Brand statement, and Text menu.
Theme, Shopify, or an app?
Theme: storefront look. Theme settings, sections, and default theme text.
Shopify admin: catalog and content. Products, Collections, Pages, and Content → Menus (the theme only displays the menu you assign) and Blog posts.
Outside the theme: checkout and payments (Settings), collection filters (Search & Discovery), and email, reviews, or subscription apps.
Theme settings to know
Open Edit theme → Theme settings. These groups in the left sidebar apply storewide.
Colors
Storewide palette: three accents, page and text colors, light and dark backgrounds, border opacity, and drop shadows. On each section, Background color and Text color pick from this list. See Colors.
Typography
Heading, navigation, and body fonts; the type size ladder. See Typography.
Layout
Theme settings → Layout → Desktop spacing and Mobile spacing set the Small through Extra large sizes. On each section, Spacing above and Spacing below dropdowns pick None, Small, Medium, Large, or Extra large. See Spacing and layout.
Reuse the same Spacing above / Spacing below dropdown on adjacent sections: Medium throughout the shop, or Large on a hero and Medium on what follows. Use None when two sections should sit flush. Add a Divider when you need a gap with no content. Keep mobile spacing smaller than desktop, and preview both after you change the scale in Layout.
Story blocks such as Brand statement and About us use Extra large spacing; collections and the footer usually sit on Medium or Large. A strong homepage rhythm is generous story, then a tighter shop. The Layout scale stays the same; only each section’s spacing choice changes.
Buttons & Inputs
Theme settings → Buttons & Inputs defines button styles 1 through 4, input colors, and corner radii storewide. On each section, the Button block picks style 1–4. Button label size is in Typography → Buttons. See Buttons and inputs.
Images
Aspect ratios and corner radius for product, collection, and article images. See Images.
Social media
One place for every platform's icon and link, used by the footer, announcement bar, and other sections. See Social media.
Animations
Four storewide switches to turn off text, image, button hover, or other motion. See Animations.
Product grid
Card labels, hover image, and heading/price type. Text alignment for product cards is set here, not on the collection section. See Product grid.
Cart
Cart type (Page or Drawer), the checkout button style, order notes, and the free shipping progress message. See Cart.
On each section
Open a section in Edit theme, not Theme settings:
Pick a default Text alignment per template and keep supporting sections on it: left for catalogs and long copy, center for heroes and short announcements, then back to your default. Mobile text alignment is separate.
Maximum container width is on each section: contained for text-heavy blocks, Full width for slideshows and large photography. A useful rhythm is full-width hero → contained story → full-width collection.
See Alignment and width for more details.
- Brand and story sections: About us, Brand statement, Text menu
Sections and templates
Edit theme → Add section, plus menus and page layouts:
Products
Product data lives in Shopify admin. These guides cover how the theme displays it:
- Product grid
- Quick add
- Swatches
- Filters (Search & Discovery app)
- Search
Content and store
If something used to work and no longer does, start with Troubleshooting. For what changed recently, see the Beyond release notes.
Want Fleur instead of Beyond, or the reverse?
One Beyond purchase includes both styles. Fleur is built for lookbooks, essays, and campaigns beside the shop. To switch after install, see What are theme styles?. You do not need to switch to continue this guide. For the exact settings that differ between them, see the Demo store reference.