WEBVTT

1
00:00:00.201 --> 00:00:05.178
In this episode we make the online store look like yours. We change colours and

2
00:00:05.178 --> 00:00:10.281
fonts, rearrange the home page, preview the result, publish it, and roll it back.

3
00:00:11.233 --> 00:00:16.273
Open Themes. Your live theme is at the top. Press Customize to open the editor.

4
00:00:16.622 --> 00:00:22.155
The editor has three tabs. Sections is the layout of a page. Theme settings holds

5
00:00:22.155 --> 00:00:27.688
the brand: colours, fonts and more. Code is for a developer who wants to edit the

6
00:00:27.688 --> 00:00:31.582
templates. Above are Preview, Versions, Save and Publish.

7
00:00:31.933 --> 00:00:36.956
Open Theme settings. The Brand panel holds your logo, three colours, two fonts and

8
00:00:36.956 --> 00:00:38.733
the roundness of the buttons.

9
00:00:39.084 --> 00:00:43.861
Scroll down for the colour presets. Each look comes with a few, and applying one

10
00:00:43.861 --> 00:00:47.324
replaces the matching settings. We will apply Harbor Sand.

11
00:00:47.674 --> 00:00:51.845
Press Apply on Harbor Sand. The colours and the heading font above change to the

12
00:00:51.845 --> 00:00:52.314
preset's.

13
00:00:52.664 --> 00:00:58.522
To make the shop your own, set the accent colour. It colours buttons and links. Type

14
00:00:58.522 --> 00:01:00.824
a colour code, here a deep green.

15
00:01:01.174 --> 00:01:05.843
Open the Heading font menu and choose another font for headings. Playfair Display is

16
00:01:05.843 --> 00:01:06.454
a good one.

17
00:01:06.805 --> 00:01:11.629
The slider below sets how round the buttons are, and the body font works the same

18
00:01:11.629 --> 00:01:16.513
way as the heading font. Nothing is live yet: the changes are in a draft until you

19
00:01:16.513 --> 00:01:17.525
save and publish.

20
00:01:17.876 --> 00:01:23.689
Now the layout. Open the Sections tab. These are the sections of the home page, from

21
00:01:23.689 --> 00:01:29.156
top to bottom. The Page menu switches to other pages, such as the product page.

22
00:01:29.507 --> 00:01:33.836
To move a section, drag it by the handle on its right. We will move Testimonials

23
00:01:33.836 --> 00:01:35.027
above Image with text.

24
00:01:35.376 --> 00:01:39.376
The eye hides a section without deleting it. We will hide the FAQ.

25
00:01:39.726 --> 00:01:44.269
Select a section to edit its settings, which appear on the right. Here is the Image

26
00:01:44.269 --> 00:01:47.006
banner at the top of the page. Change its heading.

27
00:01:47.357 --> 00:01:53.890
Add section opens the list of section types: slideshow, video, rich text, contact

28
00:01:53.890 --> 00:01:57.277
and more. We will add a Rich text section.

29
00:01:57.627 --> 00:02:01.867
The new section is selected. Give it a heading, and a sentence about delivery.

30
00:02:03.276 --> 00:02:08.196
Press Save. This saves a draft, a new version of the theme. Shoppers still see the

31
00:02:08.196 --> 00:02:09.036
published one.

32
00:02:09.386 --> 00:02:14.534
Before you publish, look at it. Press Preview. The link shows the draft even while

33
00:02:14.534 --> 00:02:18.426
the store is closed, and it stops working after sixty minutes.

34
00:02:18.776 --> 00:02:23.377
Press Open preview. This is your draft, as shoppers will see it, with the new fonts,

35
00:02:23.377 --> 00:02:24.856
colours and banner heading.

36
00:02:25.206 --> 00:02:31.270
Scroll down. Testimonials, Kind words, now come before the story, the FAQ section

37
00:02:31.270 --> 00:02:37.409
has gone, and at the bottom is the new rich text section, with its heading and its

38
00:02:37.409 --> 00:02:39.206
sentence about delivery.

39
00:02:39.556 --> 00:02:44.112
The preview is private. A visitor to the normal shop address still sees the old

40
00:02:44.112 --> 00:02:44.516
design.

41
00:02:44.864 --> 00:02:47.824
Happy with it? Go back to the editor and press Publish.

42
00:02:48.559 --> 00:02:51.919
Confirm. Shoppers see the new design straight away.

43
00:02:55.997 --> 00:03:00.957
Every save is a version, so nothing is lost. Back in the editor, press Versions.

44
00:03:01.307 --> 00:03:06.750
The newest version is at the top, marked Live. Version 1 is the design we started

45
00:03:06.750 --> 00:03:09.707
from. Press Publish next to it to roll back.

46
00:03:10.058 --> 00:03:12.298
Confirm, and the old design is live again.

47
00:03:18.024 --> 00:03:23.366
Publishing and rolling back are safe, so you can experiment. In the next episode we

48
00:03:23.366 --> 00:03:26.584
add content: pages, menus, collections and a blog.