Botanica Setup Guide
Everything you need to configure Botanica — a clean, editorial theme built for skincare & beauty brands. Written for the Shopify theme editor; no code required.
Getting started
After installing Botanica, these four steps get you from an empty store to the full demo look.
- Add products. Import your catalog, or use the included
products.csvto load the demo catalog: Products → Import. Prices, variants (size, scent, strength), and tags come in ready. - Set inventory. Import
inventory.csvat Products → Inventory → Import so nothing shows as "Sold out." Rename the location column to match your store's location name first. - Create collections. Make a Bestsellers collection (manual) and one auto-collection per product type (Cleanse, Treat, Hydrate, Masks, Body, Sets).
- Customize. Open Online Store → Themes → Customize and point each section at your collections and content.
Enable storefront filters. Botanica renders every filter Shopify provides, but they're configured in the free Search & Discovery app (Apps → Search & Discovery → Filters), not in theme settings. Add Product type, Size, Scent, and Price for a full faceted experience.
Design & branding
All global styling lives in Theme settings (the gear icon at the bottom of the editor sidebar).
Style presets
Botanica ships with three ready-made looks. Switch the whole theme's palette and type in one click at Theme settings → (top of panel) presets:
Sage
Dewy botanical green on cream — the default.
Blush
Warm pink-clay, soft and feminine.
Charcoal
High-contrast white & near-black, sharp and modern.
Colors
| Setting | Controls |
|---|---|
| Background | Page background |
| Foreground | Body text |
| Accent | Buttons, links, active states |
| Accent text | Text on accent-colored buttons |
| Border | Dividers, input borders |
Typography
Choose a Heading font and Body font from Shopify's font library (all licensed). Heading scale nudges every heading up or down together, and Base font size sets body text.
Layout & buttons
Page width and Section spacing control overall rhythm. Button corner radius and Input corner radius set how round or sharp controls appear. Upload a Favicon (square PNG, 180×180px+) here too.
Social & cart
Add your Instagram / TikTok / Facebook / YouTube / Pinterest URLs (they appear in the footer), and configure the cart drawer's Free shipping threshold, order note, and recommendations.
Color schemes (per section)
Most sections have a Color scheme setting so you can alternate backgrounds down the page without touching global colors:
| Scheme | Look |
|---|---|
| Default | Inherits the page background |
| White | A clean white band (great for alternating) |
| Accent | Filled with your accent color |
| Dark | Inverted dark band |
Alternate Default and White on consecutive sections for a crisp, editorial rhythm — this is how the demo homepage is built.
Header & navigation
- Logo — upload an image and set Logo width. With no logo, your store name shows as text.
- Menu — pick a navigation menu (create menus at Online Store → Navigation). Top-level items with sub-items become dropdowns automatically.
- Sticky header — keeps the header pinned as shoppers scroll.
- Announcement bar — add rotating messages above the header; set the background/text colors and auto-rotate speed. Auto-rotation respects "reduced motion."
Homepage sections
Add, reorder, or remove any of these from Customize → Home page → Add section.
| Section | What it's for |
|---|---|
| Hero (atmosphere) | Editorial hero with a live gradient background, headline, two buttons, trust stats, and a product image. Set height Small/Medium/Large. |
| Benefits | A row of icon + heading + text columns (clean, cruelty-free, etc.). |
| Collection list | "Shop by category" image cards. Turn on Overlay titles for labels over the image. |
| Featured collection | A product grid (e.g. Bestsellers) with quick-add. |
| Key ingredients | An accordion list of actives beside a supporting image. |
| Before & after | A draggable comparison slider — set the before and after images. |
| How to use | Numbered routine steps, each with an optional image. |
| Featured product | Spotlight one product with a working variant picker and add-to-cart. |
| Testimonials | Customer quotes with star ratings and optional avatars. |
| Logo list | "As seen in" press strip — type wordmarks or upload logos. |
| Blog posts | "From the journal" — latest articles from a chosen blog. |
| Image with text | A brand-story block with image, text, and a button. |
| Newsletter | Email signup card wired to Shopify customer capture. |
Some sections use blocks (e.g. Benefits, Key ingredients, How to use, Testimonials). Use Add block inside the section to add items, and drag to reorder.
Product pages
- Media — supports images, video, and 3D models. The first media is the main image; thumbnails appear below.
- Variant picker — options render as pills; price, availability, and the sticky bar update live.
- Trust badges — three editable lines under the buy buttons (free shipping, cruelty-free, returns). Toggle on/off.
- Breadcrumbs — Home / Collection / Product, with a toggle.
- Collapsible rows — add "How to use", "Ingredients", "Shipping" accordions as blocks; edit their content per product.
- Related products — a "You may also like" grid based on Shopify's recommendations.
The "Buy it now" button follows Botanica's accent color. Wallet buttons (Shop Pay, Apple Pay) keep their own brand colors — that's a Shopify requirement and can't be changed.
Collections & filters
- Columns — set products-per-row for desktop and mobile.
- Sorting — toggle the sort dropdown.
- Filters — toggle the filter sidebar. On mobile it becomes a slide-in Filter drawer with an active-filter count.
If no filters appear, install the free Search & Discovery app and add filters there. Botanica renders whatever you configure — Product type, variant options, Price, and Availability all work, including the price range inputs.
Cart drawer
A slide-out AJAX cart opens whenever a product is added. Configure it in Theme settings → Cart:
- Free shipping bar — set the threshold; the progress bar fills as the cart total rises. Set to
0to hide it. - Order note — let customers leave a note at checkout.
- Recommendations — show a "You may also like" row inside the drawer.
Blog & journal
Create posts at Online Store → Blog posts — add a title, excerpt, body, tags, and a featured image, and set visibility to Visible. Then point the homepage Blog posts section at that blog. The excerpt shows on the homepage card; the featured image fills the thumbnail.
Localization
Country/region and language selectors appear in the footer when you enable them in Theme settings → Footer. Manage your markets and languages under Settings → Markets and Settings → Languages in the admin.
Troubleshooting
"Add block" doesn't do anything
Make sure you're inside a section that supports blocks. Click the section first, then Add block within it.
A product shows "$0.00" or "Sold out"
The variant is missing a price or has no inventory. Open the product and check each variant's price, and confirm Track quantity is set with stock available. Watch for a stray "Default Title" variant left from importing.
Images disappear after pushing the theme with the CLI
Content set in the editor lives on the store, not in local files. When developing with the CLI, run shopify theme dev --theme-editor-sync so editor changes save locally, then push.
The "Buy it now" button is the wrong color
Botanica styles the generic button to your accent. Wallet buttons (Shop Pay, Apple Pay) are locked to their brands by Shopify and can't be recolored.
Filters aren't showing
Install the free Search & Discovery app and add filters there — filters are a store-level configuration, not a theme setting.
Support
Need a hand? Reach out and we'll help you get set up.
Email: support@oceanhash.com
Docs: https://themes.oceanhash.com/botanica
Botanica theme v1.0.0 — © Damir Tokubayev.