Repository navigation
Product attributes
Product Attributes lets shoppers narrow your shop down to what they're actually after. Material, colour, room, finish, whatever matters in your trade - you decide what the labels are, tick them onto your products, and drop a filtered grid onto your shop page.
Where it lives now. Attributes used to have a sidebar link of their own. They are now an Attributes tab on Shop → Catalogue. Old links still work.
It needs the Shop module installed and up to date. It works nicely alongside Shop Variations if you have it, and perfectly well without.
Once installed, you'll find a Product attributes entry in the Shop section of your admin sidebar.
Attributes belong to the whole shop rather than to one product, which is the point - one "Colour" filter covering everything beats a different one on every product.
- Go to Shop → Product attributes.
- Type a name ("Material"), choose how shoppers should pick it, and click Add.
- Add its values underneath ("Oak", "Walnut", "Brass").
There are four ways a shopper can pick:
- Tick list - the everyday choice. A column of tick-boxes.
- Colour swatches - little coloured dots. You choose the colour for each value as you add it, and can change it later by clicking the dot.
- Picture swatches - small pictures instead of dots, for the things a colour can't honestly describe: an oak grain, a fabric weave, a brushed brass finish. You choose the picture for each value as you add it, and can swap it later by clicking the square.
- Dropdown - a single-choice menu, handy when there are a lot of values and not much room.
Choose Picture swatches when you add the attribute and each value gets a small square beside it. Click the square to pick a picture from your media library - the library has its own upload button, so a photo still on your desktop and one you filed last month are the same two clicks away. You can also drag an image file straight onto the square, which uploads it and uses it in one go.
Click the square on a value that already has a picture to swap it for a different one.
Beside the picture box there's a Size box, and beside each value you've already added there's a small size link - it shows the size once you've set one, or size? while you haven't. Either way, that's where you record how big the real material in the picture is: "20cm", "200mm", "0.2m" or a plain "20" all read the same way.
It's optional and you can set it at any time, which is rather the point - the swatch photo usually arrives long before anyone tells you the sample was 20 cm square. Click the size link on an existing value to type it in or change it, and leave the box blank to clear it again. Nothing is lost either way: the value keeps its picture, its label and every product ticked against it.
What it's for: anything that draws the material at its true size needs to know how big it really is, since a photo on its own can't say whether it's a 5 cm weave or a 60 cm slab. The 3D material configurator reads it to tile a fabric or a veneer correctly on a model. If nothing on your site draws materials at true size, you can leave every one of these blank and never think about it again.
Pictures are filed in your media library under Shop → Attributes → (the attribute's name), or Shop → Attributes → (the group) → (the attribute's name) once you've put the attribute in a group, not under a product. That's deliberate: a value belongs to the whole shop, so the same oak picture serves every product that carries it, and it doesn't go missing the day you delete whichever product you happened to have open. Rename, crop or optimise the picture later in the library and the filter follows it - no broken squares.
A value with no picture yet shows an empty dotted square, and on the shop it simply shows its label. Nothing breaks while you're still getting round to the photos.
If pictures have ended up in the wrong place - an earlier version of the variations module used to pull a shared swatch picture into whichever product's folder it was used on - the attributes screen has a Tidy picture folders button. Press it and every attribute's swatch pictures are re-filed under Shop → Attributes where they belong, with anything using them (including product options built from the attribute) pointed at the new home. It's safe to press whenever you like: pictures already in the right place stay put.
A swatch photograph earns its size in one place only: the 3D views, which paint the actual file onto a model at true scale and would turn a small one into mush. Everywhere else the same picture is drawn small - and "small" turns out to mean two quite different things. On a product page a swatch grows to a decent size when a shopper hovers it, so it needs a bit of resolution. On a category page it's a dot the size of a full stop, and a dot needs almost none. Serving one big file for both meant shoppers downloading megabytes of fabric photography to look at a row of circles.
So each picture swatch now carries two shrunk copies alongside the original:
- the small copy, which the product page's option swatches draw, including the enlarged preview on hovering one;
- the tiny copy, which category cards and the shop's filters draw for their dots and little tiles.
The original stays exactly where it was, and everything that needs it full-size (the 3D views above all) keeps reading it. Nothing to configure, and nothing changes about how you pick pictures.
New pictures get both copies made automatically the moment you set them on a value. For pictures from before, the attributes screen has a Make copies button: press it once and it works through everything missing either copy, narrating as it goes. It's safe to press at any time - values already sorted are passed over, and a picture that wouldn't benefit (already small, or hosted somewhere outside your library) is simply left as it is, with the shop falling back to the next size up exactly as before. If your swatches got their small copy under an earlier version, this is also how they get their tiny one.
The copies are ordinary files in your media library, filed beside their originals with -small and -tiny on the name, so you can see them, and they all move home together when you file an attribute into a group. Swap a value's picture and the old copies are retired with it; the new picture gets its own.
Each value shows all three pictures on the attributes screen, left to right: the full one, the small copy, the tiny copy. A ring round a square means the shop is actually putting that one in front of customers somewhere. Once both copies exist the full picture usually has no ring at all, which is rather the point of the exercise. A dotted empty square means that copy doesn't exist yet.
Hover any of the three - the empty ones included - and it tells you which copy you're looking at, what it weighs, how many pixels across it is, and which parts of the shop draw it. That's also where you'll find out why a copy is missing: because the original is already small enough that a copy would save nothing, because the picture lives outside your media library and there's nothing to shrink, or because it simply hasn't been made yet - in which case the tooltip points you at Make copies. Clicking the left-hand square still changes the picture, exactly as before; the copies are made from whatever you choose, so there's nothing to pick on the other two.
Untick Show in filters to keep an attribute for your own reference without offering it on the shop. Deleting an attribute takes its values with it, and removes it from every product - so it asks first.
A colour range that runs to several hundred shades would otherwise fill the screen and push everything else off the bottom of it, so an attribute shows its first 30 values and then a single Show all button, which tells you how many there are in total and unfolds the lot in one press. It's per attribute, so opening up Colour leaves the rest of the page as it was, and adding a new value always brings it into view rather than filing it away unseen.
A shop with six attributes reads fine as one list. A shop with thirty does not, which is what groups are for.
- On Shop → Product attributes, type a name under Add a group ("Materials and finishes", "Dimensions") and click Add group.
- Every attribute now has a Group dropdown next to it. Pick the group you want it in.
- Anything you haven't filed sits under Not in a group at the bottom, which is a perfectly respectable place for it to stay.
Groups tidy up this screen and nothing else. Shoppers see exactly the same filters in exactly the same order whether you've spent an afternoon organising or none at all.
Because groups keep things apart, a name only has to be unique inside its own group. If chairs and desks are both measured but measured differently, you can have a Size in each and they will not tread on each other. The one restriction is that you cannot have two of the same name in the same group, which would leave you staring at two identical headings wondering which was which. Not in a group counts as a group for this, so if a name is already sitting there unfiled, put the new one straight into a group using the Group dropdown next to the Add box.
Two conveniences worth knowing. Rename on a group heading changes the name everywhere it appears. Delete group removes only the folder - the attributes inside it drop back to Not in a group with all their values and every product still attached, so it is a tidying-up decision rather than one you need to sleep on.
Each attribute has its own Rename button, and it does rather more than change the heading. Decide six months in that "Seat Colour" was always really "Upholstery Colour", rename it once here, and every product that builds a variation option from it picks up the new name too. No going round forty products changing them by hand.
Two sensible exceptions. If you deliberately gave the option a different name on a particular product - the same colour list added twice as "Seat colour" and "Back colour", say - that product keeps the name you chose. Overriding it was the whole point, so a rename here doesn't barge in and undo it. And if a product already has some other option by the new name, that one is left as it was and Cactus tells you which product, rather than leaving you with two identically named dropdowns and a customer who can't tell them apart.
Whatever happened, you get a line underneath saying how many options followed the rename and which, if any, didn't.
Values are editable too, in the same place and with the same reach. Click a value's label and you can rename it; on a colour-swatch attribute, click the dot beside it to change the colour; on a picture-swatch one, click the square to swap the picture. Nothing has to be deleted and re-added, so nothing gets unticked from a hundred products in the process.
A change here travels the same road a rename of the attribute does. "Oak" becoming "Natural oak" updates it on every product that filters by it, on every variation choice built from it, and in the name of every variation itself - so "Dining chair - Oak / Small" reads "Dining chair - Natural oak / Small" from then on. Web addresses stay as they were, and anything already ordered keeps the wording it was ordered under, which is rather the point of an order. Renaming a value never touches its slug (see just below) - the sheets and products holding on to it keep resolving the same value, which is the whole point of it.
A value can share its name with another on the same attribute. That sounds like a mistake until the supplier sends you "Black" in melamine and "Black" in fabric: same word, different material, different swatch. Add both - shoppers see "Black" twice with two different swatches to tell them apart, which on a swatch or picture control is all they need.
What keeps the two straight behind the scenes is each value's slug - a short lowercase name like black-mfc that never changes when you rename the label. Every value chip shows its slug in small print beside the label; click it to change it. To choose the slug up front, type the value into the Add box as (black-mfc)Black - brackets round the slug, label after - which is exactly the spelling the Google Sheet uses. Leave the brackets off and the slug is made from the label automatically ("black", then "black-2" for a second Black).
One small caution: a dropdown shows text only, so two values called "Black" read identically there. The product's Variations tab points this out when it happens - switch the option to swatches or pictures, or rename one of them.
Every value chip carries a small number beside it: how many products use that value. Click the number and a new tab opens listing them, so the chips you were reading stay where they were.
Two different sorts of use are counted, because they behave differently if you delete the value:
- Ticked on a product - the value is switched on for that product, or for one of its variations. Variations are gathered under the product they belong to rather than listed one by one, so a range with three hundred of them takes up a line rather than a page.
- Copied onto a variation choice - the value was used to build a choice on a product's Variations tab. That copy has a life of its own from then on, and it stays behind if the value here is deleted.
This is the page to open before tidying up. Two values that look like duplicates are often nothing of the sort - one is holding up a hundred products and the other is holding up nothing - and this tells you which is which before you press delete rather than after.
Every attribute and every group has a pair of arrows. Use them to shuffle things up and down until the screen reads the way you think about your stock.
The attribute order is not just for your benefit - it is the order the filters appear in on your shop, top to bottom. Groups sort themselves, and moving an attribute inside a group moves it on the shop too, so what you see here is what a shopper gets.
Picture swatches come along for the ride. Move an attribute into a group, out of one, or between two, and its pictures move to match in your media library. Same when you rename or delete the group, and same when you rename the attribute itself. You will never be left hunting through a folder named after something that no longer exists.
Values order differently: drag one by the handle beside it and drop it where you want. A colour or material list usually runs much longer than the attribute list itself, so dragging beats a pair of arrows for getting "Oak" back above "Ash" after the tenth new finish. This is the order shoppers see the choices in wherever the attribute is shown - the filter, the product page, the variation picker.
The new order follows the value everywhere it has been used. Products that filter by it pick it up, and so does any product that turned this attribute into a variation choice - the dropdown on the Variations tab reshuffles, and so do the variations you have already generated, so a list that ran Ash, Oak, Walnut now runs in whatever order you just put them in. Nothing is rebuilt to do it: every variation keeps its own stock figure, price, photographs and code, and anything already ordered is untouched. Only the order changes.
One exception worth knowing. If you typed a choice straight into a product's Variations tab rather than adding it as a value here, that one isn't this screen's to place, so it settles below the ones that came from here rather than being shuffled into the middle of them. Reordering values here also doesn't rename anything - "Dining chair - Oak / Small" is still called that, it has just moved up or down the list.
- Open any product (Shop → Catalogue → the product).
- Go to its Attributes tab.
- Pick the attributes this product uses from the Add an attribute list.
- For an ordinary attribute, tick its value ("Material: Oak"). Then hit the product's Save changes button.
There's no separate save for attributes: they go with the rest of the product, so one button does everything and the tab keeps an amber dot until it's done. Remove takes an attribute back off the product (and forgets its values for it).
If the value you want isn't there yet, there's an Add a value box under each attribute on the tab. Type it, click Add value, and it's ticked on this product straight away - no trip back to the Product attributes screen halfway through writing a product. For a colour attribute you get a colour picker alongside, and for a picture attribute a thumbnail to click or drop an image onto, same as on the main screen.
Two things worth knowing:
- The value joins that attribute's shop-wide list, so the next product that needs "Oak" ticks it rather than typing it again. That's rather the point: one Oak on the filter, not one per product.
- Because it's a change to the shop's vocabulary rather than to this product, it saves the moment you click Add value - it doesn't wait for Save changes. Typing a value and then abandoning the product leaves the value behind; delete it from Shop → Product attributes if you don't want it.
Type the same label as an existing value and Cactus quietly uses that one instead of making a near-identical twin.
Each attribute you add carries two tick-boxes:
- Use for variations - the value changes from one variant to the next (a jumper in red, blue and green). See below.
- Show in shop filters - untick to keep an attribute on the product for your own reference without offering it to shoppers here. Useful when you only added it to organise the variants. This is per product; the shop-wide Show in filters on the attribute itself still applies on top, so an attribute switched off there is hidden everywhere regardless.
To list an attribute and its value on the product page's own Specification tab - so a shopper reading the page sees "Gas height adjustment: Yes" without having to filter for it - drag it onto the page in the Specification layout below. See Showing attributes on the product page.
Some products need the same attribute more than once. A desk has a material on top and a different one underneath, and setting up "Top material" and "Frame material" as two separate attributes means two filters where shoppers only wanted one.
So you can add the same attribute to a product as many times as it needs. Pick it from the Add an attribute list again - it stays on the list even once it's on the product, marked as already being there - and you get a second block of the same values, with its own ticks and its own tick-boxes.
The one rule: all but one of them needs a name of its own. Each block has its name at the top. Leave it blank and it goes by whatever the attribute is called; type something and this product calls it that. Two blocks going by the same name would tell you nothing about which is which, so Cactus won't save it until you've named them apart - it says which ones clash and waits.
Two things it doesn't change:
- Shoppers still get one Material filter, not one per block. The blocks are how you record what this product is made of; the filter is how shoppers find it. A desk that's oak on top and steel underneath turns up under both.
- The name you give a block is for your benefit on this product. The attribute itself keeps its shop-wide name.
Each block can be set per variant too - see below.
If you have the Shop Variations module, a product's variants often differ in exactly the thing people filter by. A shirt that comes in red, blue and green isn't really "a red shirt" - but someone filtering for red should still find it.
Tick Use for variations on an attribute and it turns up as its own column on that product's Variations tab. Each variant row gets a dropdown, so a red/small and a blue/large can each carry their own Colour. The product then turns up whenever any of its variants match. The values save themselves as you pick them, alongside each variant's price and stock - there's no separate save for that column.
The dropdown ends with + New value…. Pick it, type the label, press Enter, and the value is created and put on that variant in one go. It appears in every other variant's dropdown immediately, so a colour typed on row one is a click away on row twelve. Escape backs out if you change your mind. Values for a variation attribute can also be set up in advance from the product's Attributes tab, using the same Add a value box - handy if you'd rather line up the choices before working down the grid.
An attribute set to Use for variations is no longer ticked here on the product as a whole; its value lives per variant instead.
If you've added an attribute to a product more than once, each block can be set per variant in its own right. Tick Use for variations on both and you get two columns on the Variations tab, headed by the names you gave the blocks.
A boardroom table is the case this exists for. Its top and its edging both come in Beech, Oak, Walnut and the rest - one Finish list - but a customer picks them separately. Add Finish twice, call one block "Main finish" and the other "Edge finish", tick Use for variations on both, and the Variations tab gives you a column each. A variant can be oak on top and white on the edge, or oak on both; the two columns never read each other.
They share the values, which is rather the point: a finish you type into the Edge finish column turns up in the Main finish dropdown straight away, and shoppers still get one Finish filter rather than two.
The naming rule from earlier is doing real work here. The column headings come from the block names, and they're also the column names in a spreadsheet export, so two blocks going by one name would leave you with two identical columns and no way to tell which is which. That's why Cactus insists on it before saving.
You've likely already set up Size and Colour as variation options. No need to type them twice.
Click Copy from variations and Cactus will:
- turn each of the product's variation options into an attribute (so "Colour" becomes a Colour filter),
- mark it Use for variations and put it as a column on the Variations tab,
- create the values it finds, carrying over any colours or pictures you picked for swatches (an option with pictures on it comes across as a picture attribute),
- and set each variant's value to match.
It matches on the option's name, so if three products all have a "Colour" option they all feed the same shop-wide Colour filter rather than making three of them. Run it again whenever you change a product's variants - it tidies up after itself rather than piling duplicates on top.
That's the road in. There's one out, too, and it's now the only way variation options get made at all: over on a product's Variations tab, Add from attributes builds a variation option straight from an attribute you've already set up - pick the attribute, tick which of its values this product actually comes in, and give the option a different name if this product wants one. It's the answer to typing the same eight finishes out on every product in the range.
Those options keep a link back, so a Refresh button on each one picks up new values and renames from the attribute later. It only ever adds and updates - nothing gets deleted behind your back, since every value has real variants and real stock hanging off it.
The link works in both directions where new values are concerned. Add a value to one of those options on a product - a finish you've only just started offering - and it's added to the attribute here as well, so it appears on this screen and is there to pick on every other product without you making a second trip. That holds however the value arrives: typed on the Variations tab, or brought in by a spreadsheet import or a Google Sheet Pull. A name the attribute already has is reused rather than duplicated. The full account is on the Shop Variations page.
If you have the Google Sheet module, each Use for variations block becomes an extra column on the sheet's Variations tab, named after the block - so "Main finish" and "Edge finish" come through as two columns, not one. Type or change a variant's value there and it comes back in on the next Pull, the same as price or stock. A value you type that didn't exist yet is created for you.
You can also add a whole attribute to a product from the sheet, rather than coming back here to tick it: head a spare column on that product's variations tab with the attribute's name - Shipping - fill the cells in, and Pull. The attribute is put on the product as a Use for variations block and the values are saved against each variant.
Deleting the block here is final, whatever the sheet still says. Cactus records that you took that attribute off that product, and no column heading puts it back; adding it here again lifts that, because you have said yes rather than the sheet saying it for you. An attribute you already keep as ordinary product information on that product is never quietly converted either - the heading is declined and the product left alone. The full account is on the Google Sheet Products page.
Filters help a shopper find a product; the Specification tab helps them read one. The same attributes can do both. Underneath the attributes on the Attributes tab you'll find Specification layout - the one place you decide what shows on the product page and how it's grouped.
Every attribute you've put on the product starts in Not shown. Drag one up onto the page and it appears on that product's Specification tab as a plain "name: value" line - "Tilt tension: Adjustable", "Backrest: Height adjustable". Drag it back down to Not shown to take it off again. Anything on the page replaces the standard specification facts (SKU, type, weight, dimensions); a product with nothing on the page carries on showing those as before.
Attributes you set per variant can go on the page too, not just the ordinary ones. A per-variant attribute has no single value on the product as a whole, so it lists the ones its variants actually use - drop "Upholstery colour" onto the page and a shopper reads "Upholstery colour: Black, Grey, Blue". Only the values on variants that are switched on are counted, so a colour you've retired doesn't linger in the spec.
Plenty of facts aren't fixed for a whole listing. A chair's seat height, its weight, whether it has a tilt lock - all of it moves with the options chosen. Give a value to each variant and the Specification tab handles both readers at once.
Before anyone has picked their options, a line like that describes the whole range rather than pretending to a single answer:
- Measurements become a span - "Seat height: 44cm - 56cm", "Weight: 8.4kg - 23.4kg".
- A handful of names is simply listed - "Tilt: Synchro, Anti-shock".
- Too many to read becomes a count - "Finish: 92 choices - select your options to see yours". A ninety-two item list isn't a specification, it's a wall.
The moment a shopper settles on a full combination, the table stops describing the range and describes the chair they've actually configured: every one of those lines swaps to that variant's own figure, and the same Your choice pill that sits over the picture appears above the table so it's clear what they're reading. Lines that don't apply to their pick simply go - a bespoke-only fabric range disappears on a stock chair, arm dimensions disappear on the armless version - rather than sitting there blank.
Nothing is needed to switch this on. Give a fact one value on the product and it stays put; give it a value per variant and it follows the shopper. A fact you've set identically on every variant is treated as fixed, so it doesn't get badged as a choice when it never was one. And because the range version is written into the page itself, search engines and anyone without JavaScript still read the full specification.
A long flat list of facts is hard to skim, so you can group them under headings of your own - Mechanisms, Guarantee, Materials, whatever suits:
- Click Add section and give it a name.
- Drag attributes into it - straight from Not shown or from another section. The little handle on each one is your grip. Drop one back onto the loose area above the sections and it still shows, just without a heading.
- The arrows beside a section's name move the whole section up or down; Remove takes the heading away and tips its attributes back into the loose pile above the first heading, rather than hiding them.
Sections are per product, so the headings you build on a chair don't clutter up a desk that never needed them. Drag, name and order it once, hit Save, and that's exactly how it reads on the page. Nothing here changes your filters or your variants - it's only about what a shopper sees written on the product itself.
On the page itself, each section is its own boxed group and they sit three across on a desktop screen, dropping to two on a tablet and one on a phone - the same widths your other responsive layouts collapse at, set under Styles > Spacing & Breakpoints. The groups stack tightly down each column, so a short group never leaves a well of empty space beneath it just because its neighbour ran long.
If your sections come in very different sizes - one giant Dimensions group and a handful of two-liners, say - the Product: Sections block in the page builder has an Auto-sort specification groups option. Switched on, the biggest groups lead and the small ones fill in behind them, keeping the columns close to level; switched off (the default), the groups follow the order you built on the Attributes tab.
Drop the Shop: Filtered Product Grid block onto your Shop Home, Category or Collection layout. It's the shop's usual product grid with filters attached, so your product cards look exactly as they do everywhere else - it uses the same Product Card design.
The block's options:
| Option | What it does |
|---|---|
| Category / Collection / Tag slug | Narrows down which products appear, same as the ordinary grid |
| Number of products | How many to show |
| Columns | How many across |
| Filters | Down the left, or across the top |
| Show product counts | Whether each option shows how many products match |
| Card layout | Which Product Card design to use; leave it be and it uses your published default |
Ticking a filter is instant - no page reload, no waiting. The address bar keeps up, so a shopper can bookmark "oak sideboards" or send the link to someone else and it'll open filtered.
Ticking two values of the same attribute widens the net; ticking values of different attributes narrows it. So Red and Blue under Colour, plus Oak under Material, means "red or blue, and oak" - the same way every high-street shop's filters work, because that's what people expect.
Filter options that nothing on the page could match are hidden, so a category page never offers a tick that always comes back empty.
- Filtering covers the products the grid has loaded, and a grid tops out at 100 products. For most shops that's the whole shelf and nobody notices. If you're running a catalogue in the thousands, this block isn't the right tool for the job.
- A variant you've switched off is left out of filters. It isn't buyable, so sending someone to it would only annoy them.
- If your shop hides products that have sold out (Settings → Shop → General → Out of stock products), the grid never loads them, so the filters agree with every other listing on the site.
- Renaming an attribute changes its web address, so any bookmarked filter link for the old name stops working. Worth settling on a name before you advertise the link.
- Removing the module takes your attributes and their assignments with it. Your products are untouched.
Wiki: Home · Managing pages · Appearance and design · Managing users · Managing media · Modules · Gazette · Boards · Directory · Shop · Shop Variations · Product Attributes · Reply Catcher · Gemini Watermark Remover · Ultimate SEO · UK Bookkeeping · Configuration reference