Get GrandNode

Pictures, SEO and category mappings

Three tabs of the product editor decide how a product is found and how it looks: Pictures (the gallery), SEO (the address and the text search engines show) and Mappings (the categories and collections the product appears in). This article covers all three. Open any product under Catalog → Products to follow along.

Pictures

The Pictures tab lists the product's images with a thumbnail, the default-photo marker, the display order and the alt and title texts.

The Pictures tab of Fieldstone Oxford Shirt with one picture marked as the default photo, its display order, alt and title, and an upload area below
The Pictures tab: the gallery above, the upload area below.
  1. Under Add a new picture, click Upload a file or drop files onto the area. Each file becomes a picture immediately.
  2. Click a picture in the grid to edit it: set Display order (the lowest number is shown first), Alt (read by screen readers and search engines) and Title (the tooltip).
  3. Use Delete to remove a picture from the product.

The first picture by display order is the main image on product listings and the product page. Thumbnails in several sizes are generated on demand; their sizes and the image quality are set under Settings → Media settings (see Configuration).

Always fill in Alt. It is what a blind shopper hears and what search engines and AI assistants read instead of the image.

SEO

The SEO tab with meta keywords, meta description, title and search engine friendly page name fields
The SEO tab.
FieldWhat it does
Search engine friendly page nameThe last part of the product address, for example fieldstone-oxford-shirt gives /fieldstone-oxford-shirt. Leave it empty and GrandNode builds it from the product name. It must be unique across products, categories, pages and other entities with an address; a duplicate gets a number appended.
TitleThe page title shown in the browser tab and as the headline in search results. Empty means the product name is used.
Meta descriptionThe snippet search engines show under the title. Aim for one or two sentences, about 150 characters.
Meta keywordsKept for completeness; major search engines ignore it.

When you change the page name, GrandNode keeps the old one as an inactive address and answers it with a permanent (301) redirect to the new one, so existing links keep working.

Mappings: categories and collections

The Mappings tab places the product in the catalog. It has a grid for categories and one for collections (brands are chosen on the General tab).

The Mappings tab with the category Fashion >> Men, not featured, display order 2, and an empty collection grid
The Mappings tab: one category, no collection yet.
  1. Click Add new record above the Category grid.
  2. Pick the category, tick Is featured product? if it should appear in the category's featured block, and set the Display order of the product inside that category.
  3. Save the row. Repeat for more categories, and the same way for collections.

A product can live in any number of categories and collections. The display order is per mapping, so the same product can be first in "New arrivals" and tenth in "Shirts".

You can also map from the other side: the Products tab of a category, brand or collection lets you add several products at once with a search popup, which is quicker when you build a new category.

Tips and common mistakes

  • A product that is not mapped to any category is still reachable by its address and by search, but it will not appear in the category navigation.
  • Pictures are stored in the database by default; on large catalogs consider storing them on disk (Media settings).
  • Upload images at least as large as your largest thumbnail size, or the storefront scales small images up and they look blurry.

Question not answered here? Ask the community on GitHub Discussions ↗