# Bloom & Bold Studio

[Bloom & Bold Studio](https://phone-cases-pod.mock.shop/llms.txt) is a [mock.shop](https://www.mock.shop/) sample store for building against a phone-accessory and printed-design catalog before a real Shopify store is ready. It includes phone cases, skins, stands, journals, and artwork. The catalog has 30 products across 4 collections. Each product has 12 variants, but the option pair can be Size and Finish or Material and Color.

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 Bloom & Bold Studio when you’re building a phone-accessory and printed-design shop with product-specific options and prices.

Use Bloom & Bold Studio for:

- Phone-accessory and printed-design storefronts
- Product pages that switch between Size/Finish and Material/Color selectors
- Variant-specific prices without assuming Size determines the price

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 Bloom & Bold Studio query

Here’s an example GraphQL `POST` request that retrieves basic product and pricing information from <https://phone-cases-pod.mock.shop/api>:

```bash
curl https://phone-cases-pod.mock.shop/api \
  -H 'Content-Type: application/json' \
  --data '{"query":"{ case: product(handle: \"toasted-almond-minimal-floral-case\") { title options { name values } variants(first: 12) { nodes { id selectedOptions { name value } price { amount currencyCode } availableForSale } } } skin: product(handle: \"custom-photo-skin-for-samsung-galaxy-s22\") { title options { name values } variants(first: 12) { nodes { id selectedOptions { name value } price { amount currencyCode } availableForSale } } } }"}'
```

This query returns Finish and Size for the floral case, Material and Color for the photo skin, and all 12 variants for each product with IDs, selected options, current prices, and availability. Adapt the query for your storefront needs.

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

## What this catalog lets you test

Build product pages for cases, skins, and related accessories with configurable options and selected prices. Check that switching products replaces both selectors and resolves the selected values to the correct variant ID. The queried case changes price by Finish, while the skin changes price by Material; neither uses Size as its price driver. Treat these as sample option values, not proof of device compatibility or a custom-image upload workflow.

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

![Bloom & Bold Studio’s Toasted Almond Minimal Floral Case with product images, Finish and Size options, a price, and an Add to cart button.](images/bloom-and-bold-studio-toasted-almond-case-20260910.webp)

## Build with an AI coding tool

To build a phone-accessory storefront with Bloom & Bold Studio 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 phone-cases-pod.mock.shop as the store domain. Setup instructions: phone-cases-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=phone-cases-pod.mock.shop` in `.env` and restart the dev server to use Bloom & Bold Studio’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 | `phone-cases-pod` |
| Catalog model | Accessories and printed designs with changing option pairs |
| Products | 30 |
| Collections | 4 |
| Categories | 8 |
| Variants per product | 12 |
| Compare-at prices | 8 products |
| Requires shipping | All products |
| API endpoint | <https://phone-cases-pod.mock.shop/api> |
| Store instructions | <https://phone-cases-pod.mock.shop/llms.txt> |
| Browser preview | <https://phone-cases-pod.hydrogen.mock.shop> |