Shop Setup

Configure the Shop context and SDK for your Merchify application.

Interactive Demo

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

Loading playground...

The Shop component provides context for all Merchify components, managing artwork selection and product state across your application.

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

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

Configure the Merchify SDK with your account ID:

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

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

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

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

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