Chapter 02 · PDP & Collection Merchandising

Product pages & merchandising setup

Averdane’s product detail page (PDP) and collection cards are designed around how apparel is actually evaluated: silhouette at full length, cloth texture up close, colorways linked without clutter, and sizing or alteration context right above Add to bag.

1. Four desktop media layouts & shopper layout switcher

Open any product template in the Theme Editor and click the Product information section:

• Desktop media layout: Choose the default gallery presentation for your catalog:
  • Thumbnails: Vertical thumbnail rail beside a primary stage plate (default on the Averdane preset).
  • Two-column grid: Balanced architectural 2-up plate grid showing front, back, and cloth details simultaneously (default on Monolith).
  • Editorial collage: Full-width lead plate followed by paired detail studies (default on Salon).
  • Stacked list: Uninterrupted vertical editorial scroll of full-scale plates.
• Desktop media ratio: Choose Square, Portrait, or Tall so frames stay consistent even when studio crops vary slightly.
• Show layout switcher on desktop: Displays a subtle layout toggle so shoppers viewing multi-image garments can switch gallery views themselves.
• Enable full screen media: Opens high-resolution lightbox inspection with keyboard and pinch-zoom support.

2. Color-grouped media

When a garment comes in multiple colorways on a single product record, Averdane filters the gallery automatically when shoppers switch colors—without requiring third-party variant-image apps.

1. In Shopify Admin → Products, open your product and click each media item to edit its Alt text.
2. Start the image’s alt text with the exact color option value followed by a separator—for example: Tobacco — front, Tobacco — back, or Black — lapel detail. (Alternatively, assign the image directly as a variant’s main image.)
3. Leave shared detail images (such as a care tag, interior construction shot, or packaging photo) without a color prefix so they remain visible across every selected color.

3. Video, 3D models, and zero-image fallback

• Video & external embeds: Upload self-hosted MP4 clips (recommended for runway walk loops) or link YouTube / Vimeo videos directly in the product’s Media box.
• 3D models & AR: Upload .glb 3D assets (for leather goods, footwear, or eyewear). Averdane loads Shopify’s interactive <model-viewer> on demand and surfaces native View in your space AR controls on supported mobile devices.
• Unit pricing: Whenever a variant has a Unit price configured in Shopify Admin (required in the EU/UK for fragrances, skincare, or care liquids), Averdane renders variant.unit_price and its measurement across collection cards, PDP, cart drawer, and /cart.

4. Sibling products (“Also in this cut”)

Many fashion brands merchandise each colorway or fabric edition as its own separate Shopify product so every color gets its own URL, collection card, and gallery. Averdane connects those separate products into a seamless swatch strip inside the Variant picker block.

1. In Settings → Custom data → Products, click Add definition:
   • Name: Sibling products
   • Namespace and key: custom.siblings
   • Type: Product → select List of products.
2. On each sibling product, select the companion color/cloth products in the Sibling products metafield.
3. In the Theme Editor under Product information → Variant picker, turn on Show sibling products and optionally customize Sibling products heading.

When shoppers hover a sibling thumbnail on desktop, Averdane previews that garment on the main gallery stage and swaps between sibling PDPs smoothly. If custom.siblings is left empty while Show sibling products is enabled, Averdane automatically pairs up to four garments sharing the same product type and department prefix.

5. Multi-size quick order & collection quick add

• Multi-size quick order (PDP): Add the Multi-size quick order block inside Product information. Ideal for knitwear basics, hosiery, or B2B/VIP buyers ordering multiple sizes of a silhouette in a single action. Toggle Open by default to keep the matrix expanded or collapsed.
• Collection card quick add: In the Collection section settings, enable Enable quick add. Products whose options include a size dimension reveal a one-click inline size strip on card hover; multi-dimension or non-sized products open the accessible Quick View drawer.

6. Product details, Complete the look, and Pickup availability

Product details section (Product details)

Below the primary buy zone, the Product details section pairs a macro Detail image (defaulting to the product’s final landscape image if left unset) with structured specification blocks:

• Composition & Construction: Enter one fiber or tailoring detail per line, or connect dynamic sources / metafields (custom.composition, custom.construction).
• Description block: Combines your product description with Key facts (one Label: value pair per line, or custom.specs).
• Size and fit block: Displays a visual Fit indicator (Fitted, Regular, Relaxed, Oversized), a pipe-separated Measurements table (for example Size | Chest | Length | Sleeve | Shoulder), and a lettered technical Garment drawing (Automatic, Jacket, Trouser, or None—controlled per product via custom.size_diagram).
• Care block: Displays product-specific care instructions (custom.care), graphical Care symbols (comma-separated codes: wash-30, hand-wash, no-wash, no-bleach, dry-clean, no-dry-clean, no-tumble, iron-low, iron-medium, hang-dry, flat-dry), and links to your Care & Repairs guide.

Complete the look, Recommendations, Reviews & Local pickup

• Complete the look: Reads complementary products configured in the Shopify Search & Discovery app and pairs them beside an editorial styling photograph (set via custom.look_image File metafield, or automatically falling back to the product’s second image).
• Product recommendations & Recently viewed products: Surface algorithmic related pieces and client-side browsing history cleanly at the base of the PDP.
• Pickup availability: Add the Pickup availability block inside Product information. When local pickup is enabled under Settings → Shipping and delivery → Local pickup, shoppers can check store stock and pickup readiness times in a slide-over drawer.
• Buy buttons, Installments & Final sale: The Buy buttons block automatically renders Shop Pay Installments terms (form | payment_terms), optional Show dynamic checkout buttons, Selling Plan / subscription selectors when present, and a Final sale notice on the Delivery note block whenever custom.final_sale (Boolean metafield) is true.