This template was built for makers, small studios, and independent brands who want a considered online presence without the overhead of a bespoke build. Everything — from the product catalogue to the journal — is driven by Framer’s CMS, and a handful of targeted code overrides handle the more nuanced behaviour. Here is how to make it yours.

The CMS Collections

The template is organised around nine collections. Most daily work happens in just four of them: Brand, Navigation, Products, and Journal. The remaining collections (Filter, Colour, Product Type, Status, and Social Links) act as reference data that the filtering system and footer draw from — set them up once and they largely take care of themselves.

Your Brand

Start in the Brand collection. There is a single item here containing your brand name, main and hover logo images, and the latitude and longitude used by the live weather widget in the footer. Update these fields first — the brand name and logos propagate throughout the site automatically, and the weather widget will begin pulling real data for your location as soon as the coordinates are in place.

Navigation

The Navigation collection controls which links appear in the main header and which appear in the footer policy section. Each item has a Title, a Link, and two boolean toggles: Main Navigation (shown in the header) and Policy Page (shown in the footer). Reorder or hide links simply by toggling those fields.

Adding Products

Each item in the Products collection has two images (a card thumbnail and a main detail image), a gallery, and a set of specification fields — material, finish, size, weight, capacity, and care instructions. These populate the product detail page automatically. The Featured boolean controls whether the product appears in the homepage featured slot.

The Filter Terms Field

This is the most important field to get right. The Filter Terms field is a plain string of space-separated slugs that describes everything about a product that a visitor might filter by. For example:

tumbler charcoal-black stone-white available

Each slug corresponds to the Slug field of an item in the Product Type, Colour, or Status collections. When you add a new colour option or product type, give it a slug in its collection, then include that same slug in the Filter Terms of any product it applies to. The filtering on the products page is powered by a small set of code overrides included with the template — already wired up, nothing to configure. Filtering is driven entirely by this Filter Terms field, so once the slug is added here, the relevant filter chip will work automatically.

Writing Journal Entries

The Journal collection needs a title, a short description (used in cards and page meta), a cover image, and the main content body — a rich text field that supports headings, paragraphs, and inline formatting. The slug is generated automatically from the title. The detail page pulls the previous and next items automatically, so navigation between entries requires no extra configuration.

The template is designed to stay out of your way. Once the CMS is populated and the brand details are in place, the site runs itself — the filtering responds, the navigation updates, the weather displays. The work left to do is the work that matters: making things worth sharing.

Advanced: Adding a New Filter Group

Most buyers won’t need this section — it’s only relevant if you want to add an entirely new filter category (e.g. Material, Size) beyond the three included by default (Product Type, Colour, Status).

The live filtering behaviour on the products page is powered by three code overrides defined in Advanced_Filter_by_Bough_Studio.tsx. They work together through a shared in-memory store — no backend, no database round-trips — and are applied directly to canvas layers in the Framer UI.

FilterChipToken is applied to each filter chip. It reads the chip’s dataId prop (which should match a slug in your Filter Terms strings) and registers it with the shared store. When tapped, it toggles that slug as an active filter. If activating the chip would produce zero results given the current selection, the chip is automatically dimmed, struck through, and disabled.

WrapperGateByCardDataId is applied to the CMS collection wrapper on the products page. It reads each card’s Filter Terms field and hides cards whose terms do not contain every currently active slug — AND logic across all active filters.

ResultsCountText is applied to a text layer and displays a live count of how many products currently match the active filters. It updates in sync with both overrides above, so the number always reflects the visible results.

Adding a new filter group is a two-stage process — one in the CMS, one on the canvas. The easiest way to do it correctly is to use the existing Colour collection as your template, since it already has all three required fields in the right shape.

Stage 1 — The CMS

In the CMS, navigate to the Filter collection and add a new item for your group — for example, slug: material, title: Material. This registers the group label.

Next, duplicate the Colour collection in Framer — this gives you a collection that already has the correct three fields: Slug, Title, and Filter (a single collection reference back to the Filter collection). Rename the duplicate (e.g. Material), clear the copied items, and add your own options — each with a unique slug and a reference to your new Filter item. Finally, for every product the new filter should apply to, add those slugs to its Filter Terms field.

Stage 2 — The Canvas

The products page does not need to be touched. The filter_nav component already loops over the Filter collection automatically, so your new Filter item will appear there as soon as it exists. What needs editing is the filter_group component, which is where the chip rows live. Open it in the component panel and find the three existing chip-list frames — one each for Colour, Status, and Product Type. Duplicate the Colour chip-list frame. In the duplicate, update the CMS collection binding to your new collection, update the chip’s Title and Slug bindings to the equivalent variables in your new collection, and update the visibility condition to match the ID of your new Filter item — you will need to locate this ID in Framer’s CMS interface. The FilterChipToken override carries over automatically on the duplicated chip instance, so no manual reapplication is needed.