Documentation
& help center

Introduction

Cinder is a premium Shopify theme designed for fashion, apparel, and streetwear brands that want an editorial, high-contrast storefront without sacrificing speed or accessibility. It is built on Online Store 2.0, so every template is a JSON template you can edit visually — add, remove, and reorder sections on any page, including the product and collection pages.

The visual language is deliberately industrial: a spec-sheet aesthetic with a strong display typeface, a mono “label” voice, a single confident accent color (Signal), and generous, gallery-like spacing. It ships with five color schemes, a flexible mega menu with a live product rail, a lookbook, an editorial gallery, a filterable collection experience, a rich product page, and a fast predictive search.

Install the theme

Once you have the theme file (a .zip), add it to your store:

1. Open your theme library. In Shopify admin, go to Online Store → Themes.
2. Upload the theme. Under Theme library, click Add theme → Upload zip file, choose the Cinder .zip, and upload. It appears as a draft.
3. Preview it. Click Actions → Preview to explore Cinder on your own store before publishing.
4. Customize. Click Customize to open the theme editor and make it yours.
5. Publish when ready. Click Actions → Publish to make Cinder live. Your previous theme stays safely in your library.

Theme editor basics

Everything in Cinder is configured in the Shopify theme editor (Customize). A quick orientation:

• Left panel — sections & blocks. Each page is a stack of sections. Many sections contain repeatable blocks (a slide, a look, a column). Click Add section to insert one, drag to reorder, and use the eye icon to hide.
• Right panel — settings. Selecting a section, block, or the Theme settings gear reveals its settings on the right.
• Top bar — template selector. Switch the page you are editing (Home, a product, a collection, Cart, Search, Blog, Pages…).
• Theme settings (gear icon). Global settings that apply everywhere — colors, typography, product cards, cart, and more.

How the theme is organized

Colors & color schemes

Cinder uses Shopify’s color schemes system. Define a handful of reusable palettes once, then each section picks which scheme it uses. Change a scheme and every section using it updates instantly. Open Theme settings → Colors; Cinder ships with five schemes tuned to work together:

Each scheme exposes a Background, Text, Accent / solid button, and Borders control (a muted text tone is derived automatically).

Typography

Under Theme settings → Typography you choose fonts and control their scale. Cinder pairs a characterful display face with a clean body face and a monospace “label” voice.

Layout & spacing

Buttons

Cinder uses two button styles that adapt to any scheme: Solid (filled with the accent) for the primary action, and outline / text for secondary actions. Button label and link are set wherever the button appears.

Product cards

Configure product cards globally under Theme settings → Product cards so they’re consistent everywhere.

Cart

The cart drawer also supports upsell products and an order note, and updates live.

Animation & motion

Logo, favicon & social

Header

Announcement bar

The thin bar above the header holds repeatable Message blocks — add several for a rotating ticker. Each message is editable text with its own settings.

Mega menu Featured rail

Cinder’s desktop mega menu is a signature feature. A top-level menu item with sub-items expands into a rich panel with three zones:

1. Navigation columns — built automatically from your menu (each sub-item becomes a column; its children become links).
2. Featured products rail — a live row of real products (image, title, price) from a collection you choose. The “Mega menu products” block.
3. Promo card — an editorial image card with heading and link. The “Mega menu promo” block.

How the columns are built

1. Create the menu. In Online Store → Navigation, open the header’s menu (e.g. Main menu).
2. Add a top-level item such as Shop.
3. Add sub-items under Shop — these become column headings (Tops, Bottoms, Featured).
4. Add links under each sub-item — these become the links in that column.

Add the featured rail & promo card

These are blocks on the Header. Select the Header section and click Add block:

Mobile navigation

On small screens the header collapses to a menu button that opens a full-height navigation drawer — a numbered, spec-sheet menu mirroring your navigation, with expandable groups, account link, country/language selectors, and social links. It traps focus and closes with Esc or a tap outside.

Country & language selectors

Cinder includes native Shopify country and language selectors (footer + mobile drawer). Enable them under Settings → Markets (currency) and Settings → Languages / Translate & Adapt (languages). Cinder ships with English, Arabic, German, Spanish, and French, and fully supports RTL layouts.

Working with sections

Sections are the building blocks of every page. Add one with Add section, configure it on the right, drag to reorder, and use its Color scheme and Section padding (under Style). Below is a reference for every section — expand any card for details.

Hero & slideshow

Content & media

Product & collection sections

Social proof

Promotions

Product page

