See work Book a call
Work

CARVÉ

Concept

A concept Shopify theme for a leather-bag label: a storefront that sells craft you can't touch, with true-to-life colours, close-ups and free returns said before the question comes up.

CARVÉ is a fictional brand. We wrote this brief to show how we design a Shopify theme, from research to the buy button.

  • Concept
  • Fashion accessories
  • Online Store 2.0

CARVÉ theme preview: the home page, starting with the image banner.

Challenge

CARVÉ makes structured leather bags in small runs and sells most of them at $200 to $400. In a store, the bag sells itself: you feel the leather, open the zip, try the strap. Online, the old store showed one photo per bag and a size in centimetres, and shoppers couldn't tell the tan from the camel.

  • Colourways sat in a dropdown, and the photos never changed to match
  • Close-ups of the stitching, the grain and the hardware were missing
  • Shipping and returns lived on a policy page, far from the buy button
  • Nothing helped a shopper choose between a work bag and a weekend bag

The brief was a theme that sells the craft through the screen.

How we worked

01 Discover: What a shopper needs to trust before spending $200 on a bag

02 Define: Three proto-personas and the journey from a first look to a bag on the shoulder

03 Design: Wireframes first, then the storefront, section by section

04 Optimise: The product page, the colour swatches and how we'd test them

01 · Discover

The brief

Goal

Sell a $200 to $400 leather bag to someone who can't touch it: make the craft, the colour and the size as clear online as they are in the hand.

Constraints

  1. Colour has to look true on screen, because a bag that arrives in the wrong shade comes back.
  2. New arrivals land every month, so every block on the home page is an Online Store 2.0 section the team can edit.
  3. It's a considered purchase: shoppers compare, save and come back, so the wishlist and the returns policy stay easy to find.

Proto-personas

  • The considered buyer

    Saves the bag, reads every detail and buys on the third visit.

    DoubtIs the leather as good as it looks?

  • The everyday carrier

    Needs a bag that fits a laptop and still works at dinner.

    DoubtWill a 13-inch laptop fit?

  • The gift giver

    Buying for someone else, on a deadline.

    DoubtCan it go back if the colour's wrong?

02 · Define

From a first look to a bag on the shoulder

  1. Discover

    The considered buyer

    Where shoppers hesitateAnother leather brand?

    What the design doesLead with the craft: the weave, the stitching and the leather, in big photography.

  2. Compare

    The everyday carrier

    Where shoppers hesitateWhich bag for which day?

    What the design doesShop by occasion: work, everyday, after hours, travel.

  3. Inspect

    The considered buyer

    Where shoppers hesitateIs the colour true?

    What the design doesSwatches you can see and close-ups of the grain, the zip and the hardware.

  4. Decide

    The gift giver

    Where shoppers hesitateWhat if it's wrong?

    What the design doesFree express shipping and free returns, said right under the button.

  5. Come back

    The considered buyer

    Where shoppers hesitateI'll buy it later.

    What the design doesA wishlist one tap from the price.

03 · Design

Wireframe to storefront

Nine sections, each one the team can move, edit or switch off in the theme editor. We drew every one as a wireframe first, then designed it.

Home page, Online Store 2.0 · 9 sections. Header: A centred wordmark, Women and Men up front, the cart, account, search and menu on the right. Image banner: Two photos: the bag on its own, then the bag being carried. Collection list: Shop by occasion: work, everyday, after hours, travel. Image with text: Close-ups of the stitching, the zip and the grain: what a shopper would touch in a store. Featured collection: What to carry now, with colour swatches right on the card. Image banner: Two looks that show the bags on a person, for scale. Email signup: 25% off for joining the circle, said in one line. Collapsible content: The questions people ask before buying leather: refunds, shipping, handcraft, care. Footer: Contact, returns and the newsletter, in four tidy columns.

Home page Online Store 2.0 · 9 sections

Header

Template

Footer

A centred wordmark, Women and Men up front, the cart, account, search and menu on the right.

04 · Optimise

The product page, decision by decision

A $215 bag has to answer every question before the shopper asks it. Each number marks a decision on the product page and the reason for it.

  1. A 4.5 means more with 212 reviews behind it.

  2. The sale price first, the original struck through, the wishlist on the same line.

  3. Three swatches you can see, not a dropdown you have to open.

  4. One filled button. Find in store is the quiet alternative.

  5. Free express shipping and free returns sit right under the button, with the holiday cut-off.

On a phone

The buy button follows the shopper down the page, with the price beside it.

On a phone: Black Structured Tote Bag, 4.5 (212 reviews), $215.00, was $290.00. Black, Tan, Blush. Add to Cart. Free express shipping and free returns on orders over $150. Vegan leather, Gold-tone hardware, Fits a 13-inch laptop. Matte black vegan leather with dual top handles and a detachable crossbody strap. Height 28 cm, width 38 cm, depth 14 cm. The buy button follows the shopper down the page, with the price beside it.

  1. Stars and the count, under the name A 4.5 means more with 212 reviews behind it.
  2. Was and now, side by side The sale price first, the original struck through, the wishlist on the same line.
  3. Colour as swatches Three swatches you can see, not a dropdown you have to open.
  4. Add to Cart, or see it in person One filled button. Find in store is the quiet alternative.
  5. Returns before the question Free express shipping and free returns sit right under the button, with the holiday cut-off.

CARVÉ product page, first screen, with 5 numbered decisions: 1. Stars and the count, under the name; 2. Was and now, side by side; 3. Colour as swatches; 4. Add to Cart, or see it in person; 5. Returns before the question.

04 · Optimise

Choose your colour

From the product page: the swatch changes the whole bag, and the loupe shows the grain up close.

Black Structured Tote Bag

Enter, then the arrow keys move the lens. Escape closes it.

CARVÉ

Black Structured Tote Bag

$215.00 Was $290.00

  • Vegan leather
  • Gold-tone hardware
  • Fits a 13-inch laptop
  • 28 × 38 × 14 cm

Design tokens

CARVÉ

Colour

Type

  • HeadingsLato SemiBold

    Wear it everywhere, anywhere

  • BodyLato Regular

    Every Carve bag is built with purpose.

  • Products & pricesLato Medium

    Classic Easy Zipper Tote $298

Components

Buttons

Add to Cart

Options
Price
$215.00$290.00
Rating
4.5
Quantity
1

04 · Optimise

How we'd test it

A concept has no results yet. These are the first three experiments we'd run after launch, and what each one has to prove.

  1. If
    colour swatches change the whole gallery
    Then
    fewer bags come back for colour
    Because
    shoppers see the shade they'll receive
    Primary metric
    Returns for colour
    Guardrail
    Conversion rate
  2. If
    free returns sit under the Add to Cart button
    Then
    more first-time buyers finish checkout
    Because
    the price makes the risk feel bigger than it is
    Primary metric
    Checkout completion, new customers
    Guardrail
    Return rate
  3. If
    shop-by-occasion tiles lead the home page
    Then
    more visitors reach a product page
    Because
    an occasion is easier to choose than a style name
    Primary metric
    Home to product page rate
    Guardrail
    Bounce rate
Next case study Mason Varde A concept Shopify theme for a minimalist clothing label: a storefront that sells outfits, not single pieces, and gets the size right the first time. Read the case study

Ship it Built
for Shopify.

Book a call