Style components and product pages

Use App builder > Components for shared presentation settings. Start with Branding for colours, fonts and logo; Components changes how supported controls and content use that identity. These settings work within the selected character.

Set up product cards

1. Open the product-card settings in Components and choose a style. Preview a real collection with long titles, unavailable variants and a discounted product.
2. Set the available image, price and quick-add options. Show review stars needs review data; turning it on does not create reviews. Connect Judge.me if that is your provider.
3. Under Badges, add rules using Product tag, Badge text and Priority. Lower priority numbers win when several rules match. Match tags on actual Shopify products. Badges beat Sale controls which label wins when a badge and sale label compete.
4. Save, reload the editor and confirm the choices survived. Check the installed app after the applicable publication and refresh step.

Product cards in supported homepage, collection and search views share these choices. Saved items have their own layout; do not expect every card decoration in every list. A badge is display text, not a discount, stock reservation or membership check.

Choose product-page behaviour

In the product-page component settings, choose Full page or Slide-over sheet where offered, then the supported gallery, description and purchase-control options. Description formats include Rich text, Plain text and Sectioned. Test a product whose real description exercises the chosen format.

App builder > Product page manages the default extra merchandising sections. Product templates assigns alternative section layouts by collection. Use the product-template guide to understand assignment and precedence; editing Components does not replace those templates.

Description sections and colour choices

For Sectioned descriptions, the editor accepts headings and items such as #Details *Leather upper *Rubber sole in the Shopify product description. Rich text keeps supported formatting; Plain text removes formatting. Check the actual description after selecting a format.

Show colourway swatches can link separate products sold as different colours. This is different from colour variants of one product. Each product needs a tag for itself, in the form current|Black|https://example.com/black.jpg, and tags for its alternatives, such as sibling|Tan|tan-boot|https://example.com/tan.jpg. Replace the example names, product handle and image addresses with your own published products and images. The handle is the product's short URL name. Keep current and sibling lowercase and use the | separators. A current tag and at least one alternative are needed. Test every swatch and the return path.

Set Recently viewed products to the number you want beneath product pages. For measurement charts and product matching, use Size guides in Branding.

Configure collection filters

In the collection-page component settings, use Show the Filter button and configure Tag filter groups where needed. For example, tag a product category|Boots, set Tag prefix to category and Filter name to Category. Boots then becomes a value in that group. Value suffix adds display text, such as cm; it does not change the product's tag. Check price, availability and option filters against real products. A visible filter control does not create missing product data.

For query suggestions and Browse content, use Search and Discover settings. For reading content, use Journal.

Check the result

Open a product from Home, Shop and Search. Check image cropping, price, variant choice, quick add and Back on a phone. If a badge is missing, inspect its tag rule and priority. If a price is wrong, correct the product or discount in Shopify rather than changing decorative text. For saved-versus-live differences, use preview and version history.