Overview

The Design section in Shopnex empowers you to visually build and manage your storefront using Builder.io —a powerful drag-and-drop editor with full control over layout, styling, and content.

Whether you’re using a Shopnex template or connecting your own custom frontend (like Next.js), Builder.io helps you go from idea to live design with zero friction.

✨ What You Can Do

• Use visual blocks to design product pages, homepages, and more
• Manage layout and content without touching code
• Integrate directly with your custom frontend using Builder.io’s Custom Storefront mode
• Start from a ready-made template or upload your own

🚀 Getting Started

1. Create a Builder.io Account Sign up here  and create your first organization and space

2. Get Your API Keys Grab your Public and Private API Keys from your space settings

3. Connect to Shopnex Go to Dashboard → Design → Editor Mode and enter your API keys

4. Choose a Mode Select Custom Storefront to use Builder with your own frontend

5. Scaffold Your Frontend (Optional) Use the CLI to generate a pre-configured storefront (e.g. Next.js + Tailwind):

   npx create-builder-storefront@latest ...

6. Design Your Store

   • Upload a design template
   • Or click Customize in Builder.io to start from scratch

🧠 Tips

• Use the Custom Storefront mode if you’re working with a framework like Next.js
• The Public API Key is used in your frontend to load content from Builder
• You can preview and publish directly from the Builder editor once connected

💡 Want to go deeper? Check out our full Builder.io Setup Guide and Custom Storefront Integration pages.