Skip to content
herosmith
Heroes / Food & drink / Gilt & Cacao
Gilt & Cacao Bar Shelf design

Design brief

Why it works.

People pick chocolate by wrapper and flavour. The first screen is the shop shelf, with Add to box under the bar in front.

Why this layout

  1. 01

    A shelf, not a grid

    twelve bars spine out, the front one turned to face you.

  2. 02

    Wrappers are the product art

    name, cocoa and price are live text, so swapping a bar is one image.

  3. 03

    Add to box beside the price

    opening a bar unfolds its page in gold foil.

Fits

  • Chocolate makers with 5–12 bars
  • Tea, coffee or spice brands in illustrated packs
  • Shops where the pack is the product's face

Not for

More than 12 products, or plain packaging

Try instead: a menu-board or grid hero

You'll need

  • 5–12 products with cocoa, price and notes
  • One front-of-pack image each (9:16)
  • Delivery promise in one line
  • A cart (Shopify, Square)

Connects to

  • Add to box Shopify, Square or WooCommerce cart link MEDIUM
  • Range and prices CMS collection EASY

Works as HTML, Webflow, Framer, WordPress.

Measure

Add to box clicks per visit

More heroes

All heroes →
Get the code