Getting started
1. Add the theme
- In Shopify admin, go to Online Store > Themes.
- Find Terrazza in the Theme Store and select Try theme, or Add theme after purchase. It is added to your theme library unpublished.
- Select Customize to open the theme editor. Publish only when your store looks the way you want.
A fresh install has the layout, colors and typography of the Terrazza demo store. The demo's own photos and products don't transfer. Sections show placeholders until you choose your own images, products and collections.
2. Your first hour
Work through these in order. Each step links to the detailed guide.
- Logo and menu. Open Header: upload a logo, or leave it empty to show your store name as a wordmark. Choose the main menu. See Header.
- Colors and fonts. Open Theme settings > Colors and Typography. The four color schemes (Stone, Soft, Ink and Accent) are used across the sections. See Theme settings.
- Swatch options. In Theme settings > Swatches, check that Swatch option names lists the option names you use for finishes, for example
Color, Colour, Finish, Material. - Product metafields. Create the metafield definitions for dimensions, swatch colors and delivery details. Fill them in for a product or two and look at the product page. See Product metafields.
- Filters. Install the free Shopify Search & Discovery app if you don't have it yet, then add Color and Size filters. See Filters and recommendations.
- Complementary products. In Search & Discovery, add complementary products for your best sellers. They appear in "Pairs well with" on the product page and in the cart drawer.
- Free shipping. If you offer free shipping above an order value, enter it in Theme settings > Cart > Free shipping threshold. See Cart and free shipping.
- Home page. Replace the hero image and text, choose collections for Collection list and Featured collection, and edit Shop by finish to match your color names.
How the theme is organized
- Templates hold the page types: Home, Product, Collection, Collections list, Cart, Search, Blog, Article, Page, Contact, 404, Password and Gift card.
- Sections are the full-width rows on a page. Add, reorder, hide or remove them in the editor sidebar.
- Blocks are the pieces inside a section. On the product page, the title, price, variant picker, buttons, "Will it fit?" dimensions, delivery cards and details accordion are all blocks you can reorder.
- Header and footer are section groups shared by every page. The header group holds the announcement bar and header; the footer group holds the footer.
- Theme settings (the gear icon) hold store-wide choices such as colors, fonts, swatches, units and cart behavior.
Images
| Where | Recommended size | Notes |
|---|---|---|
| Hero | 2400 × 1600 px or larger | Add a separate Mobile image (portrait, for example 1200 × 1800 px) for phones; otherwise the main image is cropped |
| Product photos | 2000 px on the long side, 4:5 portrait | The first image of each variant is also the source of its swatch |
| Collection images | 1600 × 2000 px | Used by Collection list and the collection page |
| Story card and Material story | 1200 × 1500 px | Portrait crops work best |
| Logo | SVG or PNG, at least 480 px wide | Set the display width with Logo width |
Set the focal point of each image in the admin (open the image and choose Edit > Focal point). Terrazza uses it wherever it crops: cards, swatches, the menu feature card and story cards.
Before you publish
- Preview the store on a phone. Terrazza is designed for phones first.
- Open a product with several finishes and sizes and check its swatches, the "Will it fit?" block and the delivery cards.
- Open a collection, apply a color filter, and check that each card shows the matching finish.
- Add a product to the cart and check the cart drawer.