The product template is fully sectioned — the main section combines a media gallery and a buy area, and you can add more sections below (complementary products, recently viewed, an FAQ, a featured collection…).

Media gallery

On desktop, media stacks as large frames beside a sticky buy column, with a mono counter (01 / 04). On mobile it becomes an edge-to-edge swipe gallery with a progress bar and keyboard-operable dots. Videos and 3D models play in place; images open in a zoom lightbox.

Buy area

Collection page & filters

Filtering (facets)

Cinder uses Shopify’s native filters:

1. Install/confirm Search & Discovery (Shopify’s free app manages filters).
2. Add filters in that app under Filters (Availability, Price, Color, Size, Type, Vendor, or metafields).
3. They appear in Cinder as a clean drawer with accent-fill checkboxes, count chips, and price inputs. Sorting sits alongside.

In-grid promo blocks

The collection section supports promo blocks (image + heading tiles) placed within the grid to break up long lists.

Cart

Depending on your Cart type, customers use a slide-in drawer or a cart page. Both support quantity edits, removal, an order note, the free-shipping bar, and upsell products. The drawer updates live.

Search

The search icon opens a fast, accessible modal with predictive results — products, collections, pages, and articles appear as you type. There is also a full results page. Refine what’s searchable and add synonyms in the Search & Discovery app.

Blog & article

The blog template lists articles as cover-image cards; the article template renders a clean post (featured image, title, meta, content, optional comments). Use the Featured blog section to surface posts on the homepage.

Pages & policies

Because pages are sectioned, compose an About page from Hero, Image-with-text, Multicolumn, Featured collection, and Gallery — no page-builder app. Create alternate page templates with Create template and assign them under a page’s Theme template. Policy pages render with clean typography.

Customer accounts

Cinder styles all customer account templates — login, register, account, order history, order detail, addresses, password reset, and activation. Enable accounts under Settings → Customer accounts.

Match the theme to your brand

1. Set your colors. Edit the five schemes in Theme settings → Colors — especially Scheme 1 and Scheme 5. Keep contrast ≥ 4.5:1.
2. Pick your fonts under Typography and adjust the heading scale.
3. Add your logo and favicon under Branding.
4. Set product-card style to suit your photography (Contain for cut-outs, Cover for lifestyle).
5. Wire up social & cart — add social URLs and your free-shipping threshold.

Build the mega menu (with a product rail)

1. Structure the menu in Navigation: a Shop item with sub-items (Tops, Bottoms, Featured) and links under each.
2. Open the Header in the editor and select it.
3. Add a “Mega menu products” block. Set Menu item title to Shop, choose a Collection, a Heading, and the product count.
4. Add a “Mega menu promo” block. Set Menu item title to Shop, upload an image, write a heading, set the link.
5. Save and hover Shop to see columns, product rail, and promo card together.

Create a lookbook

1. Add the Lookbook section to a page.
2. Add a Look block for each outfit.
3. Set the image and a short caption (COURTSIDE, NIGHT SHIFT).
4. Add the products shown in that look — they render as a “Shop the look” list. Add two or more so every look feels complete.
5. Repeat and reorder.

Set up collection filters

1. Open Search & Discovery (install free if needed).
2. Go to Filters and add filters (Availability, Price, Color, Size, metafields).
3. Visit a collection — the filter drawer and sorting appear automatically.

Add a size guide to products

1. Create a “Size guide” page with your size table.
2. Link it from the product — via the theme’s size-guide setting or a product metafield if your setup uses one.
3. Confirm the trigger opens the chart in an accessible modal.

Accessibility Built in

• Keyboard operable — menus, drawers, gallery dots, carousels, accordions, and the before/after slider.
• Focus states — a clear, scheme-aware focus ring on every interactive element.
• Screen-reader friendly — labeled icon buttons, form labels, aria-expanded triggers, and a skip link.
• Reduced motion — all animations, marquees, and the slideshow honor “reduce motion.”
• Contrast — schemes tuned for legibility with automatic muted-text protection.
• Images — product and content images carry alt text (product alt falls back to the title).

Performance

• Self-contained assets — no external fonts, scripts, or CDNs in the storefront.
• Responsive images — correct sizes, lazy-loading below the fold, eager high-priority hero/LCP.
• Deferred JavaScript — scripts don’t block rendering.
• No layout shift — images reserve their space.

FAQ & troubleshooting

Get support

Can’t find what you need? We’re happy to help.

When you contact us, include your store URL, theme version, the page/section involved, and a screenshot — it helps us help you faster.

Cinder — a Shopify theme by SPELL. Documentation v1.0. · ← Back to overview