01 / Start
Getting started
Installing Smash
- In Shopify Admin, go to Online Store → Themes.
- Add the Smash theme ZIP supplied through the approved Shopify distribution flow.
- Keep the uploaded theme unpublished while you configure content and navigation.
- Open the Theme Editor, choose the intended preset, then review the home page, product template, restaurant menu, cart, search, and contact page with your own store data.
- Preview the theme on mobile and desktop before publishing.
Choosing Smash or Ember
Smash is the primary preset for burger, fast-food, fried-chicken, and bold casual restaurant brands. It uses tighter card density, stronger contrast, and a direct ordering hierarchy.
Ember is the secondary preset for pizza, wood-fired, Italian-casual, and neighborhood restaurant brands. It uses warmer color schemes, more editorial type, framed media, and a more relaxed composition.
Both presets share the same product, menu, cart, search, accessibility, and performance architecture. Changing a style preset does not create products, collections, pages, or navigation for the merchant.
Theme Editor basics
- Use theme settings for global colors, typography, buttons, cards, motion, search, Quick Add, and restaurant menu page selection.
- Use section settings for local content, images, links, layout, color scheme, and spacing.
- Add, remove, reorder, and duplicate sections from the page template panel.
- Preview a different template from the top page selector before editing route-specific sections.
- Save only after reviewing the desktop and mobile previews.
03 / Customize
Sections and features
Restaurant Hero
Use the shared hero for a primary image, optional mobile image, headline, supporting text, two CTAs, content alignment, overlay, height, color scheme, and media presentation. Keep the primary CTA focused on the menu or ordering path.
Video Hero
Select a Shopify-hosted video and provide a poster/image fallback. Autoplay remains muted where enabled. Reduced-motion preferences and constrained/mobile contexts fall back safely. Avoid uploading unnecessarily large video files.
Menu categories
Creates a visual category rail for restaurant discovery. Connect category items to the configured restaurant Menu page and real collections. It is not a replacement for the Menu page's category state.
Popular products
Displays a focused product grid using the shared product-card system. Prioritize strong food photography, a clear product name, price, availability, and action.
Featured menu
Provides a broader featured-dish rhythm using shared product cards. Choose a real collection and keep the item count appropriate for the page.
Featured collections
Add collection blocks using Shopify collection pickers. Configure the heading, text, responsive grid, image ratio, and optional lightweight mobile horizontal scroll.
Image with text
Use for restaurant story, sourcing, kitchen, chef, or neighborhood content. Select responsive media, choose image placement, and keep the text focused.
Gallery
Add restaurant, food, team, or space imagery with optional captions and links. Below-the-fold images load lazily. Use consistent crops for a cleaner grid.
Testimonials
Add only genuine merchant-supplied quotes. Smash does not aggregate reviews, fabricate ratings, or connect to a review provider.
FAQ / Collapsible content
Add blocks for dietary information, delivery, reservations, policies, or ordering details. The section uses native details and summary, so its core interaction does not require JavaScript.
Opening hours
Add day/hour blocks and optional supporting text or CTA. Keep exceptional or seasonal hours current. The section safely wraps long values on mobile.
Location
Add address, phone, directions URL, supporting text, and optional image. Smash uses a directions-first approach and does not load a map SDK by default.
Promotional banner
Use for a focused menu feature, reservation link, bundle message, or event CTA. It is link-based and does not integrate a booking provider.
Announcement bar
Choose static, rotating, or marquee presentation. Motion is restrained and responds to reduced-motion preferences.
Product information
The block-driven product section supports title, price, variants, quantity, selling plans, inventory, SKU, pickup availability, share, app blocks, purchase controls, and collapsible information.
Quick Add
When enabled globally, an available product with one unambiguous/default variant can be added directly from its card. Products with multiple variants link to product selection instead. Sold-out products show an unavailable state. A product that requires a selling plan is not given the unsafe direct-add path.
Mobile Sticky Add to Cart
Enable this optional setting in Product information. The mobile bar follows the selected variant, price, availability, quantity, and compatible selling-plan state. Its intended default is off.
Product recommendations
Uses Shopify-native related and complementary recommendation sources. The theme controls presentation but does not create a separate recommendation engine.
Cart drawer
The accessible drawer supports line updates, quantity, removal, error/status feedback, subtotal, checkout, and a full-cart link. The full cart provides cart notes and Shopify checkout handoff.
Newsletter
The footer and optional promotional popup use Shopify's customer contact form. Add truthful consent/help text that fits your store and applicable requirements.
Contact
Use the Contact template and section for Shopify's native contact form plus merchant contact details. Test the recipient email in Shopify Admin before launch.
04 / Commerce
Product support
- Variants: pills or dropdowns update the selected variant, URL state, media, price, and availability.
- Unavailable variants: render a disabled Sold out state and cannot be added.
- Inventory: optional inventory messaging uses Shopify product data.
- Quantity: product and cart controls respect native quantity input behavior and Shopify quantity rules.
- Selling plans: compatible allocations update with the selected variant. Incompatible plans are disabled/hidden, and the theme does not invent a plan.
- Dynamic checkout: Shopify's accelerated checkout can coexist with the normal product form and is not intercepted by the cart drawer enhancement.
- Product media: Shopify-native images, video, external video, and 3D model media are supported through the product gallery.
- Pickup availability: can be enabled from the product section when the store and product support it.
05 / Keep it fast
Performance guidance
- Upload appropriately sized, compressed images. Large merchant media is usually the biggest storefront transfer cost.
- Use consistent image ratios to reduce layout shift and avoid awkward crops.
- Keep the home page section count intentional. Add sections that help discovery, trust, or action.
- Prefer Shopify-hosted video and provide a strong poster image. Avoid oversized background video.
- Remove apps and tracking tools that do not support a clear business need.
- Avoid loading multiple tools that solve the same job.
- Review mobile performance after changing hero media, product imagery, apps, or tracking.
Smash uses responsive Shopify CDN media, lazy loading below the fold, one deliberate LCP candidate, CSS-first animation, reduced-motion support, and route/feature-scoped JavaScript. These choices support performance but do not guarantee a fixed Lighthouse score.
06 / Resolve
Troubleshooting
Menu opens a generic Products page
The header link points to a collection instead of the restaurant Menu page. Create/select a page using page.menu, select it in theme settings, and update the main navigation link.
The Menu page is blank or uses the wrong layout
Confirm the page template is page.menu and the root template includes the Restaurant menu page section. Then configure category sources and real collections.
Quick Add shows “Choose options”
This is expected for products with multiple variants or an ambiguous purchase state. Smash never guesses a variant. Open the product page to make a selection.
Quick Add is missing
Confirm Quick Add is enabled in theme settings. The product must be available, unambiguous, and not require a selling plan.
Sticky Add to Cart does not appear
Enable the mobile sticky add-to-cart setting in Product information and test at a mobile width. It is mobile-only by default and intentionally ships disabled.
Ember still looks like Smash
Apply and save the Ember style/preset configuration. Ember's listing configuration supplies its home composition, header/footer settings, pizza-oriented menu copy, colors, typography, spacing, and card treatment. It does not create store resources.
Need more help?
Visit Stonrock Support or email support@stonrock.com. Include your store URL, preset, and the steps needed to reproduce the issue.
07 / FAQ
Frequently asked questions
Does Smash require an app?
No. Core theme functionality is Shopify-native and does not depend on an app. Merchants can still add compatible Shopify apps through supported app blocks and integrations.
Are Smash and Ember separate themes?
No. They are two ready-made presets/configurations within the same shared theme architecture.
Does Smash include online ordering?
Smash uses Shopify products, variants, cart, checkout, selling plans, and fulfillment settings. It does not replace Shopify with a restaurant modifier, delivery, or reservation engine.
Can I connect a reservation service?
Yes. Use a configurable CTA link to your chosen reservation destination. Smash does not hardcode or bundle a third-party booking provider.
Does Quick Add pick a variant for customers?
No. Direct Quick Add is limited to unambiguous products. Multi-variant products send customers to the product selection flow.
Can Stonrock customize my store?
Theme support covers Smash bugs, setup questions, and documented functionality. Custom development, app-specific work, and full store redesign are separate services and are not automatically included.