Vale (Theme documentation)

(10-minute setup)

Set up Vale in ten minutes

Eleven short steps, in the order the theme editor shows them. Do them once, top to bottom, and your store looks like yours. Everything here is in Online Store > Themes > Customize unless a step says otherwise.

(Editor tips)

When a section has nothing picked yet, Vale shows example content and a small dotted note that says what to choose. The note is only visible in the editor; your customers never see it. Settings that don't apply are hidden until you need them: turn on Preloader, for example, and its wordmark field appears.

  1. Open Theme settings > Logo & favicon. Upload your logo: a PNG or SVG with a transparent background. Leave it blank and your store name is set as a text wordmark with a small accent dot.
  2. Set Logo width. It appears once a logo is uploaded. 100–140px suits most wordmarks.
  3. Add a favicon. Square, at least 192 × 192px. A simple mark reads best at tab size.

2. Colors (2 min)

Shopify names the schemes Scheme 1 to Scheme 5. In Vale each has a fixed job, so change a scheme's colors and every section using it follows:

Scheme 1
Page background: most sections
Scheme 2
Hero and alternate bands
Scheme 3
Reading areas, product details, cart drawer and pop-ups
Scheme 4
Contrast bands and the footer (dark on Vale, light on Still)
Scheme 5
Accent: callouts and the sale badge

Keep the text and background of each scheme at strong contrast. To change one band only, select that section and pick another scheme in its Colors group. More in Presets.

3. Fonts (1 min)

Theme settings > Typography has three pickers: Body and heading font (a clean grotesk), Accent serif font (used sparingly for italic captions and large words) and Label font (the small uppercase monospace labels). Fonts come from the Shopify font library, so they load fast and need no licence. Body size and Heading size scale everything at once.

  1. Edit the main menu in Content > Menus: for example Shop (Furniture, Lighting, Objects), Collections, Journal, About.
  2. Turn a top item into a mega menu. In the editor, select the Header, add a Mega menu block and type the top item's name exactly (for example Shop). Submenu links that point to collections show the collection's image automatically.
  3. Add promo tiles (optional). In the same block, pick up to three images with a caption and link.
  4. Footer menu. Edit the footer menu: shipping, returns, care, contact.

Details in Mega menu and search.

5. Homepage sections (2 min)

The homepage is already laid out. Click each section in the left sidebar and replace the placeholder images and copy; product and collection sections need one pick each (the editor note tells you which). To add more, choose Add section: sections are grouped into Heroes, Products & collections, Storytelling, Text & content, Images & video, Scroll effects, Social & newsletter and Info & trust. Every section's settings run in the same order: Content, Media, Layout, Colors, Motion, Spacing.

Browse them all in Sections.

6. Product page (1 min)

Open a product from the page selector at the top of the editor. The product information section is made of blocks (title, price, variant picker, buy buttons, description, collapsible tabs and more) that you can reorder or hide. Two ready-made alternatives can be assigned per product in Products > (a product) > Theme template:

product
The default: gallery, details, related products, recently viewed
product.minimal
Large stacked images and a short form, for simple pieces
product.story
The full form followed by the making of the piece: materials, an image-and-text chapter, delivery and care questions

Spec tables, downloads and ratings come from metafields: see Product page.

7. Collections and filters (1 min)

  1. Install Shopify's free Search & Discovery app and add filters (availability, price, product type, material, color with swatches). Vale shows them automatically on collection and search pages.
  2. Choose a layout per collection in Products > Collections > (a collection) > Theme template: the default grid, collection.editorial, collection.catalogue or collection.gallery.
  3. Add a collection image. It is used by the banner, the mega menu and collection lists.

More in Collections and filters.

8. Newsletter and popup (30 sec)

The footer has a signup form already; sign-ups land in Customers with email marketing consent. For a popup, open the Footer group in the sidebar, show the hidden Newsletter popup section and set its timing, image and text. After a visitor closes it, it stays away for the number of days you choose, and never returns once they sign up.

9. Currency and language (30 sec)

Add countries and currencies in Settings > Markets, and languages in Settings > Languages. Then turn on the country/region and language selectors in the Header and Footer sections. Theme settings > Currency format adds currency codes (for example €120 EUR) when you sell in several currencies.

10. Social links and sharing image (30 sec)

Paste your profile links in Theme settings > Social media; the icons appear in the footer and the follow sections. Set the image shown when your store is shared in Online Store > Preferences > Social sharing image (1200 × 628px). See SEO and sharing.

11. Going live checklist

  • Every homepage section shows your own images and copy (no grey placeholders)
  • Product and collection sections each have a product or collection picked
  • Pages created and assigned: page.about, page.contact, page.faq, page.showroom or page.lookbook as needed
  • Main menu and footer menu point to real pages
  • Policies filled in Settings > Policies (they appear in the footer)
  • Payment methods and shipping rates set; a test order placed
  • Favicon, sharing image and store meta description set
  • Checked on a phone: menu, cart drawer, search
  • Preview the store with Animations as you want them (reveals, scroll effects, page transitions, preloader)
  • Publish from Online Store > Themes
(Stuck?)

The FAQ answers the common questions, and support replies within two business days.