Appearance
Make it look like the demo
When you install Oriel, your pages already have the demo's layout: the same sections in the same order, with the demo's texts. The demo's photos and products aren't included: they belong to the demo store. Until you add your own, those spots show a placeholder drawing.
Work through this page top to bottom and your store will look complete.
1. Add your products and collections
Oriel's sections pick products and collections from your store. Before anything else, make sure you have:
- A few products with photos.
- A "Bestsellers" collection (or any collection you want to feature on the home page).
- Category collections, for example Serums, Moisturizers, Cleansers. Automatic collections ("product type is Serum") fill themselves.
2. Replace the home page images
Open the theme editor on the Home page and go through the sections top to bottom:
| Section | What to set |
|---|---|
| Image banner (hero) | A wide image for desktop and, optionally, a tall image for phones. Phones only download the phone image. |
| Featured collection | Pick your Bestsellers collection. |
| Logo list | Logos of press, partners or certifications. |
| Collection list | Pick a collection in each block. Card images come from the collection image. |
| Image with text | Your own photos and story. |
| Featured product | Your hero product. |
| Testimonials | Real customer reviews. Remove the sample ones. |
Remove sample reviews
The demo testimonials are labeled "Sample review". Replace them with real reviews or delete the section. Showing made-up reviews to customers is misleading and against consumer-protection laws in many countries.
3. Set up your menus
Go to Online Store → Navigation.
- Main menu: the header menu. To get the large dropdown ("mega menu"), give a menu item two levels of links below it. For example: Shop → Shop by category → Serums, Moisturizers. Add promo images to it in the theme editor: Header → Add block → Mega menu promo, then type the menu item's name.
- Footer menus: create one menu per footer column, then pick them in Footer → Menu blocks.
4. Pages
Oriel includes ready-made page layouts. Create a page in Online Store → Pages and choose a template on the right:
| Template | Use it for |
|---|---|
page.about | Your story, with banner, images and values. |
page.faq | Questions grouped by topic. |
page.contact | Contact details and a contact form. |
page.lookbook | Slideshow, shoppable image and before/after. |
5. Your logo and favicon
- Logo: Header → Logo image.
- Favicon: Theme settings → Favicon.
- Password page logo: Password page → Logo (when your store is still password protected).
Next: the launch checklist.