Presets
Dosewell comes in one style (preset), also called Dosewell. A style sets the fonts, the color schemes, a few theme settings and the home page you start with. More styles are planned and will arrive as free theme updates.
| Style | Made for | Fonts (heading / body / accent) |
|---|---|---|
| Dosewell | Supplements and functional nutrition with a few products (2 to 10) | Chivo 800 / Chivo 400 / Alegreya italic |
The accent font is used only for Latin species names.
Color schemes
The theme editor shows the schemes as Scheme 1 to Scheme 6. These are the names we use for them.
| Scheme | Name | Background | Text | Used for in the Dosewell style |
|---|---|---|---|---|
| Scheme 1 | Chalk | #E9EEEE | #351733 | The page ground: header, hero, tray, specimen sheets, comparison, questions, footer |
| Scheme 2 | Label | #FFFFFF | #351733 | Featured product, studies, drawers and dialogs, the menu panels |
| Scheme 3 | Elderberry | #351733 | #F1F3F2 | Announcement bar and day timeline |
| Scheme 4 | Turmeric | #E8B22D | #351733 | Newsletter band |
| Scheme 5 | Mist | #D9E2E2 | #351733 | Alternating bands on inner pages, the formula panel section |
| Scheme 6 | Moss | #46603F | #F1F3F2 | Available for formula-themed bands |
Every text color in these schemes meets 4.5:1 contrast with its background, and every outline and button fill 3:1. If you change scheme colors, keep those ratios; a contrast checker in your browser or online tells you the ratio of two hex colors.
Dosewell
Settings that differ from the packaged defaults: Blend white image backgrounds into the color field is on.
Home page: Formula hero, Formula index (eight cells in a tray), Featured product, Specimen sheets, Day timeline (five doses), Formula comparison, Evidence (four studies), FAQ, Newsletter.
Menu chips as page navigation
If you sell one product or a few, the chips under the header can work as links to sections of the home page. Make a one-level menu in Online Store > Navigation whose links point at sections:
- Open your home page in the browser, right-click the section you want to link to and choose
Inspect. Find the nearest element whose id starts with
shopify-section-and copy that id. - In the menu, add a link to
/#followed by the id, like/#shopify-section-template--1234__formula_panel. - Choose that menu in the Header section’s Menu setting.
Section ids stay the same until you delete the section. If you delete and add it again, update the link.
Changing style
When a new style arrives, Shopify can change the style of a theme you already have from the theme editor; doing so can replace your theme settings (colors, fonts and the other settings in Theme settings). Duplicate the theme first, and check your home page afterwards.
