Transcript
Brand colours and fonts, colour presets, sections and blocks, previewing, publishing and rolling back.
0:00 Introduction
In this episode we make the online store look like yours. We change colours and fonts, rearrange the home page, preview the result, publish it, and roll it back.
0:11 The editor
Open Themes. Your live theme is at the top. Press Customize to open the editor.
The editor has three tabs. Sections is the layout of a page. Theme settings holds the brand: colours, fonts and more. Code is for a developer who wants to edit the templates. Above are Preview, Versions, Save and Publish.
0:31 Brand
Open Theme settings. The Brand panel holds your logo, three colours, two fonts and the roundness of the buttons.
Scroll down for the colour presets. Each look comes with a few, and applying one replaces the matching settings. We will apply Harbor Sand.
Press Apply on Harbor Sand. The colours and the heading font above change to the preset's.
To make the shop your own, set the accent colour. It colours buttons and links. Type a colour code, here a deep green.
Open the Heading font menu and choose another font for headings. Playfair Display is a good one.
The slider below sets how round the buttons are, and the body font works the same way as the heading font. Nothing is live yet: the changes are in a draft until you save and publish.
1:17 Sections
Now the layout. Open the Sections tab. These are the sections of the home page, from top to bottom. The Page menu switches to other pages, such as the product page.
To move a section, drag it by the handle on its right. We will move Testimonials above Image with text.
The eye hides a section without deleting it. We will hide the FAQ.
Select a section to edit its settings, which appear on the right. Here is the Image banner at the top of the page. Change its heading.
Add section opens the list of section types: slideshow, video, rich text, contact and more. We will add a Rich text section.
The new section is selected. Give it a heading, and a sentence about delivery.
Press Save. This saves a draft, a new version of the theme. Shoppers still see the published one.
2:09 Preview
Before you publish, look at it. Press Preview. The link shows the draft even while the store is closed, and it stops working after sixty minutes.
Press Open preview. This is your draft, as shoppers will see it, with the new fonts, colours and banner heading.
Scroll down. Testimonials, Kind words, now come before the story, the FAQ section has gone, and at the bottom is the new rich text section, with its heading and its sentence about delivery.
The preview is private. A visitor to the normal shop address still sees the old design.
2:44 Publish
Happy with it? Go back to the editor and press Publish.
Confirm. Shoppers see the new design straight away.
2:55 Versions and rollback
Every save is a version, so nothing is lost. Back in the editor, press Versions.
The newest version is at the top, marked Live. Version 1 is the design we started from. Press Publish next to it to roll back.
Confirm, and the old design is live again.
Publishing and rolling back are safe, so you can experiment. In the next episode we add content: pages, menus, collections and a blog.