Theme and brand
Tell the storefront generator what your store should feel like, generate a design and a logo, fine-tune your theme, and learn the page builder basics.
4 chapters · 2:06 · narrated in English · captions in English and French
Module 4 · 4 chapters · 2:06
Theme and brand
Tell the storefront generator what your store should feel like, generate a design and a logo, fine-tune your theme, and learn the page builder basics.
Example store: Maple & Brass, a jewellery shop in Toronto. Names, addresses and figures are made up.
Transcript
01 Your brief
The storefront generator designs a store from your catalogue and your own words. Open it under “Channels”. It starts with “Your brief”.
Under “What do you want your store to feel like?”, describe it in a sentence. A photo of your shop or your packaging helps too.
Press “Read my brief”. Under “What we understood”, correct any reading with one click, then press “That’s right — use this”.
02 Generate a design
Add a “Vibe” if you like, tick “Keep my current brand colour” to hold on to yours, and press “Generate my storefront”.
In about a minute you have a design: a brand and a support colour, a type pairing, a layout, and a plain reason for each choice.
Your new home page is saved as a draft, and shoppers see it only once you publish it. Under “Logo”, press “Use this one” on the mark you like.
Every design is kept in “Design history”, and “Put this back” restores an earlier one.
03 Fine-tune your theme
To adjust the look by hand, open “Appearance” under “Channels”. “Presets” are curated combinations: apply one, then change anything.
Under “Fine-tune”, set the “Brand colour”, the “Corners”, the “Heading font” and the “Body font”.
Press “Save theme”. Mid-tone colours are darkened automatically until button text passes contrast.
The “Preview” below shows a button and your type with these choices, before any shopper sees them.
04 Page builder basics
Now the page itself. In the storefront generator, “Review & publish the home page” opens it in the page builder.
Your page’s “Sections” are listed in order. Select the “Hero” and change its “Headline”; the page updates as you type.
Press “Add” for a new section. A “Collection” section shows a category: set its “Collection / category” to Earrings.
Your edits stay in a draft until you publish, so shoppers never see a page half done.
Check it at “Mobile” width, press “Save draft”, and when it looks right, press “Publish”. Next: editing your pages.
Transcription en français
01 Votre énoncé
Le générateur de vitrine conçoit une boutique à partir de votre catalogue et de vos mots. Ouvrez-le sous « Channels ». Il commence par « Your brief ».
Sous « What do you want your store to feel like? », décrivez-la en une phrase. Une photo de votre boutique ou de vos emballages aide aussi.
Appuyez sur « Read my brief ». Sous « What we understood », corrigez une lecture d’un clic, puis appuyez sur « That’s right — use this ».
02 Générer un design
Ajoutez une « Vibe » si vous voulez, cochez « Keep my current brand colour » pour garder la vôtre, et appuyez sur « Generate my storefront ».
En une minute environ, vous avez un design : une couleur de marque et une couleur d’appui, un duo de polices, une mise en page, et une raison simple pour chaque choix.
Votre nouvelle page d’accueil est enregistrée en brouillon; les clients ne la voient qu’une fois publiée. Sous « Logo », appuyez sur « Use this one » pour la marque qui vous plaît.
Chaque design est conservé dans « Design history », et « Put this back » rétablit un design précédent.
03 Ajuster votre thème
Pour ajuster l’allure vous-même, ouvrez « Appearance » sous « Channels ». Les « Presets » sont des combinaisons choisies : appliquez-en une, puis modifiez ce que vous voulez.
Sous « Fine-tune », réglez « Brand colour », « Corners », « Heading font » et « Body font ».
Appuyez sur « Save theme ». Les couleurs moyennes sont assombries automatiquement jusqu’à ce que le texte des boutons soit assez contrasté.
L’« Preview » plus bas montre un bouton et vos polices avec ces choix, avant qu’un client les voie.
04 Les bases de l’éditeur de pages
Place à la page elle-même. Dans le générateur de vitrine, « Review & publish the home page » l’ouvre dans l’éditeur de pages.
Les « Sections » de votre page sont listées dans l’ordre. Sélectionnez le « Hero » et modifiez son « Headline »; la page se met à jour pendant que vous tapez.
Appuyez sur « Add » pour une nouvelle section. Une section « Collection » montre une catégorie : réglez son « Collection / category » à Earrings.
Vos modifications restent en brouillon jusqu’à la publication : les clients ne voient jamais une page à moitié faite.
Vérifiez-la en largeur « Mobile », appuyez sur « Save draft », puis sur « Publish » quand tout vous plaît. À suivre : modifier vos pages.
Next on the path: Module 5, Edit your pages.
Narration is synthesised on our own servers from the script above, in a public-domain voice. Voice credits.