Getting started
- Upload the theme (zip the theme folder, or run
shopify theme push). - Open Customize and add your logo in the Header section.
- Create the menus
main-menuandfooterunder Content, Menus. - Set your store currency in Settings, Markets. Prices everywhere follow it.
- Selling in more than one country? Open Settings, Markets, choose the market, then Shipping, and set Ships from on every shipping option. An option with no ship-from location makes every product show as sold out in that market and blocks checkout.
- Optional: load the sample content from
sample-content/README.md.
Home page
The home template is a stack of sections you can reorder, hide or duplicate: hero slider, collection mosaic, tabbed products, best seller carousel, product lists and service strip. Each section has a colour scheme picker. Add more from the Add section menu: rich text, image with text, testimonials, FAQ, blog posts, newsletter, featured collection.
Hero slider
Add up to five slides. Each has an image (2400 by 1200 recommended), kicker, two heading lines, text and a button. The text sits on a flat panel whose opacity you control, so it stays readable on any photo. Autoplay pauses on hover, on focus and with the pause button, and never runs when the visitor prefers reduced motion.
Tabbed products
One tab per block, each pointing at a collection. Without JavaScript all tabs show one after another.
Collections and filters
Filters come from Shopify Search and Discovery. Add filters there (availability, price, colour, product type, any metafield) and they appear in the sidebar on desktop and in a collapsible panel on mobile. Choices update the grid without a page reload, the address bar keeps the filter link so results can be shared, and active filters show as removable chips.
Product page
The product template is built from the Product information section with blocks you can reorder: title, rating, price, pitch, variant picker, stock message, buy buttons, delivery note, accordions and share. Below it sit the Designer story, Room scenario, Often bought together, Complete the look, Reviews, Questions and answers and Recommendations sections.
Variants
Create options in Shopify as usual. Options named Color, Colour, Finish or Fabric show as swatches (change the names under Theme settings, Product page). Swatch colours come from the category metafield swatches, with the variant image as a fallback.
Stock messages
Turn on Show stock messages in Theme settings, Product page. Tracked variants show In stock, Only N left (below the threshold), Made to order (when selling is allowed at zero stock) or Sold out.
Reviews
Install any review app that supports app blocks and add its block in the Reviews section. You can also fill the solna.reviews metafield for static reviews. Stars on cards read reviews.rating first, then solna.rating.
Metafields
Create these under Settings, Custom data, Products, namespace solna, storefront access public. Rows and sections with no data are hidden.
| Key | Type | Shows in |
|---|---|---|
subtitle, pitch, badge | Single line text | Title block, cards, quick view |
designer_name, designer_year, designer_story, designer_image | Text, rich text, file | Designer story |
dimensions | JSON | Dimensions accordion |
materials_summary, materials_table | Text, JSON | Materials accordion |
care, sustainability | List of text | Accordions |
assembly, delivery_info, warranty, returns, specs | JSON, text | Accordions |
room_scenario_title, room_scenario_body, room_scenario_steps, rooms | Text, list | Room scenario |
qa | JSON list | Questions and answers |
reviews, rating, rating_count | JSON, decimal, integer | Reviews, stars |
bought_with, complete_the_look | List of products | Product page sections |
Example JSON for each field is in sample-content/metafield-definitions.json and sample-content/sample-metafields.json.
Cart and search
Choose Drawer or Page under Theme settings, Cart. The free shipping bar uses the threshold you set in whole units of your store currency. Predictive search covers products, collections, articles, pages and suggestions, and works with the keyboard: arrow keys move through results and Enter opens one.
Languages and right to left
Add languages under Settings, Languages. English, French, German, Spanish, Italian, Dutch and Arabic strings are included. Arabic pages switch to right to left layout automatically. A language and country selector appears in the footer when your store has more than one of either.
Performance and accessibility
- Images carry width, height and responsive
srcset, with only the first image per page loaded eagerly. - Animations use transform and opacity only, and switch off for visitors who prefer reduced motion or when you disable them in Theme settings.
- No framework or library. Scripts are small custom elements loaded with
defer. - Keyboard support for menus, drawers, dialogs, tabs, sliders and filters. Drawers and quick view use the native dialog element, which traps focus.