Organizing your shop

Collections structure your Shopping App and organize your products. If your app were a physical shop, the collections would be its aisles.

They also decide what your customer can reach. A product attached to no collection does exist in your shop, and it does sell, but it's reached through its direct address: through a link you send, through a search, through a home screen widget. Attaching every product to at least one collection is therefore the first reflex, before even thinking about your organization.

They're flexible on two counts. In time first: a collection is added, deleted, shown or hidden in one click, which makes temporary collections possible. In organization next: they cut across each other, and the same product belongs to several collections at once.

That cross-cutting quality is what deserves your attention when you create them. Take our home decoration shop. A customer looking for a decorative object can think along three different lines: the room concerned, the type of object, the trend of the moment. So we created nine collections spread over those three lines:

By room: Bedroom, Bathroom, Kitchen

By type of object: Frames, Vases, Pillows

By trend: Big in Japan, Keep it Slow, Words matter

Every product therefore belongs to several collections. It has more chances of being seen, and the customer has more chances of finding it by the route that comes naturally to them.

On top of that comes a Sales collection, which gathers discounted products. It changes over time, and is hidden outside the sales season.

Go to Products › Collections. Click Create a collection.

You then enter the title, an illustration image, and the display order of the products. The title is limited to 32 characters, which is a useful constraint: an aisle name is read in a menu, on a phone screen, and short names always win there.

For the display order, the rule is always the same: ask yourself what your customer is looking for.

Six automatic orders are offered, in pairs: creation date, newest to oldest or the reverse, price, lowest to highest or the reverse, and title, A to Z or Z to A. The seventh mode is manual.

• Date puts new arrivals first. That's the right choice for a clothing shop restocked regularly, or for a bookshop whose customers come back looking for new reading.
• Ascending price suits a grocery store, where the customer wants to control their budget. Descending price rather serves a high-end collection, where the first item sets the level.
• Alphabetical order is for catalogs people browse already knowing the name of what they want: spare parts, technical references, wines.
• Manual mode lets you push to the top whatever you want to sell first, and gives you complete control over how your list looks.

That order belongs to the collection, not to the shop. So your new arrivals can be sorted by date while your monthly selection stays arranged by hand. That's what makes manual mode sustainable: automatic orders apply themselves to products you add later, manual mode asks you to come back to it, so save it for the collections that deserve it.

Don't forget SEO. Your collections are indexable just like your product pages. Fill in the Title and Meta description tags, and customize the URLs with your keywords.

A collection reaches your app's menu in two ways, and that's where the look of your navigation is decided.

On its own. Each collection carries its menu visibility block, where you tick the option listing the collection in the menu and choose its place. It becomes an entry in its own right, on a par with a section. A shop with three aisles displays them that way, and its customer takes in the whole catalog at a glance.

Grouped. The Collection list section gathers several of them under a single entry. The useful marker: beyond five aisles, the menu gains from being grouped.

In e-commerce vocabulary, that second way is the distinction between category and subcategory, the list holding the category and the collections the subcategories. If you're arriving from another platform, this is the move you know under another name.

Let's go back to the decoration shop and its ten collections. Without grouping, the app's menu would be saturated.

So we created three lists, taking up the three lines of search, with three collections each:

• Rooms: Bedroom, Bathroom, Kitchen
• Objects: Frames, Vases, Pillows
• Trends: Big in Japan, Keep it Slow, Words matter

The Sales collection stays outside any list: we want it to be as directly reachable as possible. That's a decision worth keeping in mind, tidying up must never bury what has to stay on the surface.

A collection list is a section of your Shopping App. It's added like any section, from My App › Structure. Click Add a section, then choose Collection list.

Give your section a title, attach an image to it, and confirm.

To put your collections in it, two methods:

• click the "+" icon to select the collections to include
• or drag the collections directly under the Collection list section

Three layouts, one of which depends on your navigation mode.

Swipe Submenu puts your collections in a submenu, below the app's main navigation. It's only available in "Swipe" navigation mode, the one where you move from section to section by swiping the screen horizontally. It's the catalog's default layout, but it's tied to the navigation: only choose it if your app commits to that mode, never as a simple fallback.

Classic presents your aisles in rows, with a small thumbnail and the name in bold, several per screen. That's the directory stance: it suits you when you have many aisles, when the name matters more than the image, and when it has to work even without strong visuals. It's also the natural fallback from the other two.

Visual is a shop window: large full-width cards, the aisle's image as background and the name overlaid. Choose it when aisles are chosen by eye, in fashion, decoration or food.

One caveat on that last one: it demands good visuals on all your collections. If some don't have any, or poor ones, fall back on Classic.

The choice is made in My App › Structure, on your section's menu, Edit the design. Classic and Visual apply to any navigation mode. If your app isn't in Swipe mode, the back office greys out Swipe Submenu and offers you a link to change your menu.

No, and it's a detail that can matter. We recommend keeping design consistency throughout your app, but varying layouts lets you signal a hierarchy.

Take a grocery store whose catalog is organized like this:

• Food
• Fresh: Fruit, Vegetables
• Bulk: Cereals, Rice & Pasta
• Health & Beauty: Cosmetics, Essential oils

Here, some collection lists contain not collections but other collection lists. So there are two levels to tell apart. Applying a different layout to level 1 and level 2 stops the customer getting lost in the tree.

A tag is a keyword attached to a product, like a marker. You can attach several to the same product.

They serve first to find your products again in your back office. But their main value is elsewhere: they drive what's displayed on the customer's side.

• they filter the product list widgets on your home screen
• they feed, along with collections, the similar products block on your product pages
• they feed the results of your shop's search section

Think of tags as secondary collections, invisible in the navigation but active in the display. They're generally built on your products' characteristics: color, material, shape.

An example. In a clothing shop, a brown wool turtleneck sweater goes in the "Clothing" collection list, "Sweaters" collection. It gets the tags "turtleneck", "brown", "wool".

Two uses follow immediately. To display all your wool items on the home screen, you just filter on the "wool" tag. And the sweater can appear as a complementary product under a pair of brown trousers.

That's the fundamental difference with collections: the collection organizes what the customer browses, the tag organizes what you present to them.

They're added when creating or editing a product. In the right-hand menu of the product's editing page, enter your tags in the Tags field. Publish to confirm.

Two writing rules decide the health of your vocabulary over time. A tag is written as one word, with no space, which is why the example above says "turtleneck". And case is ignored, wool and Wool are the same tag, so you don't have to police your capitals.

The rest is discipline, and the back office gives you the tool: above the field, View all tags opens the list of the ones already in your shop, with a search and a sort by alphabetical order or by frequency of use. Get into the habit of picking from it rather than retyping. A vocabulary that drifts into wool, woollen and purewool filters three times fewer products than exist, and it's a drift you discover after two hundred product pages.