---
title: Overview
url: https://support.troopthemes.com/guide/emerge/
theme: Emerge
theme_styles: Cafe, Elements
---

# Get the most from Emerge

This guide is for merchants using **[Emerge](https://themes.shopify.com/themes/emerge/presets/emerge)**, including [Cafe](https://themes.shopify.com/themes/emerge/presets/cafe) and [Elements](https://themes.shopify.com/themes/emerge/presets/elements). Emerge is for growing stores with versatile sections, sleek layouts, and section shapes.

Cafe and Elements are styles of Emerge, not separate themes. If your store uses Cafe or Elements, use this Emerge guide.

![Emerge homepage](https://support.troopthemes.com/_images/emerge/homepage.jpg)

> **Theme, Shopify, or an app?**
>
> **Theme**: storefront look. Theme settings, sections, and [default theme text](https://support.troopthemes.com/guide/emerge/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/emerge/creating-navigation/) (the theme only displays the menu you assign) and [Blog posts](https://support.troopthemes.com/guide/emerge/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 (Emerge)

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

![Emerge Theme settings](https://support.troopthemes.com/_images/emerge/images--settings.jpg)

### Colors (Emerge)
Storewide palette: three accents, page and text colors, light and dark backgrounds, border opacity, and drop shadows. On each section, **Background color**, **Text color**, and **Shape color** pick from this list. See [Colors](https://support.troopthemes.com/guide/emerge/colors/).

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

### Layout (Emerge)
**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/emerge/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.


### Buttons & Inputs (Emerge)
**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/emerge/buttons-and-inputs/).

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

### Social media (Emerge)
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/emerge/social-media/).

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

### Product grid (Emerge)
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/emerge/product-grid/).

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

## On each section (Emerge)

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

![Emerge section settings](https://support.troopthemes.com/_images/emerge/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/emerge/alignment-and-width/) for more details.

Full-width section shapes with contained copy is a common layout. Set **Maximum container width** before you pick a shape style. Center short heroes; keep collection pages and long copy left-aligned. If mobile stacks feel long, lower mobile spacing or heading mobile size before you turn the shape off.

- [Section shapes](https://support.troopthemes.com/guide/emerge/section-shapes/): **Shape position**, **Top/Bottom shape style**, and **Shape color**

## Sections and templates (Emerge)

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

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

## Products (Emerge)

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

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

## Content and store (Emerge)

- [FAQ](https://support.troopthemes.com/guide/emerge/setting-up-faq-or-collapsible-rows/)
- [Blog](https://support.troopthemes.com/guide/emerge/customizing-blog/)
- [Marketing popup](https://support.troopthemes.com/guide/emerge/configuring-the-popup/)
- [Newsletters](https://support.troopthemes.com/guide/emerge/newsletters/)
- [Currencies & languages](https://support.troopthemes.com/guide/emerge/configure-country-currency-selectors/)
- [Custom CSS](https://support.troopthemes.com/guide/emerge/adding-css-editing-template-code/)
- [Advanced settings](https://support.troopthemes.com/guide/emerge/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 [Emerge release notes](https://support.troopthemes.com/release_notes/emerge/).

> **Want Cafe or Elements instead?**
>
> One Emerge purchase includes all three styles. Cafe is a fresh, menu-and-catalog layout; Elements is built for everyday-carry product stories. 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 listings, see the [Demo store reference](https://support.troopthemes.com/guide/emerge/demo-store-reference/).