# ClickyCanvas

[ClickyCanvas](https://mechanical-keyboards.mock.shop/llms.txt) is a [mock.shop](https://www.mock.shop/) sample store for building against a keyboard-components catalog before a real Shopify store is ready. It includes keyboard frames, switches, wrist rests, cables, and desk accessories. The catalog has 23 products across 4 collections. Each product has one option, but its name and values differ between products. Eleven products have two variants and 12 have three.

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 ClickyCanvas when a storefront displays a catalog of specialty components where each product has one configurable attribute and pricing doesn’t vary by variant.

Use ClickyCanvas for:

- Component or specialty-hobby storefronts with per-product option selectors
- Product pages that adapt to Layout, Weight, Finish, or another option name
- Catalogs mixing two-variant and three-variant products across multiple option names

Choose another mock.shop store if you need multi-option products, cross-product variant compatibility logic, subscriptions, services, or large-catalog pagination. Browse <https://mock.shop/llms.txt> to find a store that matches your catalog.

## Example ClickyCanvas query

Here’s an example GraphQL `POST` request that retrieves two products with different option types from <https://mechanical-keyboards.mock.shop/api>:

```bash
curl https://mechanical-keyboards.mock.shop/api \
  -H 'Content-Type: application/json' \
  --data '{"query":"{ keyboard: product(handle: \"customizable-aluminum-keyboard-frame\") { title options { name values } variants(first: 3) { nodes { title price { amount currencyCode } } } } switch: product(handle: \"mechanical-keyboard-switch\") { title options { name values } variants(first: 3) { nodes { title price { amount currencyCode } } } } }"}'
```

This query returns product titles, option names and values, variant titles, and prices. The keyboard frame uses Layout values of `65%`, `75%`, and `TKL`; the switch uses Weight values of Light, Medium, and Heavy. Adapt the query for your storefront needs.

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

## What this catalog lets you test

The catalog contains eight option names across 23 products, so build each selector from the returned option name and values rather than a shared size or color list. Prices stay the same across variants within each product, and three products have compare-at prices. Use the catalog to test option selection and cart line items, without assuming a chosen keyboard frame is compatible with another component.

Preview the catalog in a storefront by opening <https://mechanical-keyboards.hydrogen.mock.shop> in a browser.

![ClickyCanvas’s Customizable Aluminum Keyboard Frame with product images, 65%, 75%, and TKL layout options, and an Add to cart button.](images/clickycanvas-customizable-aluminum-keyboard-frame-20260910.webp)

## Build with an AI coding tool

To build a mechanical-keyboard and desk-accessory storefront with ClickyCanvas 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 mechanical-keyboards.mock.shop as the store domain. Setup instructions: mechanical-keyboards.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=mechanical-keyboards.mock.shop` in `.env` and restart the dev server to use ClickyCanvas’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 | `mechanical-keyboards` |
| Catalog model | Keyboard components with product-specific single options |
| Products | 23 |
| Collections | 4 |
| Categories | 9 |
| Variants per product | 2–3 |
| Compare-at prices | 3 products |
| Requires shipping | All products |
| API endpoint | <https://mechanical-keyboards.mock.shop/api> |
| Store instructions | <https://mechanical-keyboards.mock.shop/llms.txt> |
| Browser preview | <https://mechanical-keyboards.hydrogen.mock.shop> |