Getting started
- Install Verbena. In your Shopify admin go to Online Store → Themes, add Verbena from the Theme Store, and choose Customize to open the theme editor.
- Duplicate before big changes. On the theme card, use ⋯ → Duplicate so you always have a working copy to go back to.
- Set your brand. In Theme settings (the gear icon in the editor), upload your logo and favicon, then adjust colors and typography.
- Create menus. In Content → Menus, build your main menu and footer menu. See Header and navigation.
- Add product details. Create the optional product metafields described in Product metafields to unlock subtitles, highlights, ingredients and more.
- Build your pages. Use the page templates for About, Routines and Contact, and arrange sections on each template.
Theme settings
Theme settings apply to the whole store. Open them from the gear icon in the theme editor sidebar.
| Group | What you can change |
|---|---|
| Logo | Logo image, desktop and mobile logo width, favicon. Without a logo, your store name is shown as a wordmark. |
| Colors | Color schemes (background, surface, text, headings, buttons, accent, borders, rating stars), the page background scheme, and sale badge and sale price colors. |
| Typography | Heading font, size scale, letter spacing and case; body font and size scale; label letter spacing. |
| Layout | Page width, narrow content width, desktop side padding, section spacing scale and grid spacing. |
| Buttons | Corner radius, outline border thickness, label case, and arrows on call-to-action buttons. |
| Inputs and corners | Corner radius for inputs, images, panels and drawers. |
| Product cards | Card style, image ratio and fit, second image on hover, subtitle, rating, vendor, quick add, and badge options. |
| Cart | Drawer or page, gift note, free shipping threshold, empty cart recommendations and payment icons. |
| Search | Search suggestions and prices in suggestions. |
| Animations | Reveal sections on scroll and the hover effect. Animations switch off for shoppers who prefer reduced motion. |
| Social media | Links shown as icons in the footer and mobile menu. |
| Currency format | Show currency codes next to prices. |
Color schemes
Verbena ships with six color schemes: Ivory, White, Forest, Sage, Sand and Moss. Every section has a Color scheme setting, so you can alternate backgrounds down the page. Changing a scheme in Theme settings → Colors updates every section that uses it.
Keep enough contrast between text and background. As a guide, aim for a contrast ratio of at least 4.5:1 for body text.
Header and navigation
Menus
The header uses the menu you choose in Header → Menu (by default, Main menu). Create and edit menus in Content → Menus.
- Dropdowns: nest links one level under a top-level item.
- Mega menu: nest links two levels deep (for example Shop → Skincare → Serums). Choose when the mega menu appears with Header → Mega menu.
- Mega menu promo: add a Mega menu promo block to the header and type the top-level menu item it belongs to (for example Shop). Adding a promo always turns that item into a mega menu.
Header options
Choose the desktop logo position, sticky behavior (always, on scroll up, or off), a bottom border, search, and the color schemes for the header and the mobile menu drawer. The Secondary menu appears at the bottom of the mobile drawer.
Customer account icon
The account icon uses Shopify's account component. On new customer accounts it opens an account menu; on legacy accounts it links to sign-in. Choose its links with Header → Customer account menu (by default, Customer account main menu). The icon appears when customer accounts are turned on in Settings → Customer accounts.
Footer
The footer is built from blocks: Brand (logo, text, social icons and Follow on Shop), Menu, Text and Email signup. The bottom bar shows your copyright, policy links, country and language selectors, and payment icons.
- Follow on Shop lets customers follow your store in the Shop app. It appears when Shop Pay is turned on in your payment settings.
- Policies come from Settings → Policies.
- Country and language selectors appear when your store sells in more than one country or language (Settings → Markets and Settings → Languages).
Sections
Add sections from Add section in the editor sidebar. Every section has color scheme and spacing settings.
| Section | Use it for |
|---|---|
| Hero banner | A large image with heading, text, buttons and feature icons. Separate mobile image, nine content positions, contained or full width, a soft fade overlay and an optional round badge. When it opens a page other than the homepage, its heading becomes the page's main heading. |
| Shop by skin concern | Round, arched or rounded images linking to collections. Grid on desktop, swipe slider on mobile. |
| Featured collection | Products from a collection with quick add. |
| Featured product | One product with its gallery (images, video, 3D), variants and buy buttons, anywhere on your store. |
| Routine promotion | An editorial image with numbered routine steps. |
| Routine builder | Filterable routines with step lists and an Add all to cart button. See Skincare features. |
| Product set | A curated set; shoppers choose which items to add. |
| Ingredient spotlight | Ingredient cards with benefits and optional collection links. |
| Before and after | An accessible image comparison slider. |
| Testimonials | Quotes with ratings and optional photos. Choose 1 to 3 cards per view. |
| Journal posts | Recent articles from a blog. |
| Image with text | An image beside a heading, text and buttons. Set an Anchor to link straight to it, for example /pages/about#our-story. |
| Rich text, Icon features, Collection list, Collapsible content | Brand story, trust icons, category tiles and FAQs. |
| Email signup | Newsletter signup. Subscribers are added to your Shopify customer list with marketing consent. |
| Contact form | A contact form with contact details. When it opens a page, it shows the page title and the page's own text. |
| Custom Liquid, Apps | Custom code and app blocks. |
Product pages
The Product information section is built from blocks you can reorder or remove: breadcrumbs, text, title, subtitle, rating, price, description, highlights, variant picker, inventory status, SKU, buy buttons, collapsible tabs, key ingredients, icon features, complementary products, share and Custom Liquid. App blocks can be added too.
- Gallery: thumbnails on the side, below, or stacked images; hover zoom and a full-screen view on tap. Videos and 3D models are supported.
- Buy buttons: quantity selector, dynamic checkout buttons, pickup availability and the gift card recipient form.
- Prices: sale prices, unit prices, volume pricing, quantity rules and subscription options (selling plans) are shown automatically when you use them.
- Sticky add to cart: on mobile, a bar with the add to cart button appears after shoppers scroll past the buy buttons.
Product metafields
These optional fields add skincare details. Create them in Settings → Metafields and metaobjects → Products → Add definition, using exactly these namespace and key values:
| Name | Namespace and key | Type | Shown in |
|---|---|---|---|
| Subtitle | custom.subtitle | Single line text | Product cards, product page, quick add |
| Badge | custom.badge | Single line text | Card and gallery badge, for example "Bestseller" |
| Highlights | custom.highlights | Single line text, list | Highlights block |
| Ingredients | custom.ingredients | Multi-line text or rich text | Collapsible tab |
| How to use | custom.how_to_use | Multi-line text or rich text | Collapsible tab |
| Key ingredients | custom.key_ingredients | Metaobject list (ingredient) | Key ingredients block |
| Skin concern | custom.skin_concern | Single line text, list | Collection filter |
No metafields? You can still add a badge with a product tag that starts with badge:, for example badge:New. Ratings come from the standard reviews.rating and reviews.rating_count metafields that product review apps fill in; stars stay hidden until a product has reviews.
To show key ingredients, create a metaobject definition named Ingredient (type ingredient) with the fields name, image, benefit and description, add entries in Content → Metaobjects, set them to Active, and select them in each product's Key ingredients field.
Variants and swatches
Choose buttons or a dropdown in the Variant picker block. Swatches appear automatically for option values that have a color or image swatch (for example from Shopify's category metafields). Price, media, inventory and the product URL update when shoppers change a variant, and combined listings are supported.
Recommendations
- Complementary products ("Pairs well with") are chosen in Shopify's Search and Discovery app under Recommendations.
- Related products ("You may also like") are generated automatically by Shopify.
Gift cards
Create gift card products in Products → Gift cards. On the product page, shoppers can send the gift card to a recipient by email with a message and a delivery date. The gift card page customers receive shows the code, a QR code, Apple Wallet and a print option.
Skincare features
Routine builder
Add a Routine block for each routine, give it a title, subtitle, optional image and badge, then pick its products in the order they should be used. The card shows the steps, the total price and an Add all to cart button. Without an image, the card shows a composition of the products' photos.
Type comma-separated Filter tags (for example Hydration, Dry skin) and Verbena creates filter buttons above the routines automatically. Totals are the sum of current prices; to offer a bundle discount, create an automatic discount in your Shopify admin.
Shop by skin concern
Each Skin concern block links to a collection and uses its title and image unless you set your own. Smart collections based on tags are a simple way to group products by concern.
Ingredient spotlight
Add an Ingredient block per ingredient with an image, name, benefit and description. To reuse the same ingredients on several pages, connect the block settings to your ingredient metaobjects with Connect dynamic source.
Before and after
Upload two images with identical framing. Shoppers drag the handle or use the arrow keys to compare.
Product set
Pick up to six products. Shoppers untick anything they don't need, the total updates, and the selected items are added together.
Collections and search
- Banner: the collection banner uses the collection's title, description and image, or an override image you choose.
- Category pills: choose a menu in Product grid → Category pills menu to show quick links above the grid.
- Filters: Verbena uses Shopify's storefront filters. Choose which filters appear (availability, price, product type, vendor, variant options and metafields such as Skin concern) in the Search and Discovery app. Filters open in a drawer, or a sidebar on desktop.
- Sorting and pagination: built in. Filtering and sorting update the page without reloading.
- Search: suggestions appear as shoppers type, and the search results page supports the same filters.
Cart
Choose a slide-out cart drawer or a cart page in Theme settings → Cart. Both support quantity changes, discounts, gift notes and dynamic checkout buttons. The free shipping progress bar uses the threshold you set in your store's default currency and hides when shoppers browse in another currency.
Pages, blog and templates
Verbena includes page templates you can assign in Online Store → Pages → (page) → Theme template:
page.about: brand story with values, ingredients and an image with text.page.routines: the routine builder with FAQs.page.contact: the contact form.
Blog posts show tags as filter buttons, comments (with optional moderation), sharing and links to the previous and next post.
Customer accounts
Verbena supports Shopify's new customer accounts through the header account component, and includes styled templates for legacy accounts (login, register, account, orders and addresses).
Languages and markets
All storefront text can be translated in Online Store → Themes → ⋯ → Edit default theme content, or with Shopify's Translate and Adapt app. Country and language selectors appear in the footer when your store sells in several markets or languages.
Speed and accessibility
Verbena loads only the code each page needs, uses responsive images, and is built for keyboard and screen reader use. On our demo store it scores 96 to 99 for performance and 100 for accessibility in Lighthouse. To keep your store fast and accessible:
- Upload images at the sizes suggested in each setting, and add alt text in Products → Media or Content → Files.
- Set a focal point on hero images so they crop well on every screen.
- Install only the apps you need.
FAQ
Why don't star ratings appear on my products?
Ratings come from product review apps that fill in Shopify's standard rating metafields. Install a review app, and stars appear once a product has reviews.
How do I show a "Bestseller" or "New" badge?
Add a custom.badge metafield with the text, or a product tag such as badge:Bestseller. Sale and sold out badges appear automatically and can be turned off in Theme settings → Product cards.
Why isn't my mega menu showing?
A mega menu needs links nested two levels deep under a top-level item, or a Mega menu promo block for that item. Check the Mega menu setting in the header section.
How do I change the filters on collection pages?
Filters are managed in Shopify's Search and Discovery app, not in the theme. Add or reorder filters there and they appear in Verbena automatically.
The Follow on Shop button doesn't appear.
It requires Shop Pay. Turn on Shop Pay in Settings → Payments and make sure Show Follow on Shop is checked in the footer's Brand block.
How do I link a button to a section on the same page?
Give the Image with text section an Anchor such as our-story, then link the button to the page URL followed by #our-story.
Can I translate the theme?
Yes. Use Edit default theme content for theme text and the Translate and Adapt app for your content and additional languages.
How do I update Verbena without losing my changes?
When an update is available, Shopify adds the new version to your theme library and carries over your settings and content. Code edits you made yourself are not carried over, so keep notes of them. Always preview the updated theme before publishing.
Do you offer customizations?
Theme support covers setup questions and bugs. Custom design or code changes are not included; for those we recommend hiring a Shopify Partner. If you edit theme code, duplicate your theme first.
Release notes
Verbena 1.0.0
First release.
- Editorial homepage sections: hero banner, shop by skin concern, featured collection and product, routine promotion, testimonials, ingredient spotlight, journal posts and email signup.
- Skincare features: routine builder with "add all to cart", product sets, before and after comparison, key ingredients from metaobjects.
- Product page with media gallery and zoom, variant swatches and combined listings, subscriptions, quantity rules, volume pricing, gift card recipient form, pickup availability and sticky mobile add to cart.
- Collection and search pages with Shopify storefront filters, sorting and category pills.
- Cart drawer or page with free shipping progress and gift notes; predictive search; mega menu; Shopify account component and Follow on Shop.
- Six color schemes, theme-wide typography and layout controls, and translatable editor settings.
Getting help
Can't find what you need? Contact our support team. We reply within two business days.