Girder Theme · Documentation
How to set up every section and setting in Girder, what a few features need before they’ll show up on your storefront, and where to go when something isn’t working.
- Version: 1.0.0
- Author: Harris Digital
- Support: Theme support form
Nothing in Girder renders broken or empty markup when a setting is left blank — sections and blocks simply hide themselves, or fall back to real store data instead of a placeholder. It’s safe to configure the theme gradually.
01 Getting started
- Install the theme and open Customize.
- Work through Theme settings (gear icon, bottom of the left sidebar) first — logo, colors, typography, layout — since every section inherits from these.
- Create the pages listed in section 3, so the header and footer links have somewhere to go.
- Configure each section on the Home page, then the Product, Collection, Search, and Cart templates.
- Walk through section 15 to enable quantity-break pricing, specifications, documents, and Frequently Bought Together.
02 Theme settings
Global settings that every section and page inherits from.
| Group | Controls |
|---|---|
| Logo | Logo style (Image or Text wordmark), the logo image and its width, the wordmark name and tagline, and the favicon. The theme ships a default logo and favicon so a fresh install looks finished immediately — both are placeholders, so replace them before launch. |
| Color mode | Site-wide Light or Dark mode — a hard switch for every visitor, not a per-visitor toggle. |
| Light / Dark colors | Full palette — accent, surfaces, text, borders, sale, success, error — for whichever mode is active. Dark surfaces (header and footer) are shared between modes. |
| Color schemes | Three reusable palettes (Canvas, White surface, Dark) that most content sections can pick from individually — open a section and look for “Color scheme” near the top of its settings. Handy for alternating light and dark bands down the homepage. |
| Typography | Heading and body font pickers (default: Anton headings for a bold industrial look, Work Sans body) plus independent scale sliders. |
| Layout | Page width (Narrow, Standard, Wide) and corner radius (Square to Large), applied theme-wide. |
| Product cards | Toggle vendor, SKU, hover image, quick add; set the exact tag strings for “New” and “Best Seller” badges; set the low-stock threshold. |
| Search | Shows or hides the category dropdown inside the search bar — see section 6 for the one store setting it depends on. |
| Cart | Drawer or full page, order note toggle, optional free-shipping progress bar (match the amount to a real shipping rate you’ve already configured). |
| Social media | Footer icon links — leave a platform blank to hide its icon. |
03 Pages you need to create
Girder ships a template for each of these. Create the page at Content → Pages → Add page, then pick the template under Theme template on the right. Until a page exists, the header or footer link pointing at it has nowhere to go.
| Page title | Theme template | What it does |
|---|---|---|
| Wishlist | page.wishlist | Target for the header heart icon. Use the handle wishlist. |
| Compare | page.compare | Target for the header compare icon. Use the handle compare. |
| Store Locator | page.store-locator | One Location block per physical store. |
| Warranty Registration | page.warranty | Working warranty form, submits to your Contact notification. |
| Request a Quote | page.quote | Bulk and trade quote request form, linked from the utility bar. |
| Trade Account | page.trade-account | Trade account application form, linked from the utility bar. |
| Contact | page.contact | General contact form for shoppers. |
| Theme Support | page.theme-support | Support request form for this theme. Merchants use this to reach us — see section 15. |
04 Header & navigation
Main menu and Categories menu pull from Content → Menus. The categories menu powers the “Shop by Category” dropdown, labeled by the Categories label setting. The dropdown stays hidden until the menu you pick actually has links in it.
Menus to create first
Shopify gives every store just main-menu and footer. Girder’s shipped configuration points at the six handles below, so create these under Content → Menus — or re-point each block at a menu you already have. Anything pointing at a menu that doesn’t exist yet hides itself, so the header and footer stay tidy while you work through the list.
| Handle | Used by | Suggested links |
|---|---|---|
mega-menu | Header main navigation | Your top-level catalog structure; items with sub-links get a dropdown |
categories | Header “Shop by Category” dropdown | One link per collection |
footer-shop | Footer column 1 — Shop | All Products, New Arrivals, Sale, Brands |
footer-customer-service | Footer column 2 — Customer Service | Contact, Shipping, Returns, Warranty, FAQ |
footer-company | Footer column 3 — Company | About, Store Locator, Trade Account, Careers |
footer-account | Footer column 4 — Account | Login, Wishlist, Compare, Order Tracking |
On customer accounts
Stores on Shopify’s current customer accounts have no separate register page — sign-up happens through the same passwordless sign-in. Don’t add a “Register” link to the account menu on those stores; it has nowhere to point.
Sticky header pins the header on scroll. Menu item to highlight adds one highlighted nav item with its own badge text (e.g. “Sale”). Capitalisation and spacing don’t matter, and it works whether or not that item has a dropdown.
Two-level dropdowns
Any menu item whose children have no sub-children of their own gets the simple flat-list dropdown, optionally paired with a single promo image.
Full mega menu (3-level menus)
Give a top-level menu item children that themselves have children (a 3-level structure), and Girder automatically switches that dropdown to the full-width, multi-column mega menu — no separate setting to turn on. Each middle-level item becomes its own column, listing its own children with a “View all” link.
05 Homepage sections
- Featured Products — each Tab block can point at a Collection, or be left blank to pull from your whole catalog automatically (no placeholder products, ever). The “On Sale” tab auto-detects discounted products if you don’t assign a collection to it.
- Brand logos, Promo tiles, Video showcase, FAQ, Testimonials — each takes content blocks added directly in the editor, no external data required.
- Utility bar — the top strip: shipping message, phone number, optional country and language switcher, and custom link blocks.
06 Collection & search
Set columns, products per page, and an optional description or image. Shoppers can switch between grid and list view from the toolbar above the results — no setup needed.
Header promo banner
Turn on Show promo banner next to page title and set an image to show a dark promo card beside the collection title and description — a good spot for a category-specific callout (image, eyebrow, heading, button, link all optional except the image).
In-grid promo banner inserts a separate full-width merchandising banner after a specific product row inside the grid — independent of the header promo banner above.
Search category dropdown
The search bar can show a category dropdown that narrows a search to a single product type. Turn it on or off under Theme settings → Search. Two things to know:
- It uses Shopify’s own storefront filtering, so the Product type filter must be enabled in the Search & Discovery app (Search & Discovery → Filters → Add filter → Product type). Until it is, Shopify ignores the selection and returns store-wide results.
- The options are your store’s real product types, read live — so the list can never offer a category with nothing behind it. The dropdown hides itself entirely if your store has fewer than two product types, or more than the limit set under Theme settings → Search (default 30, raise it to 100 to always show it) — past that limit a select stops being usable, so the filter sidebar handles long lists instead. It is also hidden on mobile, where the search row is too narrow for it.
Filters live outside the theme
Which filters shoppers see, and the price-range slider, come from your store’s Search & Discovery app settings — not the theme editor.
07 Product page
Configure the dynamic checkout button, an order-cutoff hour (drives the same-day-dispatch countdown message next to the SKU), a default shipping and returns block, and a 4-item trust row.
Quantity-break pricing, technical specs, box contents, description highlights, documents, and Frequently Bought Together all need metafields set up once per product — see section 15. Star ratings read automatically once a reviews app is installed; no manual setup needed there.
Related Products and Recently Viewed each have their own heading and an optional “View all” link — leave it blank to hide the link rather than pointing it nowhere.
08 Cart
Cart page: dynamic checkout toggle and an optional shipping-carrier note.
Cart drawer: three configurable trust badges, an add-ons upsell row pulling from a collection you choose, and an optional reassurance line under checkout.
09 Wishlist & compare
The heart and compare icons in the header work immediately — no setup needed — since they save to each shopper’s own browser (not your store’s data). But the pages they link to have to exist for those icons to go anywhere useful; see section 3.
Per-visitor, not per-account
Wishlist and compare lists live in the shopper’s own browser storage. They won’t follow a customer between devices, and a private or incognito window always starts empty.
10 Store locator
Add one Location block per physical store — name, address, hours, and a map link — under a heading and intro text. Leave a location’s map link blank and it automatically links out to Google Maps using the address instead.
11 Warranty registration
Ships as a working form — name, email, product, order number, purchase date, and retailer — that submits straight to your store’s Contact notification, tagged “Warranty registration” so it’s easy to filter in your inbox. The heading and intro text above the form are editable from the section settings.
12 Footer
About text, an optional newsletter block, a payment-icons toggle, plus Menu and Contact blocks you can add per column. Each Menu block points at its own menu from Content → Menus, so give the columns different menus rather than repeating one.
Four Menu blocks and one Contact block ship already headed and ordered — Shop, Customer Service, Company, Account, Get in Touch. Each Menu column appears only once its menu exists and has links, so an unfinished column is hidden rather than shown as a heading with nothing under it. The handles are listed under section 4.
13 Troubleshooting
A footer column or the “Shop by Category” dropdown is missing
The menu it points at doesn’t exist yet, or exists with no links in it. Both hide themselves in that state rather than rendering an empty heading. Create the menu under Content → Menus using the handle listed in section 4.
A section or badge isn’t showing up
Check whether it depends on a metafield or a tag match (the exact “New” or “Best Seller” string in Theme settings → Product cards) — both fail silently by design instead of showing broken markup.
The search category dropdown doesn’t narrow results
The dropdown submits Shopify’s filter.p.product_type parameter, which only takes effect once the Product type filter is enabled in the Search & Discovery app (Search & Discovery → Filters → Add filter → Product type). Note that Shopify’s Category filter is a different source and won’t work here — the dropdown reads product types.
The search category dropdown isn’t there at all
Either it’s switched off under Theme settings → Search, your store has fewer than two product types set on its products (Products → a product → Product organization → Product type), or it has more product types than the limit under Theme settings → Search — the control hides itself outside that range. That last one is the usual cause on a store with very granular product types: raise the limit, or consolidate the types into a smaller set of real categories. It’s also hidden on mobile by design.
Low-stock badge shows on collection pages but not the product page right away
Expected — the product page shows it after a shopper changes variants, since availability is variant-specific. Collection and search grid cards always show it up front. The badge also needs inventory tracking turned on for that product; untracked products have no quantity to count down.
The mega menu isn’t showing columns — just a plain dropdown
The theme switches to the full mega menu only once a top-level menu item’s children themselves have children (a real 3-level structure in Content → Menus). A 2-level menu always gets the simple dropdown, by design.
A mega menu column has no icon
Add a Mega menu column icon block whose Menu item title matches that column’s exact title, and confirm the Icon field isn’t set to “None”.
Mega menu promo panel or bottom tiles aren’t appearing
Check the block’s Menu item title matches that menu item’s title exactly, and that an image is set — both are required. The promo panel additionally needs the parent menu item to have children (a dropdown at all).
A category tile shows a plain icon instead of a photo
That’s the fallback for a tile with no custom image and a collection that has no Collection image set — not a bug. Add one at Products → Collections → that collection → Image.
Wishlist or compare counts look wrong after editing in Customize
Those counts are read from the shopper’s browser storage and repaint automatically whenever the theme editor reloads a section — if a count looks stuck, a normal page refresh always resolves it.
Filters don’t match what I expected
Filter availability comes from Shopify’s Search & Discovery app, not the theme.
14 Frequently asked questions
Do I need to install any apps to use Girder?
No — every section works on a clean Shopify store. Two optional exceptions: Shopify’s free Search & Discovery app supplies storefront filters and the search category dropdown, and star ratings appear once you install any reviews app that writes the standard reviews.rating metafields.
Will I lose my settings when I install a theme update?
Your products, collections, pages, and menus live in your store, so they are never affected. Theme settings and section content, however, are stored per theme — installing an update as a new theme starts from the update’s defaults. Install the update as an unpublished theme, re-apply your settings, preview it, and publish only when it looks right. Keep the old theme until you’re happy.
Can I edit the theme code?
Yes. Bear in mind that edited files are overwritten by a theme update, and that we can’t support custom code — see the support policy in section 15 for exactly what’s covered.
Does Girder work in languages other than English?
The theme ships with English, and every piece of theme text sits in its locale files rather than being hard-coded, so it translates through Shopify’s Translate & Adapt app (or any translation app) like any other Shopify theme.
Do the wishlist and compare lists follow a customer between devices?
No. They’re saved in each shopper’s own browser, so they’re per-device and a private window always starts empty. Nothing is written to your store’s customer data.
Why do all three Featured Products tabs show the same items?
A tab with no collection assigned falls back to your whole catalog — that’s the deliberate no-placeholder behaviour. Assign a different collection to each tab in the section’s block settings.
Can shoppers upload a file with a support or warranty request?
Not through the built-in forms — Shopify’s native contact form has no file-upload support. Every form sends a confirmation email, and the sender can attach files by replying to it.
How do I report a bug or ask a question?
Use the theme support form. It captures your store URL and theme version, which is the fastest route to a fix. Full details are in section 15.
15 Metafields & metaobjects
Quantity-break pricing, technical specifications, what’s in the box, documents and downloads, description highlights, and compatible accessories are powered by custom metafields. Create them once under Settings → Custom data before they’ll appear on the storefront — Shopify has no way to bundle metafield definitions inside a theme, so this is a one-time manual step.
Until a definition exists and has a value, the matching part of the product page simply stays hidden — no broken UI. It’s safe to set these up gradually.
Step 1 — Create four metaobject definitions
Settings → Custom data → Metaobjects → Add definition.
| Metaobject | Fields to add (name — type) |
|---|---|
| Quantity break | minimum_quantity — Integer · price — Money |
| Technical specification | label — Single line text · value — Single line text · unit — Single line text (optional) |
| Description highlight | icon — Single line text (must match an icon name from snippets/icon.liquid, e.g. shield, truck, check) · title — Single line text · text — Single line text |
| Product document | file — File · title — Single line text (optional) · doc_type — Single line text (optional, e.g. “PDF Manual”) |
Step 2 — Create ten product metafield definitions
Settings → Custom data → Products → Add definition.
| Metafield | Type | What it powers |
|---|---|---|
custom.quantity_breaks | List of metaobjects → Quantity break | The bulk-pricing table |
custom.technical_specifications | List of metaobjects → Technical specification | The Specifications tab and the Compare page |
custom.description_highlights | List of metaobjects → Description highlight | Up to 4 shown under the description |
custom.product_documents | List of metaobjects → Product document | The Documents tab |
custom.box_contents | List of single line text | The “What’s in the box” tab |
custom.short_features | List of single line text | Up to 5 bullets near Add to Cart |
custom.related_accessories | List of products | Frequently Bought Together and the related-accessories row |
custom.shipping_returns_info | Rich text | The Shipping & Returns tab |
custom.card_spec_line | Single line text | One short spec line on product cards and in the cart |
custom.custom_badge | Single line text | A custom badge on product cards (e.g. “Editor’s Pick”) |
Reviews need no setup
The star ratings read reviews.rating and reviews.rating_count. That namespace is created automatically the moment you install any compatible reviews app, so there is nothing to create yourself.
Where to start
You don’t need to fill these in for every product on day one. Start with your 5–10 best sellers so the Compare page, Frequently Bought Together, and the Specifications tab have real data to show, then expand from there.
16 Support & support policy
Support form
Preferred — it captures your store URL and theme version for us.
Attachments
Reply to the confirmation email
Attach screenshots or files to the confirmation the form sends you.
Response time
2 business days
Critical, store-breaking bugs are picked up immediately.
Support policy
Every Girder licence includes, for as long as the theme is sold:
- Bug fixes. We fix defects in the theme itself. Critical bugs — anything that breaks the storefront, checkout, or cart — are prioritised immediately; other defects are scheduled into the next release. Fixes ship as free theme updates to every licence holder.
- Setup and usage help. Questions about how a section, setting, or feature is meant to work, and help tracking down why something isn’t appearing. Start with section 13 — it resolves most of these.
- Compatibility maintenance. Updates as Shopify’s platform changes, so the theme keeps working on current Shopify.
- Documentation. This guide is kept current with each release.
What falls outside theme support:
- Custom code, custom design work, or changes to a modified copy of the theme.
- Third-party app behaviour and app conflicts, though we’ll help identify whether the theme is the cause.
- General Shopify admin questions — products, shipping, taxes, payments, domains — which Shopify Support handles.
- Store content: writing copy, sourcing images, or building out your catalog and menus.
When you get in touch, please include your store URL, the theme version (Theme settings → the version shown at the top), the page where you’re seeing the problem, and what you expected to happen instead. It’s the fastest route to a fix.
Girder Theme — version 1.0.0 · Harris Digital