# Canvas & Clover

[Canvas & Clover](https://wall-art-pod.mock.shop/llms.txt) is a [mock.shop](https://www.mock.shop/) sample store for building against a wall-art catalog with configurable product prices before a real Shopify store is ready. It includes prints, photographs, picture frames, portfolios, and wall murals. The catalog has 29 products across 4 collections. Each product has 12 variants from two options. A product’s minimum price can fall below a shopper’s budget while a selected configuration exceeds it.

mock.shop is an auth-free Shopify Storefront GraphQL API backed by sample reference stores. Find out more about [mock.shop sample stores](https://www.shopify.com/blog/mock-shop).

## When to use this store

Choose Canvas & Clover when you’re building a wall-art shop with configurable prints and prices that update with the selected options.

Use Canvas & Clover for:

- Wall-art storefronts with configurable prints
- Separate starting-price and selected-variant price displays
- Budget indicators based on the selected variant, not the product minimum

Choose another mock.shop store if you need single-variant products or nonshipping digital goods. Browse <https://mock.shop/llms.txt> to find a store that matches your catalog.

## Example Canvas & Clover query

Here’s an example GraphQL `POST` request that retrieves a print’s price range and the price of one selected configuration from <https://wall-art-pod.mock.shop/api>:

```bash
curl https://wall-art-pod.mock.shop/api \
  -H 'Content-Type: application/json' \
  --data '{"query":"{ product(handle: \"seed-pod-study-archival-print\") { id handle title priceRange { minVariantPrice { amount currencyCode } maxVariantPrice { amount currencyCode } } variantBySelectedOptions(selectedOptions: [{name: \"Trim\", value: \"Embossed\"}, {name: \"Paper Weight\", value: \"Archival\"}]) { id title price { amount currencyCode } selectedOptions { name value } } } }"}'
```

This query returns the product ID, handle, title, and price range of USD 98.00 to USD 107.80. The Embossed Trim and Archival Paper Weight selection resolves to its own variant ID at USD 107.80. Adapt the query for your storefront needs.

The endpoint doesn't require authentication or an access token. Read <https://wall-art-pod.mock.shop/llms.txt> for catalog details and store-specific instructions.

## What this catalog lets you test

Build wall-art product pages with option selectors, starting prices, and selected-variant prices. For a budget-aware shopping view, use a hypothetical USD 100 budget to test two separate displays: “from USD 98.00” on a product card and USD 107.80 for the Embossed / Archival selection. A budget indicator calculated from the minimum price would incorrectly label that selection as within budget. Read the resolved variant’s price when updating the selection summary; this fixture doesn’t include tax, shipping charges, or a server-side budget filter.

Preview the catalog in a storefront by opening <https://wall-art-pod.hydrogen.mock.shop> in a browser.

![Canvas & Clover’s Seed Pod Study Archival Print product page with Deckled Edge and Light selected, a $98.00 price, and an Add to cart button.](images/canvas-and-clover-seed-pod-study-archival-print-20260911.webp)

## Build with an AI coding tool

To build a wall-art storefront with Canvas & Clover using Claude, ChatGPT, Cursor, Lovable, or another AI assistant, copy the prompt below. It gives the assistant the store domain and directs it to the catalog instructions before it starts writing code.

```text
Build me a Hydrogen storefront using wall-art-pod.mock.shop as the store domain. Setup instructions: wall-art-pod.mock.shop/llms.txt
```

Shopify also provides a [mock.shop starter project](https://github.com/Shopify/mock-shop-starter): a Hydrogen storefront with product pages, collection browsing, and a working cart already connected to mock.shop. You or your AI coding tool can customize this code instead of building those pieces from scratch.

Follow the repository’s setup instructions, then set `PUBLIC_STORE_DOMAIN=wall-art-pod.mock.shop` in `.env` and restart the dev server to use Canvas & Clover’s catalog. Leave `PUBLIC_STOREFRONT_API_TOKEN` empty; mock.shop doesn’t require a token.

## Move to a real Shopify store

mock.shop uses fictional, read-only catalog data. Cart operations work, and checkout is mocked: no payment is taken and no real order is placed. The Customer Account API isn’t supported.

When you’re ready to launch, point your storefront at a Shopify store and add that store’s public Storefront API token. If you don’t have a Shopify store yet, [start a Shopify free trial](https://www.shopify.com/free-trial) to create one.

Read the [mock.shop developer documentation](https://shopify.dev/docs/storefronts/headless/mock-shop) for setup and migration details.

## Store facts

| | |
|---|---|
| Store handle | `wall-art-pod` |
| Catalog model | Wall art with different starting and selected-variant prices |
| Products | 29 |
| Collections | 4 |
| Categories | 6 |
| Variants per product | 12 |
| Compare-at prices | 6 products |
| Requires shipping | All products |
| API endpoint | <https://wall-art-pod.mock.shop/api> |
| Store instructions | <https://wall-art-pod.mock.shop/llms.txt> |
| Browser preview | <https://wall-art-pod.hydrogen.mock.shop> |