ROOTSTOCK is a premium farm-to-consumer Shopify theme built on Shopify OS 2.0. It includes 44 drag-and-drop sections, farm-specific features not available in any other theme, and a complete design system built around warm amber, sage, and cream tones with Playfair Display headings.
Download the rootstock-theme.zip file.
In your Shopify Admin, go to Online Store → Themes → Add theme → Upload zip file.
Upload the ZIP. When it finishes processing, click Publish on the new theme entry.
Click Customize to open the Theme Editor and begin configuration.
Always click Publish after uploading a new version. Uploading creates an unpublished copy — it does not automatically replace the live theme.
Upload your logo: Theme Editor → Theme Settings → Logo
Set your brand colours: Theme Settings → Colors
Add your navigation menus: Shopify Admin → Online Store → Navigation
Write your store policies: Shopify Admin → Settings → Policies (Privacy, Returns, Terms, Shipping)
Add your social media handles: Theme Settings → Social Media
Create these pages in Shopify Admin → Online Store → Pages and assign the corresponding template from the Theme Template dropdown on each page:
| Page Name | Template to Assign |
|---|---|
| Farm Stand | page.farmstand |
| Order Beef | page.beef-order |
| Contact | page.contact |
Global settings apply across the entire theme. Access them via Theme Editor → Theme Settings (the paintbrush icon).
| Setting | Description | Default |
|---|---|---|
| Primary color | Amber accent used on buttons, badges, links, and highlights | #B5651D |
| Secondary color | Sage green used on secondary actions and hover states | #4A6741 |
| Background | Main page background — warm cream | #FDF8F0 |
| Text | Body text color | #2C2416 |
| Setting | Description |
|---|---|
| Heading font | Used for all headings and section labels. Default: Playfair Display |
| Body font | Used for paragraphs and UI text. Default: Lato |
| Base font size | Root font size in pixels. Default: 16px |
| Setting | Description |
|---|---|
| Free shipping threshold | Dollar amount that triggers the free shipping progress bar in the cart drawer. Set to 0 to disable. |
| Cart upsell collection | Products from this collection appear as suggestions in the cart drawer for items not already in the cart. |
| Setting | Description |
|---|---|
| Farm stand enabled | Shows farm stand info in the footer |
| Farm stand name | Name displayed in the header nav pill and footer |
| Farm stand hours | Text displayed in the footer farm stand card |
| Farm stand address | Used in the footer and in LocalBusiness structured data for Google Maps |
Enter handles (not full URLs) for Instagram and Pinterest. Enter full URLs for Facebook and YouTube. These populate footer social icons and Open Graph / Twitter Card meta tags.
| Setting | Description |
|---|---|
| Enable cookie consent banner | Shows a GDPR banner on first visit. Recommended if selling to EU customers. |
| Message | The consent message shown in the banner |
| Privacy policy URL | Optional link to your privacy policy shown in the banner |
| Setting | Description |
|---|---|
| Enable age verification | Blocks the entire site until visitor confirms age. Off by default. |
| Minimum age | Age required to enter. Default: 21 |
| Heading / Message | Text shown on the verification overlay |
The hero section supports two distinct layouts selected from the Hero layout dropdown.
A full-viewport background image or video with text and CTA buttons overlaid. Best for dramatic opening impact.
| Setting | Description |
|---|---|
| Background image | Main hero image. Recommended: 1920×1080px minimum, landscape. |
| Video URL (MP4) | Self-hosted MP4 URL. The image above is used as the poster frame while the video loads. |
| Overlay darkness | How dark the image overlay is (0–80%). Increase if text is hard to read. |
| Minimum height | Hero height as a percentage of the viewport. 100 = full screen. |
| Logo | Upload your logo to show it above the heading. Enable “Show logo on fullscreen hero” to activate. |
| Content position | Left, Center, or Right — controls which side the text block sits on. |
The screen is divided: your farm photo fills the left two-thirds, and a dark brand panel occupies the right third. Best for establishing brand identity.
| Setting | Description |
|---|---|
| Logo | Shown at the top of the dark panel. Automatically inverted to white. PNG with transparent background recommended. |
| Panel background colour | The dark panel colour. Use your darkest brand colour. Default: near-black #1A1A18. |
| Established line | Subtle text at the bottom of the panel, e.g. “Est. 2018 · Texas Hill Country”. |
Add up to 4 Trust Badge blocks to the hero. Each shows an emoji icon, a label, and a sub-label. Examples:
A full-width image carousel with autoplay, arrows, dot indicators, touch swipe, and keyboard navigation. Add it via Theme Editor → Add section → Slideshow.
| Setting | Description |
|---|---|
| Slide height | Height as % of viewport. Default: 70vh. |
| Auto-rotate slides | Enables automatic slide advancement. |
| Change slides every | Autoplay interval in seconds (3–10s). |
Each slide is a separate block with its own image, overlay, content alignment, heading, subheading, and up to two CTA buttons. Add slides by clicking Add block → Slide in the Theme Editor.
The slideshow pauses on hover and resumes when the mouse leaves. On mobile, swipe left/right to advance slides.
A full-width background video section supporting YouTube and Vimeo. The video autoplays muted on loop. Add via Theme Editor → Add section → Video hero.
Paste your YouTube or Vimeo URL into the YouTube or Vimeo URL field.
Upload a Poster image — this shows while the video loads and on mobile where autoplay is restricted.
Adjust Overlay darkness until your text is comfortably readable over the video.
YouTube videos must be publicly available (not private or unlisted). Vimeo videos must allow embedding. The video plays without sound — there is no audio control by design.
A step-by-step horizontal scrolling panel that walks visitors through your farm process: from land to harvest to table. Add up to 8 “Panel” blocks, each with a step label, heading, body text, and optional image.
| Setting | Description |
|---|---|
| Step label | e.g. “Step 01 — The Land”. Shown in italic above the heading. |
| Heading | Main panel heading, e.g. “Planted with Intention”. |
| Body | Rich text description of this step in your process. |
| Image | Optional photo for this step. Shows in the panel background. |
Displays a grid of products from a collection with Quick View buttons, Quick Add for single-variant products, harvest badges, and sale badges.
| Setting | Description |
|---|---|
| Collection | The collection to display products from. |
| Products to show | Number of products displayed (4–24). |
| Columns | Grid columns: 2, 3, or 4. Automatically collapses to 1–2 on mobile. |
| Show harvest badge | Shows an “In Season” badge on products harvested within the last 7 days (requires farm.harvest_date metafield). |
Hovering a product card reveals a Quick View button (eye icon) and a Quick Add button (+). Quick View opens a modal with the full product — images, variants, quantity, and Add to Cart — without leaving the page. Quick Add instantly adds single-variant products to the cart with a checkmark confirmation.
The product page uses a block-based architecture. Each element is a separate block you can reorder, show, or hide in the Theme Editor.
| Block | Description |
|---|---|
| Vendor | Shows the product vendor/brand name |
| Title | Product title (H1) |
| Price | Price with compare-at, unit pricing, and sold out badge |
| Shop Pay Installments | Renders the Shop Pay “as low as” payment terms widget |
| Harvest badge | Shows harvest date from farm.harvest_date metafield |
| Variant picker | Radio button variant selectors for all product options |
| Subscription options | Shows selling plan groups for subscription products |
| Quantity selector | Styled +/− quantity input |
| Buy buttons | Add to Cart button + dynamic checkout (Shop Pay, Apple Pay, Google Pay) |
| Pickup availability | Shows local pickup availability per variant |
| Description | Product description with full rich text styling |
| Share | Facebook and X (Twitter) share buttons |
| Follow on Shop | Shop app follow button |
Click the main product image to zoom in to 2.2× centered on your click point. Move the mouse to pan while zoomed. Click again or move off the image to zoom out.
When the Add to Cart button scrolls out of view, a sticky bar appears at the bottom of the screen showing the product thumbnail, title, price, and an Add to Cart button. It disappears when the original button comes back into view.
To enable Shop Pay, Apple Pay, and Google Pay on the product page:
Go to Shopify Admin → Settings → Payments and enable Shopify Payments.
Under Shopify Payments, click Manage and enable Shop Pay, Apple Pay, and Google Pay.
In the Theme Editor on the product page, ensure the Buy buttons block has “Show dynamic checkout buttons” checked.
Collapsible information panels below the product description. The key feature: each tab can show different content per product using metafields, so beef products show beef details and honey products show honey details.
Each accordion block has a Metafield key setting. When set, the section checks the product’s custom.[key] metafield first. If content exists there, it shows that. Otherwise, it falls back to the static default text from the theme editor.
Go to Shopify Admin → Settings → Custom data → Products → Add definition and create definitions for each tab (e.g. custom.how_its_made as Rich Text).
In the Theme Editor, set the Metafield key on each accordion block (e.g. how_its_made).
Go to each product in Shopify Admin and scroll to Metafields at the bottom. Fill in the content specific to that product.
Products without a metafield value will automatically show the default content from the theme editor.
| Tab | Metafield Key | Example Content |
|---|---|---|
| How It’s Made | how_its_made | Process description specific to each product type |
| Storage & Shelf Life | storage_info | Temperature, conditions, how long it lasts |
| Shipping & Returns | shipping_info | Ship times, perishable handling, return policy |
You can also override the tab title per product by adding a metafield with the key [key]_heading — e.g. how_its_made_heading with the value “How We Raise It” for beef products.
A tabbed content section on the product page with keyboard-accessible navigation. Available tab types:
| Block Type | Description |
|---|---|
| Description | Renders the product’s Shopify description with full rich text styling |
| Farm Notes | Reads from farm.harvest_date, farm.origin, and farm.notes metafields automatically |
| Shipping & handling | Static rich text shipping information |
| Custom tab | Any heading and rich text content you write |
The Quick View modal loads a dedicated two-column product layout inside a slide-up overlay. The left column shows the product gallery with thumbnail switcher. The right column shows vendor, title, price, variant options, quantity, and buy buttons.
When a customer clicks Quick View on any product card, the theme fetches /products/[handle]?view=quick-view. This loads the product.quick-view template which renders the product-quick-view section — a clean two-column layout designed specifically for the modal.
No setup is required. Quick View works automatically for all products. The modal closes on overlay click, the close button, or the Escape key.
The collection page includes faceted filtering, sort options, product count, and breadcrumbs. Filters are generated automatically from Shopify’s collection filter system.
Go to Shopify Admin → Online Store → Navigation → Collection and search filters.
Add the filters you want customers to use (Price, Availability, Product Type, etc.).
Filters will appear automatically in the sidebar on collection pages.
A chalkboard-style inventory display that pulls live product availability directly from a Shopify collection. Products are grouped by their Product Type. Status (In Stock / Almost Gone / Sold Out) updates automatically from Shopify inventory — no manual updates needed.
The chalkboard board always has a dark green background regardless of which color scheme you select for the section. The color scheme only affects the area surrounding the board. All text inside the board (including the Get Directions button) is always white for readability on the dark background — this is by design and cannot be changed.
Go to Shopify Admin → Products → Collections → Create collection. Name it “Farm Stand”. Set it to Manual.
Add the products currently available at your stand to this collection.
Set the Product Type field on each product (Eggs, Honey, Meat, Produce, etc.) — this controls the category grouping on the board.
In the Theme Editor, go to the Farm Stand page → click the Farm Stand Board section → connect your Farm Stand collection.
| Setting | Description |
|---|---|
| Farm Stand collection | The collection driving the board. Add/remove products here to update availability. |
| Low stock threshold | Products at or below this inventory count show as “Almost Gone”. Default: 5. |
| Stand is open today | Toggle this each morning. Controls the green/grey Open/Closed pill. |
| Hours text | Displayed on the board, e.g. “Tue & Thu 8am–12pm · Sat 8am–2pm”. |
| Today’s note | A chalkboard message, e.g. “Fresh eggs this morning — come early!” |
Each morning: toggle Stand is open today in the Theme Editor and save. When you sell out of something, reduce inventory to 0 in Shopify Admin — it automatically shows as Sold Out on the board. When you add new products, add them to the Farm Stand collection.
A compact strip on the homepage showing the current stand status and a few product availability indicators. Connect the same Farm Stand collection in Theme Editor → Homepage → Farm Stand Teaser.
An interactive ordering tool for custom beef shares. Customers click regions on a cow diagram to select cuts, then add the order directly to their cart with all selections as line item properties.
Create two products in Shopify Admin: “Half Cow — Custom Cut Sheet” and “Whole Cow — Custom Cut Sheet”. These should be physical products with a single variant.
Optionally hide these products from the Online Store sales channel (they’re order-only items).
Go to Shopify Admin → Online Store → Pages → Order Beef → set the template to page.beef-order.
In the Theme Editor on the Beef Order page, find the Beef Cut Sheet section and connect the Half Cow and Whole Cow products.
Customers select Half or Whole cow, then click primal cut regions (Chuck, Rib, Loin, etc.) on the interactive cow diagram to specify their cutting preferences. All selections are added to cart as line item properties that appear on the order in your Shopify Admin.
The cow diagram image (cow_cutout.png) is bundled with the theme. You don’t need to upload anything — it loads automatically. You can replace it with your own image using the image picker in the section settings.
A subscription tier / package comparison section. Ideal for CSA box levels, honey club tiers, beef share sizes, and any subscription offering. Add via Theme Editor → Add section → Pricing packages.
| Setting | Description |
|---|---|
| Show monthly/annual toggle | Adds a pill toggle that lets customers switch between monthly and annual pricing. Each tier has both price fields. |
| Annual discount badge | Badge on the Annual toggle button, e.g. “Save 15%”. |
| Footer note | Text below all the cards, e.g. “Cancel anytime. No contracts.” |
| Setting | Description |
|---|---|
| Emoji icon | Visual identity for this tier, e.g. 🍯 |
| Tier name | e.g. “Honey Lover” |
| Mark as featured | Highlights this card with an amber border and a “Most Popular” badge |
| Monthly price | Number only, e.g. 49 |
| Annual price per month | Number only. Shown when annual toggle is selected. |
| Features | One feature per line. Start a line with ✕ to mark it as “not included”. |
| Capacity note | e.g. “Limited to 30 members” |
| Link to product | Connect the Shopify subscription product for this tier. Takes priority over the URL field. |
A responsive photo grid with a full-screen lightbox. Customers can click any photo to open it full-screen, then navigate with arrows, keyboard, or swipe.
| Setting | Description |
|---|---|
| Columns | 2, 3, or 4 columns. Collapses automatically on mobile. |
| Image block — Featured | Check “Featured” on a block to make it span 2 columns — good for a hero photo in the gallery. |
| Caption | Text shown on hover and in the lightbox below the image. |
Recommended: mix one Featured (wide) image for every 4 regular images. This creates a natural masonry-like rhythm without needing a masonry library.
A dark green section with customer quote cards. Add Testimonial blocks with a star rating (1–5), quote text, customer name, and role/location.
Shows what’s available, coming soon, or not yet in season. Add Item blocks with a season (Spring/Summer/Fall/Winter), product title, and status (available / soon / unavailable). Great for setting customer expectations before they browse products.
A progress bar at the top of the cart drawer shows how close the customer is to free shipping. Configure the threshold in Theme Settings → Cart → Free shipping threshold. Set to 0 to disable.
Shows up to 3 products from a collection in the cart drawer. Only products not already in the cart are shown. Connect the collection in Theme Settings → Cart → Cart upsell collection. A good practice is to create a “Frequently Bought Together” collection for this.
A “Recently Viewed” strip appears at the bottom of product pages showing the last 4 products the customer browsed. This is powered entirely by the browser’s localStorage — no app or server required. It appears automatically with no setup needed.
ROOTSTOCK includes comprehensive SEO meta tags and JSON-LD structured data out of the box.
Product pages use og:type = product with price, availability, and product-specific images. Article pages use og:type = article. Every page has optimised og:image that falls back intelligently: product image → collection image → article image → your default social share image.
Set a Default social share image in Theme Settings → Social Media (recommended: 1200×630px).
| Schema Type | Pages | What It Enables |
|---|---|---|
| Organization + LocalBusiness | All pages | Google Maps integration, business knowledge panel |
| Product | Product pages | Google Shopping rich results, product knowledge panel |
| BlogPosting | Article pages | Article rich results in Google Search |
| BreadcrumbList | Product, Collection, Blog, Article | Breadcrumb path shown in Google SERP below page title |
Search pages and customer account pages are automatically set to noindex, nofollow. Paginated collection pages (page 2+) are set to noindex, follow to prevent duplicate content penalties.
preconnect hints are included for Shopify’s font CDN and asset CDN, reducing font load time by 100–300ms.
Metafields allow products to carry additional data beyond the standard Shopify fields. ROOTSTOCK reads the following metafields:
| Namespace | Key | Type | Used For |
|---|---|---|---|
farm | harvest_date | Date | Harvest badge on cards and product page; Farm Notes tab |
farm | origin | Single line text | Farm Notes tab origin display |
farm | notes | Rich text | Farm Notes tab body content |
farm | season_label | Single line text | “New” badge on product cards (e.g. “Spring Harvest”) |
product | faq | JSON (list of {q, a}) | Dynamic FAQ accordion items |
custom | your key | Rich text | Per-product accordion tab content |
Go to Shopify Admin → Settings → Custom data → Products → Add definition.
Set the Namespace to farm (or custom for accordion content), the Key to the field name above, and select the appropriate Type.
After creating the definition, the field appears on every product edit page under the Metafields section at the bottom.
ROOTSTOCK is compatible with all major Shopify subscription apps. The product page includes an @app block and a Subscription options block that renders selling plan selectors automatically.
| App | Best For | Starting Price |
|---|---|---|
| Seal Subscriptions | Small to medium farms launching subscriptions | Free up to 150 subscribers |
| Appstle Subscriptions | Growing farms needing more customisation | $10/month |
| Shopify Subscriptions | Simple subscribe-and-save with no monthly fee | Free |
| Recharge | High-volume subscription businesses | $99/month + transaction fees |
Subscription apps tag subscribers in Shopify with a customer tag (e.g. honey-club-member). You can then create automatic discounts in Shopify Admin → Discounts → Create discount → Automatic discount that apply a percentage off for customers with that tag. This gives subscribers their member pricing automatically at checkout.
Each subscription app provides its own customer portal URL where subscribers can skip, pause, swap products, and cancel. Add a prominent link to this URL on your account page or in your transactional emails so customers can self-serve.
| App | Portal URL |
|---|---|
| Seal Subscriptions | /tools/recurring/login |
| Appstle | /apps/appstle-subscription |
| Recharge | /tools/recurring/login |
| Shopify native | Built into /account automatically |
Most common cause: A section referenced in the template has a Liquid error that Shopify rejects silently, or a template setting references a setting ID that no longer exists in the section schema.
Try switching the homepage to a minimal template in the Theme Editor — remove sections one at a time until the 404 disappears. The last section you removed is the problem. Contact support with the section name.
Cause: The currently published theme doesn’t include that template, or a section it references has an error that prevents Shopify from registering it.
Confirm the new theme ZIP is published (green “Current theme” badge in Shopify Admin → Online Store → Themes).
Re-upload the ZIP and publish again — do not skip the Publish step.
Go to Theme Editor → Farm Stand page → Farm Stand Board section and connect your Farm Stand collection using the collection picker.
The product.quick-view template must be present in the theme. This is included in the ZIP — re-upload if missing. The modal fetches /products/[handle]?view=quick-view which must resolve to the quick-view template.
Dynamic checkout buttons require Shopify Payments to be enabled and the specific payment methods activated in Shopify Admin → Settings → Payments → Manage. Apple Pay only shows on Safari/Apple devices. Google Pay only shows on Chrome with a saved card.
You need to add content to each product’s metafields. Go to Shopify Admin → Products → [product name] → scroll to Metafields at the bottom and fill in the fields for that product. If the metafield definition doesn’t exist yet, create it in Settings → Custom data → Products first.
This was a known issue in earlier builds caused by the button element being placed after the JavaScript file in the HTML. This is fixed in the current version — re-upload the latest ZIP.
The header uses a frosted glass effect that activates on scroll, a three-column grid layout, and an optional Farm Stand nav pill with a pulsing open/closed dot.
| Setting | Description |
|---|---|
| Navigation menu | The main site navigation. Create/edit menus in Shopify Admin → Online Store → Navigation. |
| Show Farm Stand link | Shows a pill-style “Farm Stand” button in the nav. Toggle the dot colour in the Farm Stand Board section settings. |
| Farm Stand label | The text shown in the nav pill. Default: “Farm Stand”. |
| Farm Stand URL | Where the nav pill links to. Default: your Farm Stand page. |
| Show country selector | Displays a country/region picker in the header for international stores. |
| Show language selector | Displays a language picker for multi-language stores. |
A slim full-width bar above the header for promotions, shipping notices, or seasonal announcements. Enable it by adding the Announcement Bar section to the header group via the Theme Editor.
| Setting | Description |
|---|---|
| Text | The announcement message. Supports basic HTML. |
| URL | Optional link — wraps the entire bar in an anchor tag. |
| Background color | Bar background. Default: amber. |
| Auto-dismiss | Hides the bar after the customer dismisses it (stored in sessionStorage). |
Go to Theme Settings → Logo → Logo image and upload your logo.
Set Logo width to control the display size (default: 120px). The height scales proportionally.
If no logo is uploaded, the shop name is displayed as text using the heading font.
The header uses a transparent background on the homepage hero and transitions to frosted glass when the user scrolls down. On all other pages it starts as frosted glass immediately.
A multi-column section for showcasing your farm’s commitments and certifications. Add via Theme Editor → Add section → Brand values. Each Value block has an icon, title, and description.
| Setting | Description |
|---|---|
| Columns | 2, 3, or 4 columns. Auto-collapses on mobile. |
| Icon | Choose from built-in icons: leaf, map-pin, shield, heart, star, bee, sun, water. |
| Title | Short value name, e.g. “100% Natural”. |
| Description | One to two sentences expanding on the value. |
A full-width signup section combining email newsletter subscription with optional farm pickup information. Best placed at the bottom of the homepage.
| Setting | Description |
|---|---|
| Heading | Section heading, e.g. “Harvest Updates, Right to Your Inbox”. |
| Subheading | One or two sentences about what subscribers receive. |
| Show pickup info | Toggles display of your Farm Stand hours and address below the form. |
Newsletter signups are stored as Shopify customers tagged “newsletter”. Connect Klaviyo, Mailchimp, or Omnisend in your Shopify Admin to sync these customers to your email platform automatically.
Displays recent articles from a blog as cards. Best used on the homepage to drive content engagement.
| Setting | Description |
|---|---|
| Blog | Select which blog to pull articles from. Create blogs in Shopify Admin → Online Store → Blog posts → Manage blogs. |
| Articles to show | Number of article cards displayed (2–6). |
| Show View All button | Adds a “View All Posts” link below the grid. |
Blog content improves SEO and builds customer trust. Suggested article topics:
Embeds a map showing your farm stand location, along with visit details and an FAQ accordion. This section appears on the Farm Stand page (page.farmstand) by default.
Go to Google Maps and search for your address.
Click Share → Embed a map → Copy HTML.
Paste the embed code into the Map embed code field in the section settings.
The embed code from Google Maps works without an API key for basic display. If you need advanced features, sign up for a Google Maps API key at console.cloud.google.com.
A product page section that displays farm-of-origin information pulled from product metafields. Gives customers full traceability — who grew it, where, and when.
Create these definitions in Shopify Admin → Settings → Custom data → Products:
| Namespace | Key | Type | Example |
|---|---|---|---|
farm | farmer_name | Single line text | “James & Maria Holloway” |
farm | location | Single line text | “Fredericksburg, TX” |
farm | harvest_date | Date | 2024-10-15 |
farm | certifications | Single line text | “Certified Naturally Grown” |
farm | story | Multi-line text | A short paragraph about the product’s origin |
ROOTSTOCK includes styled templates for all customer account pages: login, register, account overview, order history, order detail, address book, and password reset.
If you use a subscription app, add a prominent “Manage Subscription” link on the account page pointing to the app’s customer portal. The URL varies by app (see the Subscriptions chapter). Edit the account section in the Theme Editor to add the URL.
Shopify introduced New Customer Accounts in 2024. This theme is built for Legacy Customer Accounts (the default for most stores). If your store uses New Customer Accounts (Shopify Admin → Settings → Customer accounts → New customer accounts), Shopify manages the account interface separately from the theme.
A dedicated FAQ page with category grouping, smooth accordion answers, and automatic FAQPage JSON-LD for Google rich results. To set it up:
Go to Shopify Admin → Online Store → Pages → Add page. Title it “FAQ” or any name you prefer.
In the Theme template dropdown on the right, select page.faq and click Save.
Open the Theme Editor, navigate to your FAQ page, and add questions via Add block → Question. Group them under Add block → Category heading.
The page comes pre-filled with 9 farm-specific questions across three categories. A “Still have questions?” contact prompt links to your contact page — set the URL in the section settings. FAQPage JSON-LD is generated automatically, enabling expandable Q&A in Google search results.
The search page displays results grouped by type: Products, Articles, and Pages. Results include product images, prices, and excerpts for articles. The page is set to noindex by default to prevent duplicate content in Google.
A clean contact form page. Assign the page.contact template to any page to activate it. The form submits to Shopify’s built-in customer messaging system — messages appear in Shopify Admin → Inbox.
The 404 page includes a search bar and links to the homepage and all collections, giving customers an easy path forward when a URL is not found.
Shown when your store is password-protected. Displays your logo and a customisable message. The password form is included automatically. Edit the message in Theme Editor → Password page.
A dedicated page for purchased gift cards showing the card code, remaining balance, QR code for in-store scanning, and an Add to Apple Wallet button. No configuration required — Shopify populates this automatically.
All colours are controlled via Theme Settings → Colors. The theme uses CSS custom properties internally so colour changes propagate everywhere instantly — buttons, links, badges, borders, and section backgrounds all update together.
Go to Theme Settings → Typography. The theme uses two fonts:
The roundness of product cards, buttons, and UI elements is controlled by the Card radius setting in Theme Settings → Layout. Default: 10px. Set to 0 for sharp corners, 99 for fully rounded pill shapes.
For CSS changes beyond what the theme settings offer:
Go to Theme Editor → Theme Settings → Custom CSS (scroll to the bottom of the settings panel).
Enter your CSS. It is injected at the end of the stylesheet and overrides theme defaults.
Custom CSS entered via the Theme Editor is stored in your theme settings and survives theme updates. CSS edited directly in the rootstock.css asset file will be overwritten if you re-upload the theme ZIP.
Many sections support a Color scheme setting that switches the section background between:
Alternating between Default and Surface on consecutive sections creates visual rhythm without heavy contrast.
ROOTSTOCK is built with accessibility as a core requirement, not an afterthought. The following features are included:
alt attributesaria-hidden="true"aria-label attributesrole="dialog" and aria-modalrole="group" and aria-roledescription="carousel"aria-live regionsAll animations and transitions respect the prefers-reduced-motion media query. Customers who have requested reduced motion in their OS settings will see instant transitions instead of animated ones.
All text/background combinations meet WCAG AA contrast ratios (4.5:1 for normal text, 3:1 for large text).
loading="lazy" on all images except the first visible one (which uses loading="eager" and fetchpriority="high")srcset on all product and section imagespreconnect hints for Shopify font CDN and asset CDNcontain and will-change only where needed| Location | Recommended Size | Format |
|---|---|---|
| Hero / Slideshow background | 1920×1080px minimum | JPG (for photos) |
| Product images | 1200×1200px (square) | JPG or WebP |
| Gallery images | 1200×900px | JPG |
| Logo | 400×200px maximum | PNG (transparent) |
| Social share image | 1200×630px | JPG |
fetchpriority="high" but a missing image falls back to a CSS gradient which loads faster.width and height on images in section settings — this is done automatically from Shopify’s image metadata.Use Shopify’s built-in image optimisation. When you upload images through the Shopify Admin or Theme Editor, Shopify automatically serves WebP format to browsers that support it via the image_url filter — no extra work needed on your part.
ROOTSTOCK uses Shopify’s standard translation architecture. All customer-facing strings use {{ 'key' | t }} translation filters and are defined in locales/en.default.json.
Install the Translate & Adapt app (free, by Shopify) from the Shopify App Store.
The app reads the en.default.json locale file and presents all strings for translation.
Add your target languages and translate strings. The app saves translations as additional locale files automatically.
Enable the currency/country selector in Theme Settings → Header → Show country selector. This displays a dropdown letting customers switch region. Requires Shopify Markets to be configured in Shopify Admin → Settings → Markets.
All 44 sections included in ROOTSTOCK at a glance.
| Section | Description | Add Via |
|---|---|---|
| Hero | Full-screen or split layout hero with image/video | Homepage default |
| Slideshow | Multi-slide image carousel with autoplay | Add section |
| Video Hero | YouTube/Vimeo background video hero | Add section |
| Farm Story Reel | Horizontal step-by-step farm process panels | Add section |
| Product Grid | Collection product grid with Quick View | Homepage default / Add section |
| Testimonials | Customer quote cards on dark green background | Add section |
| Seasonal Availability | What’s in season, coming soon, or unavailable | Add section |
| CSA Teaser | Subscription promo with animated stat counters | Add section |
| Brand Values | Multi-column values/certifications grid | Add section |
| Blog Feed | Recent articles from a blog | Add section |
| Image Gallery | Photo grid with lightbox viewer | Add section |
| Newsletter & Pickup | Email signup with optional farm stand hours | Add section |
| Pricing Packages | Subscription tier comparison cards | Add section |
| Farm Stand Teaser | Homepage strip with live stand status | Homepage default |
| Custom Liquid | Free-form Liquid/HTML for custom content | Add section |
| Section | Description |
|---|---|
| Product Main | Gallery, variant picker, buy buttons, all core product blocks |
| Product Tabs | Tabbed Description / Farm Notes / Shipping content |
| Product Accordion | Collapsible info panels with per-product metafield content |
| Know Your Source | Farm-of-origin info from product metafields |
| Product Complementary | App-powered complementary product recommendations |
| Product Related | Related products from the same collection |
| Section | Page |
|---|---|
| Farm Stand Board | Farm Stand page (page.farmstand) |
| Farm Stand Page Hero | Farm Stand page |
| Farm Stand Page Info | Farm Stand page — map, hours, FAQ |
| Beef Hero | Beef Order page (page.beef-order) |
| Beef Cut Sheet | Beef Order page — interactive ordering tool |
| Farm Map | Any page — Google Maps embed |
| Section | Description |
|---|---|
| Header | Logo, navigation, cart, search, Farm Stand pill |
| Announcement Bar | Full-width promotional bar above header |
| Footer | Brand column, link columns, legal column, newsletter, payments |
Five independent animation toggles let you control exactly how much motion the theme uses. Access them at Theme Settings → Layout → Animations.
| Setting | Description |
|---|---|
| Enable animations | Master switch. Disables all scroll reveals, staggered card entrances, label shimmer, and stat pulse instantly. Cards still appear — just without motion. |
| Enable parallax scrolling | The hero image moves slower than the page scroll. Disable for a static, photography-first hero. |
| Enable heading word reveal | Section headings animate word by word on scroll. Disable for instant-load headings. |
| Enable product card tilt | Product cards tilt on a 3D perspective axis when hovered. Desktop only — automatically skipped on touch devices. |
| Enable cursor glow | A soft amber halo follows the cursor on dark sections. Desktop only. |
All animations are automatically disabled for visitors who have enabled “Reduce motion” in their operating system — regardless of these settings. This satisfies WCAG 2.1 AA requirements.
When a customer applies a filter on a collection page, the applied filters now appear as removable amber pill badges above the product grid.
| Element | Description |
|---|---|
| Active filter chips | Each applied filter shows as an amber pill. Clicking any chip immediately removes that specific filter without resetting others. |
| Price range chip | Applied price ranges show as a chip: “Price: $10–$50” with a one-click remove link. |
| Clear all chip | A muted “Clear all” chip appears at the end of the row linking back to the unfiltered collection. |
| Per-group Clear | A small “Clear” link appears inside each filter group when values are selected — so customers can reset just one filter type. |
| Filter count badge | On mobile, the “Filters” toggle button shows an amber circle with the number of active filters so customers know filters are applied even when the panel is collapsed. |
Filters are configured in Shopify Admin → Online Store → Navigation → Collection and search filters. Add Product type, Product tag, Vendor, Variant options, Price, and Availability filters. They appear automatically in the theme once configured.
The contact page now shows phone, email, all social accounts, and supports a subject dropdown.
| Field | Source | Override |
|---|---|---|
| Phone number | Theme Settings → SEO → Phone number | Contact section → Phone number field |
| Email address | Theme Settings → SEO → Email address | Contact section → Email address field |
| Address | Theme Settings → SEO → Street/City/State | — |
| Hours | Theme Settings → Farm Stand → Pickup hours | — |
All social accounts are automatically pulled from Theme Settings → Social Media. Instagram shows the @handle. Facebook, YouTube, Pinterest, X (Twitter), and TikTok show their platform names with icons. Only platforms with a value filled in will appear — no empty icons.
Enable “Show subject dropdown” in the Contact section settings. Add Subject option blocks for each topic. Default options: Order inquiry, Farm stand question, Wholesale inquiry, Beef cut sheet, Something else. The selected topic appears in the message Shopify sends to your inbox.
Tag products that don’t qualify for free shipping — the theme communicates this to customers in three places and excludes those products from the free shipping progress bar calculation.
Go to Shopify Admin → Products → [product] and add the tag no-free-shipping (or your custom tag).
In Theme Settings → Cart → Exclusion product tag, enter the tag you used. Default is no-free-shipping.
Set up the actual shipping rate enforcement in Shopify Admin → Settings → Shipping and delivery using a separate shipping profile for excluded products.
| Location | What customers see |
|---|---|
| Product card | “🚚 Shipping required” badge alongside Sale and Sold Out badges |
| Product page | Truck icon notice below the price: “This item requires a shipping fee and does not qualify for free shipping” |
| Cart drawer progress bar | Excluded items are removed from the qualifying total. Italic note: “* Some items excluded from free shipping offer” |
The theme exclusion only affects the progress bar display. To actually charge shipping at checkout on excluded items, you must create a separate shipping profile in Shopify Admin → Settings → Shipping and delivery and assign excluded products to it.
The Pricing Packages section now appears on the homepage by default, between the CSA Teaser and Brand Values sections, pre-filled with three Honey Club tiers.
To customise, go to Theme Editor → Homepage → Pricing packages. You can rename tiers, change prices, connect each tier to an actual Shopify subscription product using the product picker, or toggle the monthly/annual billing switch on.
To move it, drag the section in the left panel. To remove it entirely, click the section and choose Remove. It can always be re-added via Add section → Pricing packages.
For a beef share farm, rename the tiers to Quarter Share / Half Share / Whole Share with appropriate weights and prices. For a CSA box, use Small Box / Family Box / Farm Share. The section is fully generic.
A collapsible panel on the product page that gives customers complete traceability — who grew it, where, when, and how. It only appears when at least one metafield is populated, so it never shows empty.
Create these in Shopify Admin → Settings → Custom data → Products → Add definition using namespace farm:
| Key | Type | Example |
|---|---|---|
producer_name | Single line text | James and Maria Holloway |
producer_photo | File (image) | Portrait photo of the farmer |
harvest_date | Date | 2024-10-15 |
batch_number | Single line text | HNY-2024-OCT-03 |
origin_location | Single line text | South Hive Row, Fredericksburg TX |
processing_method | Single line text | Cold extracted at hive temperature |
certifications | Single line text | Certified Naturally Grown, Non-GMO |
After creating the definitions, fill in the values for each product by going to Shopify Admin → Products → [product] → scroll to the Metafields section at the bottom.
In Theme Editor → Product page → Know Your Source, the “Show panel even without metafield data” option makes the panel visible as a placeholder while you are setting up — useful during development. Turn it off for the live store.
A dedicated SEO section in Theme Settings → SEO gives merchants control over search engine and local business information.
| Setting | Description |
|---|---|
| Page title suffix | Appended to every page title. Leave blank to use the store name. Example: | Root Stock Farm |
| Home page meta description | Overrides the default home page search result description. Keep under 160 characters. |
| Google Search Console verification | Paste the code value from the meta tag Google gives you (not the full tag — just the code). |
| Bing Webmaster verification | Same — paste only the code value. |
| Facebook App ID | Optional. Improves Facebook share previews. |
These fields populate the LocalBusiness JSON-LD structured data that Google uses for Maps integration and business knowledge panels:
| Setting | Used For |
|---|---|
| Phone number | Schema telephone field; also shown on the contact page |
| Email address | Schema email field; also shown on the contact page |
| Street / City / State / ZIP | Schema PostalAddress for Google Maps |
| Latitude / Longitude | GeoCoordinates for precise Maps pin — right-click your location on Google Maps to get these values |
| Opening hours | Schema.org format: Tu-Th 09:00-17:00, Sa 08:00-14:00 |
| Price range | Shown in Google knowledge panels: $ $$ $$$ or $$$$ |
The Organization/LocalBusiness JSON-LD now includes phone, email, full postal address, GPS coordinates, opening hours, and price range — all sourced from the SEO settings. Google uses this to populate knowledge panels and Maps listings.
The Product Accordion section automatically generates FAQPage JSON-LD from its accordion blocks. When Google indexes your product pages, FAQ entries can appear as expandable question/answer pairs directly in search results below your page title — a significant click-through rate improvement. No additional setup required; it generates automatically from whatever content is in the accordion.
When a YouTube or Vimeo URL is set in the Video Hero section, a VideoObject JSON-LD block is generated including the video title, description, thumbnail, and upload date. This improves video indexing in Google Search and can trigger video-rich results.
Blog article pages now show an estimated reading time in the article meta bar alongside the author and publish date. Calculated at approximately 200 words per minute from the article content word count. Minimum displayed is 1 minute.
rel="prev" and rel="next" link tags are now output in the <head> on paginated collection and blog pages. Search engines use these to understand which pages are part of a series rather than duplicate content.
All theme settings rendered as visible HTML now pass through Shopify’s | escape filter. Social media URLs used in href attributes are escaped to prevent protocol injection (e.g. javascript: URLs).
| Setting | Fix Applied |
|---|---|
| social_facebook, social_youtube (in href) | | escape prevents javascript: protocol injection |
| farmstand_name, farmstand_address | | escape prevents HTML injection in visible text |
| harvest_badge_label | | escape on product card badge |
| business_street, business_city, business_state | | escape on contact page display |
Theme settings are only accessible to store owners and staff with Manage Themes permission — not customers. Injecting script into settings is self-XSS. The real risk was social media URLs in href attributes, which are now fully mitigated.
Collection pages now display the collection title as an H1 heading and the collection description as rich text above the product grid and filters.
Go to Shopify Admin → Products → Collections → [collection].
Fill in the Description field with a paragraph about that collection. This appears below the H1 on the collection page.
The collection title is always shown as H1. The description only appears if it has content.
The collection description also appears in Open Graph meta tags when customers share the collection on social media, and is included in the BreadcrumbList structured data.
Every image in ROOTSTOCK is served through Shopify’s global CDN with automatic WebP conversion and responsive srcset attributes. The sizes below are tuned to balance visual quality with fast load times — uploading larger than recommended wastes storage and slows the editor, while uploading smaller results in blurry images on high-DPI (Retina) screens.
Always upload at 2× the display size for Retina sharpness, in JPG for photos and PNG for logos or images with transparency. Keep file size under 500KB before uploading — Shopify compresses further on delivery but starts from your original.
| Section | Upload size | Ratio | Notes |
|---|---|---|---|
| Hero — Fullscreen | 2560 × 1440px | 16:9 | The largest image in the theme. Displayed edge-to-edge at 100vw. The theme serves a 1920px version to desktop and 800px to mobile automatically via srcset. Upload at full 2560px so Shopify can generate all sizes cleanly. |
| Hero — Split layout (image side) | 1600 × 1200px | 4:3 | Fills the left 55% of the viewport. Portrait-leaning ratio works best. The image bleeds to the panel edge — set the focal point in Theme Editor on anything you don’t want cropped. |
| Video Hero poster | 1920 × 1080px | 16:9 | Shown on mobile (where autoplay video is restricted) and while the video loads. Must match the video aspect ratio exactly to avoid layout shift. |
| Slideshow slides | 2000 × 1125px | 16:9 | Full-width carousel. Use consistent dimensions across all slides — mixing ratios causes height jumps between slides. |
| Beef Hero / Farmstand Hero | 2000 × 900px | 20:9 | Wide cinematic banner. Tall subjects get cropped — set focal point to face or key product area. |
| Collection page hero | 1920 × 600px | 32:10 | Narrow banner at top of collection pages. Very wide and short — landscape or abstract textures work better than portraits. |
| Context | Upload size | Ratio | Notes |
|---|---|---|---|
| Product gallery (main) | 1200 × 1200px | 1:1 | The product page shows images at up to 600px wide on desktop (50vw). Upload 1200px for 2× Retina. Square is the safest ratio — the gallery handles other ratios but square is most consistent across all themes. |
| Product card (collection grid) | 800 × 800px | 1:1 | Cards display at roughly 300–400px. 800px covers 2× Retina. The card’s second image (for hover rollover) should match the first image’s dimensions exactly or it will shift on hover. |
| Variant images | 800 × 800px | 1:1 | Must match the primary product image dimensions. Mismatched variant image sizes cause the gallery to jump height when switching variants. |
| 3D model (.glb) | — | — | Keep .glb files under 15MB. Shopify’s model-viewer handles rendering — upload via the product media panel not the Files section. |
| Section | Upload size | Ratio | Notes |
|---|---|---|---|
| Farm Story Reel panels | 1200 × 900px | 4:3 | Each panel image fills half the section width (50vw max). Portrait images work but get center-cropped — landscape or square fills the space more predictably. The theme serves 600, 900, and 1200px sizes. Use the focal point setting to protect key subjects from cropping. |
| Image Gallery | 1200 × 900px | 4:3 | Gallery cards are roughly 30vw wide. Featured (2-column) images display at ~60vw. The lightbox shows full-resolution up to 1600px — upload 1600px for featured images to look sharp in the lightbox. |
| Testimonial avatars | 160 × 160px | 1:1 | Displayed at 40px, served at 88px (2×). Any larger is wasted. Circular crop — center the face. PNG with transparent background is fine. |
| Seasonal Availability item images | 600 × 600px | 1:1 | Small product-style card images, displayed at ~220px. Square works best. Served at 440px (2×). |
| Newsletter section background | 1400 × 700px | 2:1 | Serves at 800px max. A dark textured or blurred image works best — the section overlay darkens it significantly for text legibility. |
| Farm Map static image | 1200 × 600px | 2:1 | Alternative to an embedded Google Map iframe. Export a screenshot from Google Maps at 2× for Retina or use the Static Maps API. |
| Mega menu promo image | 480 × 600px | 4:5 | Portrait card inside the dropdown panel, displayed at 220px wide. Portrait orientation fills the panel height more naturally. Served at 400px. |
| Promo popup image | 1040 × 480px | 2:1 | Wide banner at the top of the popup, displayed at 520px × 200px. Landscape with a clear focal area in the center — the sides may be cropped on narrow screens. |
| Know Your Source — producer photo | 400 × 400px | 1:1 | Circular portrait crop. Displayed at ~60px on product page. Upload 200px minimum, 400px ideal for Retina. |
| Asset | Upload size | Format | Notes |
|---|---|---|---|
| Header logo | 600px wide (height varies) | PNG (transparent) or SVG | The logo width setting controls display width (80–300px, default 160px). Upload at 2× your intended display width — so 320px minimum, 600px recommended. SVG is ideal: infinitely scalable, tiny file size. PNG must have a transparent background for use on both light and dark headers. |
| Favicon | 32 × 32px | PNG or ICO | Set via Shopify Admin → Settings → Brand → Favicon (not the Theme Editor). Shopify accepts up to 100×100px and scales down. A simple icon with no fine detail works best at 32px. |
| Hero split logo overlay | 400px wide | PNG (transparent) | Shown over the dark panel in split hero layout. White or light-coloured logo recommended — it appears on the dark brand panel. Separate from the main header logo. |
| Format | Use for | Why |
|---|---|---|
| JPG | Photos, hero images, lifestyle shots, product photos | Best compression for photographic content. Shopify converts to WebP on delivery anyway. |
| PNG | Logos, icons, images with transparency, overlays | Lossless. Preserves transparency. Shopify converts to WebP where supported. |
| SVG | Logos, simple icons, decorative graphics | Resolution-independent. Tiny file size. Upload via Online Store → Files, then reference via Custom Liquid or theme code. |
| WebP | Everything (Shopify handles this automatically) | You don’t need to upload WebP — Shopify converts JPG and PNG to WebP for browsers that support it. |
| GIF | Avoid | Large file size, no Retina support. Use a short video instead. |
Compress every image before uploading using squoosh.app (free, no account needed). This is the single most impactful thing you can do for page speed. A large uncompressed hero image is the most common cause of slow Largest Contentful Paint (LCP) scores.
How to use Squoosh:
| Image type | Target file size | Why it matters |
|---|---|---|
| Hero image (fullscreen) | Under 300KB | LCP element — directly impacts your Lighthouse performance score. At 2MB a mobile visitor waits 9+ seconds before seeing your hero image. |
| Hero image (split layout) | Under 200KB | Fills 55% of viewport width — smaller than fullscreen but still above the fold. |
| Product images | Under 150KB | Multiple product images load on collection pages simultaneously. |
| Product card images | Under 80KB | Up to 12 visible at once on a collection page — file size multiplies. |
| Blog article images | Under 200KB | Featured image shown in grid and at top of article. |
| Farm Story Reel panels | Under 150KB each | Multiple panels load together as user scrolls. |
| Logo (PNG) | Under 50KB | Loads on every page in the header. Tiny target is achievable. |
Uploading your camera’s raw JPEG or iPhone photo directly to Shopify. A typical iPhone photo is 4–8MB. On Lighthouse’s simulated slow 4G mobile connection that takes 20–40 seconds to download — resulting in an LCP score that fails Shopify’s 60-point minimum. Always run through Squoosh first.
Set focal points on everything. Shopify crops images differently at different breakpoints. Set the focal point (Theme Editor → click image → Set focal point) on every section image to protect the most important part of the photo from cropping on mobile.
Use consistent ratios within a section. Mixed aspect ratios inside a gallery or story reel create height inconsistency. Pick one ratio per section and stick to it across all images in that section.
Keep product images square. Square (1:1) is the most universal ratio across product cards, featured products, related products, and search results. Shopify handles other ratios, but square never needs to be cropped.
First product image = clean white or natural background. The first image is used in collection grids, cart, emails, and social sharing. Keep it clean. Use lifestyle shots as the second image — they appear on hover rollover.
Don’t upload images larger than 2560px. Shopify’s maximum delivered size is 5760px but the theme never requests larger than 1920px. Anything above 2560px is pure wasted upload time and storage.
ROOTSTOCK is designed to work out of the box without requiring apps for core functionality. However, certain apps unlock features the theme is built to support. The following are our tested recommendations — all either free or with generous free tiers.
The filter panel on collection pages and the swatch filters in the sidebar are built into ROOTSTOCK, but they have no data to display until you configure filters in this app. Without it, the filter sidebar simply won’t appear.
App: Shopify Search & Discovery — Free — by Shopify
Install: Shopify Admin → Apps → Search the App Store for “Search & Discovery”
This is Shopify’s own first-party app. Once installed, go to Apps → Search & Discovery → Filters and add the filters relevant to your products:
Click Add filter and select Product type — this lets customers filter by Honey, Beef, Eggs, Produce etc.
Add Availability — filters to In Stock only. Especially useful during limited harvest periods.
Add Price — gives customers a price range slider.
Add Product tag — lets customers filter by tags you’ve set (e.g. raw, pastured, grass-fed, wildflower).
If you sell products in multiple colours or sizes, add Color and Size — these render as swatch chips in ROOTSTOCK’s sidebar automatically.
The app also controls product recommendations (Related Products and Complementary Products on the product page). Without configuring it, Shopify selects recommendations automatically. With it, you can manually set which products appear alongside each item — which is particularly useful for pairing honey varietals with beeswax products, or beef cuts with seasoning products.
The built-in Analytics tab shows your top searches, searches that returned no results, and top clicked products. The no-results list is especially valuable — it tells you exactly what customers are looking for that you might not have tagged or titled correctly.
App: Judge.me Product Reviews — Free plan available ($15/month for full features) — by Judge.me
Install: Shopify Admin → Apps → App Store → search “Judge.me”
Shopify deprecated their native free review app in 2024. Judge.me is the current best free replacement — and the one we recommend for ROOTSTOCK specifically.
| Feature | Free plan | $15/month plan |
|---|---|---|
| Unlimited review collection | ✓ | ✓ |
| Automated review request emails | ✓ | ✓ |
| Photo and video reviews | ✓ | ✓ |
| Google Shopping rich snippets | ✓ | ✓ |
| Star ratings in Google Search | ✓ | ✓ |
| Q&A section on product pages | ✗ | ✓ |
| Remove Judge.me branding | ✗ | ✓ |
| Coupons for reviewers | ✗ | ✓ |
Why Judge.me specifically for a farm store: photo reviews are included free, which means customers can post photos of their honey jars, beef cuts, and farm stand hauls — the most powerful social proof for food products. It integrates directly with Google Shopping so your star ratings appear in search results without any extra configuration. The free plan supports unlimited reviews with no caps, which matters once you start scaling.
After installing, go to Apps → Judge.me → Widget settings and select your review display style. The review widget will automatically appear on your product pages using Shopify’s App Block system — no code editing required.
App: Shopify Subscriptions — Free — by Shopify
Install: Shopify Admin → Apps → App Store → search “Shopify Subscriptions”
For honey clubs, CSA boxes, and beef share subscriptions. ROOTSTOCK’s product page already includes the Subscription selling plan block — it will appear automatically once you set up subscription plans in this app. Connect subscription products to the Pricing Packages section for the full subscription experience.
App: Klaviyo — Free up to 250 contacts
Install: Shopify Admin → Apps → App Store → search “Klaviyo”
Integrates with ROOTSTOCK’s newsletter signup form and promo popup. All email signups from the store automatically sync to Klaviyo. Use it to send harvest announcements, CSA enrollment windows, and seasonal availability updates. The free plan is generous enough to get started — upgrade when your list grows past 250 contacts.
App: Translate & Adapt — Free — by Shopify
Install: Shopify Admin → Apps → App Store → search “Translate and Adapt”
ROOTSTOCK is built for international selling. This app reads all theme strings from locales/en.default.json and presents them for translation. Enable the country/language selector in Theme Settings → Header first, then use this app to add languages. Required if you want to sell in Spanish, French, or any other language.
This is expected behaviour — it affects specific types of content and is a Shopify Theme Editor limitation, not a bug in ROOTSTOCK.
The Theme Editor has two modes of updating the preview: instant CSS variable updates (color changes, font size) and full section re-renders (anything requiring Liquid). When you change a setting that requires Liquid to recalculate — like switching a color scheme, adding a block, or changing a section — Shopify re-renders that section via an AJAX call. Some decorative elements (like the Farm Story Reel step numbers) are rendered once by Liquid and won’t update visually until Save triggers a full page reload.
Farm Story Reel step numbers (01, 02, 03) — decorative step labels rendered once per page load. Color scheme changes on sections with hardcoded inner CSS. Any new block added to a section. Changes to metafield-driven content (Farm Notes, Know Your Source).
Almost always caused by a Liquid syntax error in one of the section files. In the Shopify code editor, files with errors show a red indicator in the left sidebar. Check these files first: layout/theme.liquid, config/settings_schema.json, and any section you recently edited.
Common causes: a {% if %} without a matching {% endif %}, a CSS comment inside a {% style %} block, or a Python-style True/False boolean in a JSON schema block (must be lowercase true/false).
Caused by a duplicate setting ID in settings_schema.json, or by a section with more than 20 real settings. Shopify silently rejects the schema and shows a blank panel. Open the code editor and check the settings_schema.json file for any ID that appears more than once across all sections.
See the section below — this is a required setup step. The theme name and your store name are different things.
The Search & Discovery app must be installed and at least one filter must be configured. See Chapter 54 — Recommended Apps. Without the app, the filter sidebar has no data to display and is hidden entirely.
Usually a browser caching issue after a theme update. Hard-refresh the page (Cmd+Shift+R on Mac, Ctrl+Shift+R on Windows) to clear the cached JavaScript. If it persists, make sure the product has multiple images uploaded in Shopify Admin → Products → [product] → Media.
Set the Farm Stand Teaser section’s Color scheme to Default (light) in the Theme Editor. The section defaults to Inverse (dark) because it was designed as a chalkboard ticker, but it fully responds to all three color schemes. If you prefer the dark chalkboard look, leave it on Inverse — it’s the most visually distinctive version.
Check that the date format is MM-DD only — for example 05-28 for May 28th. Do not include the year. If you entered dates in the old YYYY-MM-DD format, remove the year portion. Leave both date fields blank and set the Status dropdown to In Season for year-round products.
The popup suppresses itself after being dismissed — it stores a flag in your browser’s localStorage. To see it again during testing: open browser DevTools (F12) → Application tab → Local Storage → find rootstock-popup → delete that entry → refresh. The popup will appear again after the configured delay.
The Mega menu block’s Navigation link title field must exactly match the text of a top-level menu item, including capitalisation. For example, if your menu link says “Shop” the field must say “Shop” — not “shop” or “SHOP”.
Judge.me (or your review app of choice) must be installed and the review widget must be enabled as an App Block. In the Theme Editor, go to a product page → find the Product section → click Add block → Apps → select your review app widget. Save. The widget will then appear on all product pages.
The most common cause is an uncompressed hero image uploaded directly from a phone or camera. A typical iPhone photo is 4–8MB — on a simulated mobile connection that can take 10–20 seconds to download, failing Shopify’s performance requirement.
Fix in 3 steps:
Go to squoosh.app (free, no account) and drag your hero image onto the page.
Set format to WebP, quality to 75–80%. The file size shown at the bottom should drop to under 300KB. Download the compressed file.
In Shopify Admin → go to the section using that image → click the image → Replace image → upload the compressed version.
After replacing the hero image, re-run Lighthouse. LCP (Largest Contentful Paint) should drop from 8–10s to under 3s. See Chapter 53 — Recommended Image Sizes for target file sizes for every section in the theme.
The most common causes on Shopify stores are missing image alt text and insufficient color contrast. Fix both in Shopify Admin:
When you first install ROOTSTOCK, some areas will display “Rootstock” as a placeholder name. Here is everything you need to update to make the theme fully yours.
Go to Shopify Admin → Settings → Store details
Update Store name to your business name — e.g. “Hollow Creek Farm” or “Hill Country Honey”
This name appears in browser tabs, order confirmation emails, and the Shopify-generated footer powered-by link.
Theme Editor → Theme Settings → Header → Logo — upload your main logo here. This appears in the navigation bar. Recommended: PNG with transparent background at 600px wide minimum. See Chapter 53 for full image size guidance.
If you use the Split hero layout, also set the logo in Theme Editor → Hero section → Brand logo — this is a separate logo displayed on the dark brand panel, ideally a white version of your logo.
Go to Theme Editor → Theme Settings → Farm Stand
Set Farm stand name to your business name — this appears on the Farm Stand Board and teaser strip
Fill in Farm stand address and Pickup hours — these appear on the Contact page and in the LocalBusiness structured data that Google uses for Maps
Go to Theme Editor → Theme Settings → SEO
Set Phone number and Email address — these appear on the Contact page and feed the LocalBusiness schema for Google
Fill in Street, City, State, and ZIP — used by Google for your Maps listing
Set Latitude and Longitude — right-click your location on Google Maps, click the coordinates to copy. This pins your exact location in Google’s knowledge panel.
Set Home page meta description — this is the text that appears in Google search results under your homepage link. Keep it under 160 characters and write it as a customer pitch, not a technical description.
Go to Theme Editor → Theme Settings → Social Media and enter your handles for each platform. These populate the footer social icons, the contact page social links, and the Open Graph tags used when pages are shared on social media. Enter handles only — no full URLs needed for Instagram, X (Twitter), Pinterest, and TikTok. For Facebook and YouTube, paste the full profile URL.
The favicon (the small icon in browser tabs) is set in Shopify Admin → Settings → Brand → Favicon — not in the Theme Editor. Upload a 32×32px or 100×100px PNG. Keep it simple — fine detail is invisible at that size.
| Item | Where to set it | Done |
|---|---|---|
| Store name | Shopify Admin → Settings → Store details | ☐ |
| Logo (header) | Theme Settings → Header → Logo | ☐ |
| Logo (hero split) | Hero section → Brand logo | ☐ |
| Favicon | Shopify Admin → Settings → Brand → Favicon | ☐ |
| Farm stand name | Theme Settings → Farm Stand → Farm stand name | ☐ |
| Farm stand address | Theme Settings → Farm Stand → Address | ☐ |
| Pickup hours | Theme Settings → Farm Stand → Pickup hours | ☐ |
| Phone number | Theme Settings → SEO → Phone number | ☐ |
| Email address | Theme Settings → SEO → Email address | ☐ |
| GPS coordinates | Theme Settings → SEO → Latitude / Longitude | ☐ |
| Homepage meta description | Theme Settings → SEO → Home page meta description | ☐ |
| Social media handles | Theme Settings → Social Media | ☐ |
| Policies (Privacy, Returns, Shipping) | Shopify Admin → Settings → Policies | ☐ |
| Color scheme | Theme Settings → Colors (or apply a preset) | ☐ |
| Search & Discovery filters | Apps → Search & Discovery → Filters | ☐ |
| Review app | Apps → Judge.me (or preferred review app) | ☐ |
A flexible editorial section for displaying text with or without a photo. Use it for farm stories, mission statements, team introductions, seasonal announcements, or any block of content that deserves more visual space than a paragraph.
| Layout | Best for |
|---|---|
| Text only (centered) | Mission statements, announcements, pull quotes |
| Image left, text right | Farmer introductions, product stories |
| Text left, image right | Alternating story sections, process explanations |
| Wide image, narrow text | Dramatic landscape photos with a caption-style text |
| Narrow image, wide text | Portrait photos alongside longer editorial copy |
Choose between Square corners, Rounded corners, or Circle. Circle works best with square portrait photos and is ideal for farmer headshots or producer profile photos. On mobile, all layouts stack to a single column with the image on top.
Add up to two buttons — each with its own label, link, and style (filled or outline). Use the second button for a secondary action like “Contact us” alongside a primary “Shop now”.
Use the Rich Text section between product sections on the homepage to break up the selling cadence with storytelling. Shopify’s top-converting farm stores alternate between product grids and editorial content — it builds trust before asking for a sale.
A live countdown section that ticks down to a specific date. Ideal for CSA enrollment deadlines, limited harvest batch sales, farm stand event announcements, and seasonal product launches.
Add section → Countdown timer. Set the End date in YYYY-MM-DD format — e.g. 2026-09-15 for September 15th.
Write your heading, subheading, and CTA button. Keep the heading urgent and specific — “CSA Enrollment Closes Sept 15” converts better than “Sign up now”.
Set Expired message — shown when the timer hits zero. “Enrollment is now closed. Join the waitlist below.” — then add a newsletter section below it.
Enable Hide section when expired if you don’t want customers to see the section after the deadline passes.
Defaults to the Accent (amber) color scheme for urgency. The timer ticks live in the browser — no page refresh needed. Days, hours, minutes, and seconds all update in real time.
Place the Countdown Timer directly above a Newsletter or Pricing Packages section. The urgency of the timer flows naturally into the signup or purchase action below it.
A timed popup for email capture, welcome discounts, or seasonal announcements. Configured entirely in Theme Settings → Promo popup — not in individual page sections.
| Setting | Description |
|---|---|
| Enable popup | Off by default. Turn on when you have an active campaign. |
| Image | Optional banner at the top. 1040×480px landscape recommended. |
| Show email signup form | When on, shows an email field. When off, shows a CTA button instead. |
| Show after (seconds) | Delay before popup appears. Default 4 seconds. 0 = immediate. |
| Dismiss link text | “No thanks” — gives customers an easy exit. Always include this. |
Once dismissed, the popup won’t appear again (stored in browser memory). To see it again during testing: open DevTools (F12) → Application → Local Storage → delete rootstock-popup → refresh the page.
Hovering a product card in a collection grid reveals the second product image with a smooth fade. Only activates on products that actually have a second image — products with one image simply show the standard zoom effect on hover.
Go to Shopify Admin → Products → [product] → Media.
Upload a second image. The first image is the clean product shot. The second image is the lifestyle or detail shot — it appears on hover.
Make sure both images are the same dimensions (1200×1200px square recommended) — mismatched sizes cause the card to shift on hover.
Use a clean white or natural background for the first (primary) image — it appears in search results, emails, and social sharing. Use a lifestyle photo for the second — a jar of honey on a wooden table, a steak on a grill, eggs in a basket. The contrast between clean and lifestyle makes the rollover feel intentional and premium.
When a filter group is named “Color” or “Colour”, or when Shopify’s native swatch system is configured, the filter values render as circular swatch chips instead of plain checkboxes. Active swatches show a double-ring highlight.
Install Shopify Search & Discovery app (free) — see Chapter 54.
In the app, add a filter group and name it exactly Color or Colour. ROOTSTOCK detects this name and automatically renders swatches instead of checkboxes.
On your products, set the variant option name to Color and add variant option values (Red, Blue, Green etc.). Shopify maps these to swatches automatically.
ROOTSTOCK has a three-tone color scheme system. Every content section has a Color scheme dropdown at the top of its settings panel.
| Option | Background | Best used for |
|---|---|---|
| Default (light) | Cream/warm white | Most sections — product grids, text sections, FAQ, contact |
| Inverse (dark) | Deep forest green | Hero, testimonials, CSA teaser, newsletter — creates drama |
| Accent (amber) | Amber/brand color | CTA sections, countdown timer, banners — creates urgency |
Colors for each tone are set once in Theme Settings → Colors → Section color variants. Changing them there updates every section using that tone simultaneously.
Alternate between Default and Inverse schemes as you scroll down the homepage. Light → Dark → Light → Dark creates visual rhythm and makes each section feel distinct. Use Accent sparingly — one or two sections maximum — for maximum impact.
Some sections (like the Farm Story Reel step numbers) require a Save to fully update in the Theme Editor preview. Color changes on sections update instantly — decorative elements rendered by Liquid need a page reload.
ROOTSTOCK uses the native browser View Transitions API to add a smooth crossfade when navigating between pages. No JavaScript library, no performance cost — just a 0.18 second fade that makes the store feel like a premium app.
Supported in Chrome, Edge, Safari (18+), and Firefox (130+) — roughly 92% of browsers. Older browsers get the normal instant navigation with no errors.
Automatically disabled for visitors with Reduce Motion enabled in their operating system — fully accessible.
A soft amber radial gradient follows the cursor with a smooth lag on dark sections — the header, hero, CSA teaser, testimonials, newsletter, footer, and any section set to the Inverse color scheme. Creates a warm ambient light feeling on dark areas of the store.
Desktop only — the effect never fires on touch devices. Disabled automatically when Reduce Motion is on. Can be toggled off entirely in Theme Settings → Layout → Animations → Enable cursor glow.
The glow is intentionally subtle — opacity around 15%. It’s a detail customers feel more than notice. If it ever feels too distracting, disable it in Animation Controls without affecting any other animations.
The Seasonal Availability section uses MM-DD format only for dates — no year. The current year is injected automatically at runtime so you set it once and it works every year.
| Scenario | How to set it |
|---|---|
| Available May through July | Start: 05-01 End: 07-31 |
| Available year-round | Leave both dates blank. Set Status to In Season. Set Season label to “Year Round”. |
| Available November through February (crosses New Year) | Start: 11-01 End: 02-28 — the theme handles the year wrap automatically. |
| Coming soon in 30 days | Set the start date 30 days from today. Card shows “Coming Soon” automatically. |
| Override automatic status | Set the Status dropdown manually to force In Season, Coming Soon, or Out of Season regardless of dates. |
Power user tips for getting the most from ROOTSTOCK.
The highest-converting farm store homepages follow this pattern: Hook → Story → Products → Trust → Action. In ROOTSTOCK sections: Hero → Farm Story Reel → Product Grid → Testimonials → CSA Teaser → Pricing Packages → Newsletter. Alternate Inverse (dark) and Default (light) schemes as you go for visual rhythm.
Don’t just show what you sell — show how it’s made. “1. Hives inspected weekly → 2. Raw honey extracted cold → 3. Never heated above 95°F → 4. Bottled same day”. This section is the most powerful trust-building tool in the theme. Put it above the product grid, not below.
In the Theme Editor, click any section image → Set focal point. Drag the crosshair to the most important part of the photo. On mobile, images are cropped differently — focal points ensure the subject is never accidentally cropped out. Takes 10 seconds per image and makes a significant difference on mobile.
Upload a clean product shot (white/natural background) as the first image and a lifestyle shot as the second. The clean shot appears in all Shopify system contexts (cart, emails, search). The lifestyle shot appears on hover in the collection grid. This split approach gives you both SEO-friendly product images and premium editorial feel simultaneously.
For food products, provenance converts better than star ratings. Fill in the Know Your Source metafields (producer name, harvest date, batch number, origin, processing method) for your top 5 products. Customers who see that data convert at a significantly higher rate — it answers the question “can I trust this food?” before they even ask it.
Place a Countdown Timer section immediately above a Newsletter section with the countdown set to your CSA enrollment close date. When the timer hits zero, the section can auto-hide and the newsletter section below it acts as a waitlist. This sequence captures both buyers (during enrollment) and interested-but-not-ready customers (the waitlist).
Go to squoosh.app, drag your image, set format to WebP at 75–80% quality, download, upload to Shopify. A hero image that takes 2 minutes to compress can cut your Lighthouse LCP from 9 seconds to 2 seconds. Do this for every image — hero, products, blog articles, story reel panels. See Chapter 53 for exact size targets.
Write one article per month about what’s happening on the farm. “What’s in season in October”, “How we extract raw honey”, “The difference between clover and wildflower honey”. These rank in Google and bring customers to the store who are already interested in farm products. Each article should have a featured image (compress it first) and link to at least one product.
The FAQ page generates FAQPage JSON-LD structured data automatically. Google can display your Q&A directly in search results as expandable entries below your page title. Write questions the way customers actually search: “Is your honey raw?” “Do you ship frozen beef?” “How do CSA boxes work?” These match real search queries and can drive traffic directly from Google’s results page without a click.
The “Updated” timestamp and “Today’s note” field are your most powerful tools for repeat customers. Update the note every morning with something specific: “First strawberries of the season today”, “Honey harvest just came in — limited quantities”. Customers who know the board updates daily will check it before every visit. Theme Editor → Farm Stand page → Farm stand board → Today’s note.
The default 4-second delay is intentional. Too fast (0-1 second) and customers haven’t seen anything yet — the popup feels like spam. Too slow (10+ seconds) and engaged customers have already navigated away. 4 seconds lets customers see your homepage and form a first impression before the offer appears. Don’t change it unless you have data suggesting otherwise.
ROOTSTOCK ships with two presets (Honey Farm and Beef Ranch) but you can customise either one. Change the colors in Theme Settings → Colors to match a seasonal campaign — a darker, richer palette for autumn harvest, a lighter more floral palette for spring. The two-preset system means you can keep your standard palette as the default and try seasonal variations as the second preset without losing your original settings.
The three section color tones (Default, Inverse, Accent) all draw from Theme Settings → Colors → Section color variants. Change the “Inverse background” color once and every dark section on the entire site updates simultaneously. This makes seasonal rebranding a 2-minute task instead of updating each section individually.
Payment icons in the footer only appear for payment methods you’ve configured in Shopify Admin → Settings → Payments. On a development store without Shopify Payments set up, the icons won’t appear. Once Shopify Payments is activated, Visa, Mastercard, PayPal, Apple Pay, Google Pay, Shop Pay, and any other enabled methods appear automatically.
ROOTSTOCK ships with two named presets that change the entire look of the theme with one click. Think of them as complete “skins” — different palettes, fonts, corner radii, and tone.
Open the Theme Editor (paintbrush icon in Shopify Admin → Online Store → Themes → Customize).
Click the theme name dropdown at the very top of the left panel.
Select Honey Farm or Beef Ranch. The entire theme updates instantly in the preview.
Click Save to apply. Your previous settings are not permanently lost — switching back to the other preset restores them.
| Setting | Honey Farm | Beef Ranch |
|---|---|---|
| Primary color | Amber #B5651D | Barn red #8B1A1A |
| Secondary color | Sage green #4A6741 | Leather brown #5C4A2A |
| Background | Warm cream #FDF8F0 | Natural white #FAFAF7 |
| Inverse sections | Forest green #1A1F16 | Charcoal #1C1410 |
| Heading font | Playfair Display | Libre Baskerville |
| Body font | Lato | Source Sans Pro |
| Card corners | Rounded (10px) | Sharp (4px) |
| Cursor glow | Enabled | Disabled |
Start from either preset, then customise colors and fonts in Theme Settings → Colors and Theme Settings → Typography. Your customisations override the preset values. To “save” your custom look, keep it as the active state — the presets are always available to switch back to if needed.
When you install a new version of ROOTSTOCK, uploading a ZIP via Shopify Admin replaces all files including your color settings, section layouts, and content. Here is how to update the theme code without losing anything you’ve configured.
The theme includes a deploy-update.sh script and a .shopifyignore file that protect your content files automatically.
Install the Shopify CLI if you haven’t already: npm install -g @shopify/cli
Get your theme ID: shopify theme list --store=your-store.myshopify.com
Run the deploy script from the theme folder:./deploy-update.sh --store=your-store.myshopify.com --theme=THEME_ID
The script automatically skips config/settings_data.json, all templates/*.json files, and the header and footer group files — these contain all your colors, fonts, section layouts, and content.
If you prefer uploading ZIPs through Shopify Admin:
Before uploading the new ZIP: go to your current live theme → Actions → Download. This saves all your customisations.
Upload and publish the new ZIP.
Open the new theme’s Edit code view. Copy these files from your downloaded old theme into the new theme:
config/settings_data.json — all colors, fonts, and global settingstemplates/index.json — homepage layouttemplates/product.json — product page layouttemplates/collection.json — collection page layoutsections/header-group.json — navigation and header settingssections/footer-group.json — footer content| File | Contains | Safe to overwrite? |
|---|---|---|
assets/rootstock.css | All styling | ✅ Yes — merchants don’t edit this |
assets/rootstock.js | All JavaScript | ✅ Yes |
sections/*.liquid | Section templates | ✅ Yes — settings are stored in JSON, not liquid |
snippets/*.liquid | Reusable components | ✅ Yes |
layout/theme.liquid | Main layout | ✅ Yes |
config/settings_schema.json | Settings structure | ✅ Yes — values are in settings_data, not here |
config/settings_data.json | Your actual settings values | ❌ Never overwrite |
templates/*.json | Page layouts and content | ❌ Never overwrite |
sections/header-group.json | Header configuration | ❌ Never overwrite |
sections/footer-group.json | Footer configuration | ❌ Never overwrite |
These are intentional design decisions that may appear unexpected at first.
The chalkboard has a fixed dark green background (#1e2d1a) that never changes. All text inside — including Get Directions — is always white for readability on that dark background. The color scheme dropdown on the section controls the area around the chalkboard, not the board itself.
When the teaser strip is set to Accent (amber), all status text, product pills, and the CTA button switch to white. Green text on amber doesn’t have sufficient contrast — white on amber is clearly readable and passes WCAG accessibility standards.
CSS-driven changes (colors, fonts, spacing) update instantly. Liquid-driven content (Farm Story Reel step numbers, block changes, metafield content) requires clicking Save to trigger a full page reload. This is a Shopify Theme Editor limitation, not a bug in ROOTSTOCK.
On high-DPI (Retina) screens, browsers ignore the src attribute of an image when srcset is present. ROOTSTOCK’s gallery swaps both attributes when you click a thumbnail — this is why thumbnails work correctly on Retina MacBooks and iPhone displays.
The amber glow is intentionally scoped to dark areas — the header, hero, testimonials, CSA teaser, newsletter, footer, and any section set to Inverse scheme. It doesn’t appear on light sections where the amber gradient wouldn’t be visible against cream backgrounds.
Enter month and day only — 05-28 not 2026-05-28. The current year is injected automatically so you never need to update dates annually. For year-round products, leave both dates blank and set Status to In Season manually.
The footer only shows icons for payment methods you’ve actually activated in Shopify Admin → Settings → Payments. On a store where Shopify Payments hasn’t been set up, no icons appear — this is Shopify’s behaviour, not the theme’s.
If a product has only one image, hovering the card shows the standard zoom effect. The rollover fade-out only applies when a second image is uploaded — the product-card--has-rollover class is added conditionally in Liquid and the CSS is scoped to that class.