---
title: Overview
url: https://support.troopthemes.com/guide/beyond/
theme: Beyond
theme_styles: Fleur
---

# Get the most from Beyond

This guide is for merchants using **[Beyond](https://themes.shopify.com/themes/beyond/presets/beyond)**, including [Fleur](https://themes.shopify.com/themes/beyond/presets/fleur). Beyond is for editorial or story-led stores with long-form sections, rich typography, and **About us**, **Brand statement**, and **Text menu**.

Fleur is a style of Beyond, not a separate theme. If your store uses Fleur, use this Beyond guide.

![Beyond homepage](https://support.troopthemes.com/_images/beyond/homepage.jpg)

> **Theme, Shopify, or an app?**
>
> **Theme**: storefront look. Theme settings, sections, and [default theme text](https://support.troopthemes.com/guide/beyond/change-default-text/).
>
> **Shopify admin**: catalog and content. [Products](https://help.shopify.com/en/manual/products), [Collections](https://help.shopify.com/en/manual/products/collections), [Pages](https://help.shopify.com/en/manual/online-store/themes/theme-structure/pages), and **Content** → [Menus](https://support.troopthemes.com/guide/beyond/creating-navigation/) (the theme only displays the menu you assign) and [Blog posts](https://support.troopthemes.com/guide/beyond/customizing-blog/).
>
> **Outside the theme**: [checkout and payments](https://support.troopthemes.com/guide/troubleshooting/#checkout-payments-shipping-and-inventory) (**Settings**), [collection filters](https://support.troopthemes.com/guide/troubleshooting/#search-filters-and-discovery) (**Search & Discovery**), and [email, reviews, or subscription apps](https://support.troopthemes.com/guide/troubleshooting/#email-reviews-subscriptions-and-other-apps).


## Theme settings to know (Beyond)

Open **Edit theme** → **Theme settings**. These groups in the left sidebar apply storewide.

![Beyond Theme settings](https://support.troopthemes.com/_images/beyond/spacing--settings.jpg)

### Colors (Beyond)
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](https://support.troopthemes.com/guide/beyond/colors/).

### Typography (Beyond)
Heading, navigation, and body fonts; the type size ladder. See [Typography](https://support.troopthemes.com/guide/beyond/typography/).

### Layout (Beyond)
**Theme settings** → **Layout** sets the Small through Extra large sizes, once under **Desktop spacing** and once for mobile. On each section, **Spacing above** and **Spacing below** dropdowns pick None, Small, Medium, Large, or Extra large. See [Spacing and layout](https://support.troopthemes.com/guide/beyond/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 (Beyond)
**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](https://support.troopthemes.com/guide/beyond/buttons-and-inputs/).

### Images (Beyond)
Aspect ratios and corner radius for product, collection, and article images. See [Images](https://support.troopthemes.com/guide/beyond/images/).

### Social media (Beyond)
One place for every platform's icon and link, used by the footer, announcement bar, and other sections. See [Social media](https://support.troopthemes.com/guide/beyond/social-media/).

### Animations (Beyond)
Four storewide switches to turn off text, image, button hover, or other motion. See [Animations](https://support.troopthemes.com/guide/beyond/animations/).

### Product grid (Beyond)
Card labels, hover image, and heading/price type. **Text alignment** for product cards is set here, not on the collection section. See [Product grid](https://support.troopthemes.com/guide/beyond/product-grid/).

### Cart (Beyond)
**Cart type** (Page or Drawer), the checkout button style, order notes, and the free shipping progress message. See [Cart](https://support.troopthemes.com/guide/beyond/cart/).

## On each section (Beyond)

Open a section in **Edit theme**, not **Theme settings**:

![Beyond section settings](https://support.troopthemes.com/_images/beyond/alignment--section-settings.jpg)

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. The section's **Mobile** → **Text alignment** setting 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](https://support.troopthemes.com/guide/beyond/alignment-and-width/) for more details.

- [Brand and story sections](https://support.troopthemes.com/guide/beyond/brand-and-story-sections/): **About us**, **Brand statement**, **Text menu**

## Sections and templates (Beyond)

**Edit theme** → **Add section**, plus menus and page layouts:

- [Section list](https://support.troopthemes.com/guide/beyond/section-list/)
- [Image sections](https://support.troopthemes.com/guide/beyond/image-sections/)
- [Collection page promotions](https://support.troopthemes.com/guide/beyond/collection-page-promotions/)
- [Navigation](https://support.troopthemes.com/guide/beyond/creating-navigation/)
- [Templates](https://support.troopthemes.com/guide/beyond/working-with-templates/)

## Products (Beyond)

Product data lives in Shopify admin. These guides cover how the theme displays it:

- [Product grid](https://support.troopthemes.com/guide/beyond/product-grid/)
- [Quick add](https://support.troopthemes.com/guide/beyond/quick-add/)
- [Swatches](https://support.troopthemes.com/guide/beyond/color-swatch-guide/)
- [Filters](https://support.troopthemes.com/guide/beyond/setting-up-product-filters/) (Search & Discovery app)
- [Search](https://support.troopthemes.com/guide/beyond/search/)

## Content and store (Beyond)

- [FAQ](https://support.troopthemes.com/guide/beyond/setting-up-faq-or-collapsible-rows/)
- [Blog](https://support.troopthemes.com/guide/beyond/customizing-blog/)
- [Marketing popup](https://support.troopthemes.com/guide/beyond/configuring-the-popup/)
- [Newsletters](https://support.troopthemes.com/guide/beyond/newsletters/)
- [Currencies & languages](https://support.troopthemes.com/guide/beyond/configure-country-currency-selectors/)
- [Custom CSS](https://support.troopthemes.com/guide/beyond/adding-css-editing-template-code/)
- [Advanced settings](https://support.troopthemes.com/guide/beyond/advanced-settings/)

If something used to work and no longer does, start with [Troubleshooting](https://support.troopthemes.com/guide/troubleshooting/). For what changed recently, see the [Beyond release notes](https://support.troopthemes.com/release_notes/beyond/).

> **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?](https://support.troopthemes.com/faqs/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](https://support.troopthemes.com/guide/beyond/demo-store-reference/).