Vanta documentation

Set up in 30 minutes

Open Online Store → Themes → Customize. Work through these in order; each one takes a few minutes.

Logo. Click the Header section and upload your logo. Use Logo height to size it. For the sharpest result, crop empty space from the file first.
Colours and fonts. In Theme settings → Colors, edit the colour schemes. Every section can use any scheme, so you can alternate light and dark bands down a page. Fonts are under Typography.
Menus. In Online Store → Navigation, build your main menu. Any item with three levels (for example Shop → Women → Dresses) opens as a mega menu automatically. To add campaign images to a mega menu, add a Mega menu block to the Header and type the menu item's name.
Home page. Click each section to swap in your images, collections and text. The hero accepts a short video loop.
Filters and recommendations. Install Shopify's free Search & Discovery app and add colour, size and price filters. Vanta shows them as swatches, size pills and a price slider.
Cart. In Theme settings → Cart, set your free-shipping threshold and, if you want one, a second reward.

A Getting started guide section is included in the editor. It only shows while you edit, never to shoppers. Remove it when you're done.

Home page sections

Add any of these with Add section on any page. All of them have spacing and colour scheme settings.

Section	What it's for
Image banner	Full-width hero with an image or silent video loop, headline, buttons and an optional featured-product card.
Statement	A large editorial sentence with small images set between the words. Each image can link to a collection.
Lookbook	A horizontal strip of tall, wide and small editorial images with captions and links.
Split banner	Two or three large image panels side by side, such as Women and Men.
Collection tabs	Several collections under one heading, switched with tabs.
Featured collection	A grid or carousel of products from one collection.
Collection list	Category tiles with the title below, over the image, or in circles.
Shop the look	A lifestyle image with clickable hotspots tied to products.
Product feature	One product with a story and an add-to-bag button.
Image with text, Rich text, Multicolumn, Collage	Editorial content in different layouts.
Testimonials, Logo list, Social gallery	Customer quotes, press logos (or text logos with quotes), and an Instagram-style grid with product tags.
Marquee, Countdown, Perks	Scrolling text, a sale countdown, and a row of benefits like free returns.
Before / after, Video, FAQ, Stores, Newsletter, Contact form	Comparison slider, video, questions, store locations, sign-up and contact.

Collections and product cards

Product cards

Settings live in Theme settings → Product cards.

Photo browsing on the card: shoppers see up to five photos without opening the product, with arrows on desktop and swipe on phones.
Colour swatches: hovering a colour shows that colour's photo. Choose colour dots or variant images, circles or squares, in Theme settings → Swatches.
Badges: sale, new, sold out, plus your own. Add a product tag such as badge:Bestseller or a custom.badge metafield.
Quick add: choose options in a pop-up without leaving the page. Products with only sizes can show size buttons that add straight to the bag.
Wishlist: a heart on every card, a heart in the header, and a wishlist page. Create a page called Wishlist with the wishlist template. Saved items are kept in the shopper's browser, so no account is needed.

Collection pages

Filters open in a drawer or sidebar, update without reloading the page, and show a live result count.
Load more or infinite scroll instead of page numbers, in the Product grid section settings.
Sub-collection links: create a menu with the same handle as a collection (for example a menu called women for the Women collection). Its links appear as buttons under the collection title.
Promo tiles: add a Promo tile block to the Product grid to place an image or message inside the grid.

Product page

In the editor, open a product and click Product information. Reorder or add blocks:

Variant picker with colour swatches, size buttons and a Size guide link.
Delivery estimate: shows "Estimated delivery Tue, 4 Nov – Thu, 6 Nov" based on your processing and shipping times, skipping weekends, with an "order within" countdown before your cutoff hour.
Fit note: a "runs small / true to size / runs large" scale and a model note.
Size recommender: "If you usually wear M at Zara, take S here."
Complete the look: two to six products shown with the main one, each with quick add.
Back-in-stock form on sold-out sizes. Emails are saved as customers tagged back-in-stock plus the product handle, so you can message them from Shopify or your email app.
Collapsible rows for details, care and shipping. Each can show text, a page or a metafield.

Also included: a thumbnail gallery with hover zoom, full-screen photo viewer, a floating add-to-bag bar, colour-matched photos (the gallery shows the selected colour's images), recently viewed products and recommendations.

The size guide link opens your Size guide page. Set a default page in Theme settings → Swatches, or a different page per product with the custom.size_guide metafield. Without either, a built-in general chart is shown.

Cart

Drawer or page: choose in Theme settings → Cart.
Rewards bar: shows progress to free shipping, then to a second reward such as "10% off your order". Create the reward itself as an automatic discount in Discounts, then match the amount in the theme.
Gift wrapping: create a product called, for example, "Gift wrapping" with a price, and choose it in the cart settings. A checkbox in the cart adds or removes it.
Order note, recommendations and express checkout buttons (Shop Pay, Apple Pay and others, when enabled in your payments).

Find it in the editor under the Footer area: click Popup and turn on Show popup.

Choose email sign-up or an announcement with a button.
After sign-up, show a thank-you message and a discount code with a copy button. Create the code in Discounts first.
Open it after a delay, after scrolling, or when the mouse moves to leave the page.
Choose how many days to wait before showing it again. It never shows again after someone signs up, and you can hide it from logged-in subscribers.
Centre or bottom-corner style. On phones it slides up from the bottom, or you can turn it off for phones.
An optional small tab lets shoppers reopen the offer later.

While the Popup section is selected in the editor, the popup stays open so you can design it.

Product data (metafields)

Vanta reads these fields if you create them in Settings → Custom data. All are optional.

Field	Type	Used for
`custom.complete_the_look`	List of products	Complete the look block
`custom.size_guide`	Page	Size guide link for this product
`custom.fit`	Single line text	Fit note: Runs small, True to size or Runs large
`custom.model_info`	Single line text	Fit note, e.g. "Model is 5'9" and wears S"
`custom.size_equivalents`	Multi-line text	Size recommender, one per line: `Zara: M -> S`
`custom.badge`	Single line text	A custom badge on the product card
`custom.products` (on articles)	List of products	"Shop the story" under a blog post

Product reviews from Shopify's standard reviews.rating field show as stars on cards. To show full reviews, install a reviews app and add its block to the product page.

B2B and Shop Pay Installments

For wholesale customers, Vanta shows and enforces quantity rules (minimum, maximum and "sold in multiples of") on the product page and in the cart, and shows a volume pricing table that updates with the selected variant. When Shop Pay Installments is enabled in your payments, the "pay in 4" message appears under the price automatically.

Languages

Storefront text is included in English, French, German, Spanish, Italian and Dutch. Editor labels are translated into the same languages. Add languages in Settings → Languages; the language and country selectors appear in the header and footer when you have more than one.

Speed and accessibility

Vanta is light: about 16 KB of CSS and 18 KB of JavaScript, compressed. Images load responsively and lazily, animations pause when off-screen, and reduced-motion settings are respected. Menus, drawers, carousels and tabs work with a keyboard and screen readers. Keep hero videos under 10 seconds and 5 MB, and upload images around 2,000 pixels wide.

Updates and help

We release improvements regularly; each version is listed in the theme's changelog. For anything not covered here, email support@mocostudio.app or visit the support page. We reply within one business day.