Shop Setup

Configure the Shop context and SDK for your Snowcone application.

Interactive Demo

Try the interactive playground below - select artwork and see it applied to the product mockup in real-time:

Loading playground...

Overview

The React components are an optional convenience layer over the URL primitive — a mockup is just a URL you can build in any language (see Get started). If you’re building a React storefront, the Shop component provides context for every Snowcone component, managing artwork selection and product state across your application.

Shop Context

Install @snowcone-app/ui (peer deps: react, react-dom, zod). There’s no install CLI and nothing to configure.

npm install @snowcone-app/ui

Styling — your Tailwind v4 build compiles it. In your global stylesheet, add @import '@snowcone-app/ui/styles/globals.css' (brings in Tailwind, the theme tokens, and an @source for the package) plus an @source for your own code. In Next.js, also add transpilePackages: ['@snowcone-app/ui']. Add className="dark" on an ancestor for dark mode.

The components are styled by your Tailwind v4 build: import ui’s stylesheet in your global CSS (it brings in Tailwind, the theme tokens, and an @source for the package’s own components) and add an @source for your own code:

code

In Next.js, also transpile the package — it ships TypeScript source so the Tailwind scan sees the real class names:

code

Then wrap your application (or product pages) with the Shop component:

code

The Shop component should be placed at a high level in your component tree, typically in your layout or page component.

SDK Configuration

The SDK is an optional convenience too. Configure it once with your Shop ID so the components don’t need it passed individually:

code

You can configure this in your main app file, layout, or a dedicated config file.

Don't have a Shop ID yet? Mint one instantly with POST https://api.snowcone.app/shops/sandbox (no signup required to start), or grab one from the dashboard. See Render a mockup for the full flow. Always use your own Shop ID — one copied from our examples or demos points sales at someone else's account and won't survive signed-URL enforcement.

Artwork Setup

Use the ArtSelector component to let users choose artwork for products:

code

The Shop context automatically shares the selected artwork with all Product components inside it.

Complete Example

Here’s a complete example combining all the setup steps:

code

Next Steps

Now that you have configured the Shop context, explore the available components:

ProductImage

Display product mockups with custom artwork

ProductOptions

Interactive product variant selection

All Components

Browse the complete component library