Appearance
The theme editor in 5 minutes
Open it from Online Store → Themes → Customize. Everything in Oriel is set up here.
The three areas
| Area | What it does |
|---|---|
| Top bar (page picker) | Choose which page you're editing: Home page, Products, Collections, Cart, Blog posts, Pages and more. |
| Left sidebar | The sections on that page, top to bottom. Click one to edit it, drag to reorder, click the eye to hide it. |
| Preview | A live preview. Click anything in it to jump straight to its settings. |
The ⚙ Theme settings icon (bottom left) holds the settings that apply to the whole store.
Sections and blocks
- A section is a full-width part of a page, like an image banner, a featured collection or an FAQ. Add one with Add section.
- A block is a piece inside a section, like a heading, a button, a question in the FAQ or a column. Add one with Add block under the section.
Every section has the same Style settings at the bottom: color scheme, spacing above and below (separately for phones), full width, a background image or video, hiding it on phones or desktop, and its entrance animation.
Theme settings
| Group | What's in it |
|---|---|
| Colors | Your color schemes. Each scheme is a set of background, text, heading, accent and button colors. Sections pick a scheme. |
| Typography | Heading and body fonts and their sizes. |
| Layout | Page width, side margins, spacing between items, breadcrumb separator. |
| Buttons | Button shape, size and hover effect. |
| Corners and borders | Rounded corners for images, cards and fields. |
| Icons | Icon style (from thin to bold, or filled), used everywhere in the theme. |
| Animations | Entrance animations and image hover effects. |
| Prices and savings | How sale prices and savings ("Save 20%" or "Save $8") are shown. |
| Product cards | Image shape, hover image, badges, ratings, color swatches and quick add on product cards. |
| Swatches | The color for each swatch value, for example "Brown: #6B4A3A", used when a variant has no swatch set in Shopify. |
| Cart | Cart drawer or cart page. |
| Search | Which results show in search: products, blog posts and pages. |
| Social media | Links to your social profiles, shown in the footer and other places. |
| Extras | Scroll-to-top button, page progress bar and image/text copy protection. |
| Favicon | The small icon in the browser tab. |
Color schemes, the most useful setting
Oriel comes with five color schemes. Change a scheme once and every section that uses it updates. This is the fastest way to make the theme yours:
- Open Theme settings → Colors.
- Edit Scheme 1 (your main background) and Scheme 5 (dark sections).
- Use the other schemes for alternating section backgrounds.
Highlighted words in headings
Type a heading and make a word italic. Oriel shows italic words in headings in your accent color and font, like "Skin that feels at home".