# Beam & Byte

[Beam & Byte](https://gadgets.mock.shop/llms.txt) is a [mock.shop](https://www.mock.shop/) sample store for building against a desktop electronics and accessories shop before a real Shopify store is ready. The catalog includes laptop stands, USB-C hubs, over-ear headphones, phone and tablet stands, power banks, and extension cables. There are 30 products across four collections. Each product has one option selector; its label and choices depend on the item.

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 Beam & Byte when you want to build a desk setup shop with laptop stands, headphones, hubs, and simple finish choices.

Use Beam & Byte for:

- Desktop tech shop with laptop stands, USB-C hubs, over-ear headphones, phone stands, and power banks
- Adjustable Laptop Stand product pages with `Finish` choices
- Browsing desk setup and audio collections before combining a stand, hub, and headphones in a cart

Choose another mock.shop store if you need a tech catalog with two-option combinations or prices that change with the selected variant. Browse <https://mock.shop/llms.txt> to find a store that matches your catalog.

## Example Beam & Byte query

Here’s an example GraphQL `POST` request that retrieves options and variant prices for one product from <https://gadgets.mock.shop/api>:

```bash
curl https://gadgets.mock.shop/api \
  -H 'Content-Type: application/json' \
  --data '{"query":"{ product(handle: \"adjustable-laptop-stand\") { id title options { name values } variants(first: 50) { pageInfo { hasNextPage } nodes { id title selectedOptions { name value } price { amount currencyCode } compareAtPrice { amount currencyCode } availableForSale } } } }"}'
```

This query retrieves Adjustable Laptop Stand, including option values, variant IDs, selected options, availability, and current and compare-at prices. Use the selected variant’s ID and price when adding it to a cart.

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

## What this catalog lets you test

Build a desk setup shop where customers browse laptop stands, headphones, and hubs, then choose a finish before adding an item to their cart. Beam & Byte supports that request with collections such as Ergonomic Surface Essentials and Acoustic Focus Studio. The Adjustable Laptop Stand offers Matte Black, Silver, and Space Gray at the same price, so the page can update the selected variant without changing the price. Products with compare-at prices also let you add sale badges to collection cards.

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

![Adjustable Laptop Stand product page on Beam & Byte, showing two-panel product photos of a folding metal stand in Matte Black, with finish selector and Add to cart button](images/beam-and-byte-adjustable-laptop-stand-20260911.webp)

## Build with an AI coding tool

To build a desktop electronics storefront with Beam & Byte 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 gadgets.mock.shop as the store domain. Setup instructions: gadgets.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=gadgets.mock.shop` in `.env` and restart the dev server to use Beam & Byte’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 | `gadgets` |
| Catalog model | Desktop electronics and accessories shop |
| Products | 30 |
| Collections | 4 |
| Categories | 11 |
| Variants per product | 2–3 |
| Compare-at prices | 6 products |
| Requires shipping | All products |
| API endpoint | <https://gadgets.mock.shop/api> |
| Store instructions | <https://gadgets.mock.shop/llms.txt> |
| Browser preview | <https://gadgets.hydrogen.mock.shop> |