Configure Ember without losing its character.
A preset-specific guide to the editorial pizza direction, its unique interactions, and the shared Shopify commerce beneath it.
Getting started
Ember is a preset in the Smash theme, not a separate theme product. Install the Smash 1.0.0 ZIP, keep it unpublished, then select or apply the Ember preset/configuration provided through the approved distribution flow.
- Duplicate your current live theme.
- Upload Smash and open the unpublished copy in the Theme Editor.
- Apply Ember and confirm the storefront name reads Ember.
- Replace preset copy, collections, pages, menus, and fallback media with your store content.
- Review the complete Ember homepage sequence, product page, Menu, cart, search, contact, and mobile preview before publishing.
What Ember changes
- Typography: Inter medium headings and Inter body text in the preset defaults.
- Layout: 1520px maximum page width, 32px minimum page margin, and 96px section spacing.
- Surfaces: 12px buttons, 10px inputs, 16px cards, subtle five-percent shadows, and warm cream/red color schemes.
- Branding: preset-specific header and footer logo treatment.
- Hero: a three-slide presentation with previous/next arrows, dots, autoplay pause, and a six-second interval.
- Cart: an additional floating cart control appears after the configured scroll threshold and shows the cart count.
- Story layout: the editorial Image with text option adds three supporting media panels.
- Fallback media: Ember-specific pizza, category, story, team, collection, location, and promotion files appear only when merchant media is missing.
The product form, variants, selling plans, pickup, recommendations, menu architecture, cart drawer, search, contact forms, and accessibility foundation remain shared.
Build the Ember homepage
The approved listing uses this sequence:
- Restaurant Hero: cinematic pizza introduction and primary menu action.
- Menu categories: pizza, antipasti, pasta, salads, sweets, and drinks discovery.
- Featured pizzas: collection-backed products using the shared card and Quick Add behavior.
- Editorial story: main story media plus flour, produce, and ember supporting panels.
- Gallery: restaurant team and service moments in a responsive editorial arrangement.
- Featured collections: configured collections with pizza, antipasti, and dolci fallbacks.
- Location: address, directions, contact details, and optional media.
- Opening hours: day/hour blocks and supporting information.
- Promotional CTA: one focused next action.
Hero slider controls
The Ember hero exposes previous and next arrows, slide dots, and a pause control. The slider marks only the active slide as visible to assistive technology, pauses appropriately, and respects reduced-motion preferences. Replace every image with real merchant media; fallbacks are only a safe starting state.
Editorial story
In Image with text, choose the editorial layout to use the supporting media composition. Upload images with related color and lighting, and keep the copy concise enough to preserve the spacious layout.
Products, purchase, and cart
Ember shares the block-driven product template, Shopify-native product media, variants, pricing, quantity, inventory, SKU, selling plans, pickup availability, recommendations, app blocks, dynamic checkout, and cart architecture.
Sticky mobile purchase
The Product section loads the mobile sticky add behavior when Ember is active, even when the general Smash toggle is not the deciding condition. The control follows variant, price, availability, quantity, and compatible selling-plan state. Test every variant on mobile.
Floating cart
Ember adds a floating cart link after roughly 55% of the configured scroll threshold. It shows the current item count and links to the shared cart experience. This does not replace the accessible cart drawer or full cart.
Quick Add
The global Quick Add setting still applies. Direct add is available only for an unambiguous product. Multi-variant, sold-out, or required-selling-plan states remain safe and explicit.
Styling and mobile behavior
Start from Ember's saved defaults before making changes. Change one system at a time—color, then type, then spacing—so the preset remains coherent.
- Use warm cream surfaces and red/orange actions with sufficient contrast.
- Keep the larger section spacing unless the content becomes visibly disconnected.
- Preserve 16px cards for Ember's softer presentation.
- Use real food photography as the primary media; do not rely on fallbacks for a published store.
- Check the hero controls, horizontally scrollable category/gallery treatments, mobile card stacking, sticky purchase bar, floating cart, and long menu names at 375px and 390px.
- Keep animation set to subtle or off for the calm editorial direction.
Troubleshooting
Ember still looks like Smash
Confirm the Ember preset/configuration was applied and saved to the theme you are previewing. Check the storefront name and preset defaults in Theme settings.
The hero does not rotate
Check reduced-motion settings first. Confirm the Ember preset is active and the hero section is present. The pause control may also have stopped autoplay.
The floating cart is missing
It appears only for Ember and only after the required scroll progress. Test on a sufficiently long page and confirm the header's Ember module loaded without an app conflict.
Preset illustrations still appear
Upload merchant images in the affected section or block. Ember fallbacks intentionally appear when a source is blank.
The menu shows Products filters
The header points to a generic collection. Link it to the page using page.menu.
Mobile purchase behavior is wrong
Test every variant, quantity, availability state, and selling plan without conflicting product-form apps, then report exact steps to support.