Designs
A design is the look of your whole website at once. Pick one to start, and switch to another whenever you like: your pages, sections and words stay exactly where they are.
What a design is
Your website is made of sections: a header, a hero, a grid of cards, a product list, a footer and so on. Each kind of section can be drawn in more than one way. A design decides how every section is drawn, so they all belong together.
A design decides how things look, never what is on the page. Changing it changes:
- the header and footer, and how the announcement bar sits in them
- how heroes, banners, card grids, product grids and catalogue lists are drawn
- the product card used everywhere a product is shown
It does not change:
- your pages, their addresses and their order
- the sections on each page, their order and which ones are hidden
- any text, image, link or translation you wrote
- your products, prices, contact details, search settings or languages
- your colours (unless you ask for that, see below)
The designs
| Design | Made for | What it looks like |
|---|---|---|
| Default | Online stores, one-page stores, landing pages | Clean, neutral sections. The starting point every other design builds on. |
| Prime | Online stores, one-page stores | Premium framed panels, a contact bar and a scrolling announcement. For catalogues with a lot to show and shops that want to look established. |
| Editorial | Online stores, landing pages | A deep brand bar, a serif name and spaced-out navigation over calm sections. For boutiques and brands that sell a story. |
| Journal | Blogs, portfolios | A name, text links and nothing else: no cart and no search. Writing first. |
| Resume | Portfolios, landing pages | A document, not a shop: your name and photo, then sections in two columns. Black on white, and it prints on one A4 sheet. |
| Workshop | Local businesses, landing pages | A brand-coloured bar with your address, opening hours and phones, photo covers and bold feature cards. For garages, repair shops, clinics and other local services. |
| Gilded | Online stores, one-page stores | Dark grounds, gold used like foil on one action at a time, a centred logo and large geometric type. Opens in dark mode. For premium print, packaging and gift shops. |
Every design is shown live in the design library (the link is in the site header), sorted by the kind of website. Open one to see its header and footer and every section drawn in it, and open any section to change its text and try it at phone, tablet and desktop width.
Choosing or switching
- Open your website in Studio.
- Open Site settings (the gear) and choose Design.
- Filter by the kind of website if you like, then press Use on a design.
The page in the middle redraws in the new design straight away. Nothing reaches your visitors until you Publish, so try as many as you like. Undo or Discard takes you back.
The Blocks panel always shows which design your website uses, with a Change link. Every block you add is drawn in that design, so you never pick a look block by block.
Best practice. Switch design, then walk through your main pages before publishing: the home page, a category, a product and the contact page. A different design can make a page that was balanced feel long or short, and that is easier to fix before visitors see it.
Colours
Your colours belong to your website, not to the design. Every design is drawn from your palette, so switching keeps your brand.
Each design also has suggested colours. When you switch, you can tick Also use the design's colours to take that palette too. The box starts ticked if you are using one of the ready-made palettes, and unticked if you set your own colours, so a brand colour you typed in is never replaced unless you ask. You can change colours afterwards under Site settings → Theme, exactly as before.
Light or dark on a first visit
Someone who has never used your site's light/dark switch sees the design's choice: Resume starts light, as paper does, and the other designs follow the visitor's device. To decide it yourself, open Site settings → Theme and set First visit to Follow their device, Light or Dark. A visitor who uses the switch keeps their own choice.
Custom
A website that was built before designs existed shows Custom. Its sections keep the looks they were built with, and some of them may come from different designs. Nothing about it changes until you pick a design.
When you pick one, every section takes that design's look, including the ones that had their own. To go back, choose Stop using a design on the same screen before you publish, or use Discard.
What every design promises
Every design follows the same rules, so you can switch without checking each one yourself:
- The same set of sections. Every design draws every standard section: header, footer, announcement bar, hero, hero split, intro, text, banner, card grid, file, product grid, category list, product list, breadcrumbs, blog, contact details, enquiry form, map, profile header, list and details. A design that has no special version of a section uses the Default one, so nothing ever disappears when you switch.
- Any palette, light and dark. A design takes every colour from your palette and is checked for readable contrast in both light and dark mode.
- Your words, never ours. A design adds no text of its own to your pages. Every word a visitor reads comes from you, in every language your website speaks.
- One page, one layout width. Sections line up with each other whatever the design, and each page has exactly one main heading, which is what search engines expect.
- Nothing extra to download for visitors. Switching design does not make your website slower.
A résumé or personal page
Three sections are made for a page about a person, and work in every design:
- Profile header — a small label, your name or headline, one line under it, a square photo and a closing line (where you are). It can show today's date, which is useful on a page people print.
- List — a heading and a list, shown as lines, short paragraphs or tags. A row with a link shows the link's address after its text, or just the address, so a contact list needs only the links. Frame it draws a rule around the section.
- Details — a heading and label–value pairs, written as Label: value or Label — value: languages and levels, dates and roles, favourites.
Put the profile header across the top and the lists in two columns (a wide one and a sidebar) to build a classic résumé. With the Resume design, the header holds your links, the language switch, light/dark and a print button. A page with a profile header prints on A4 with narrow margins, and two-column layouts stay two columns on paper. Theme → Page width sets how wide the page is; a résumé reads best at about 980 pixels.
A different order on phones. On a phone the columns of a row stack, so a sidebar normally comes after the whole main column. Select a block in a row with several columns and set Position on phones to place it among the others, for example your languages right after your summary. Computers and printed pages keep the columns as they are.
A local business: services, covers and menus
Four sections are made for a business that offers services rather than products, and work in every design:
- Slideshow — photos that take turns, each with a headline and a line under it, and one pair of buttons. It pauses while a visitor points at it, and stays still for anyone who has asked their device for less motion.
- Cover — a title and a line over a photo: a page's header, or a call to action. The photo is tinted dark or in your brand colour so the words always read. Phone button calls the first phone in your contact details, so a new number is changed in one place.
- Page cards — cards for pages of your website, such as one page per service. List the pages by address (/engine-repair); each card shows the page's own name, its description (Page settings → Description) and its picture (its social image, or else the first picture on the page), in the visitor's language. Rename a page or change its picture and every card follows. Fill a row's Title, Text or Image only to change that one card.
- Page menu — a boxed list of links to your pages for a sidebar, with the page being read marked. Write a page's address in Same pages as (/services) and the menu lists the pages shown by the Page cards on that page: add a service to your services page and every service page's menu has it.
A typical layout: a services page made of a cover and Page cards, and one page per service with a cover, the text in a wide column and a Page menu beside it.
Card grid cards can carry a picture too: a photo across the top, or a small icon above the title (Card images).
Quick answers
Will switching design delete anything? No. A design only changes how sections are drawn. Every page, section, word and image stays.
Can I use Prime's header with the Default design? No, one design per website. That is what makes a switch restyle everything at once, and what keeps the website looking like one place.
My website says Custom. Is something wrong? No. It was built before designs existed and looks exactly as it always did. Pick a design when you want every section to share one look.
Can I have a design made for my brand? Yes. Designs are added for everyone, so a design drawn for one shop becomes available to every Coready website.