How Badr Al-Harqan Designed His Zid Store in Under 24 Hours Using Claude

Why didn't Badr settle for just one option?

In the perfume industry, the impression begins before the customer even knows the scent. The first thing that catches a visitor's attention is the store's look, how products are displayed, the colors, and the images. These details shape the brand's image from the very first moment, and influence the visitor's decision to keep browsing.

That's why Badr was looking for a design that reflected the identity of the perfume house he was building, and gave visitors a consistent experience from their very first visit.

He started with a professional design team, and at the same time connected his store to Claude and asked it to design a complete theme based on his store's data.

After both experiences were finished, he compared the results — and the surprise was that he chose Claude's design, finding it served his brand better.

The difference that emerged between the two experiences

The professional design team took more than a month to finish the design — a normal timeframe for a project that goes through identity research, design, and revisions between the merchant and the designer. The cost was separate, based on the scope of work.

Claude, on the other hand, produced the first version of the theme in under 24 hours after being connected to Badr's store, with no additional cost, since the feature was included in the professional plan he was already using.

The difference wasn't just in time, but also in the way of working. With the design team, every stage needed reviews and coordination until reaching the final version. With Claude, edits happened directly within the conversation, with results appearing within minutes — letting Badr try more than one idea and reach the result he wanted quickly.

Professional design team

Connecting with Claude

Time

More than a month

Under 24 hours

Effort

Repeated meetings and reviews

Direct conversation with instant edits

Cost

Based on project scope

Included in the professional plan, no extra cost

How it works

Understanding store data through communication with the merchant

Reading store data directly right after connecting

After comparing, Badr chose Claude's design to be his store's storefront at launch.

The value didn't come from the tool alone

This experience might seem like a story about Claude's capabilities, but the most important factor was actually how it was used.

After connecting Claude to Badr's Zid store, it was able to read the store's data directly — products, categories, colors, and the current theme. So the design was built on the store's actual content, instead of relying on a generic description or a guess at the brand's nature.

And this is where the difference shows. When an AI tool works in isolation from your store, it builds the design based on the information you type in. But once connected, it starts from the store's actual data and uses it as the foundation for the design from the very beginning.

And the experience didn't stop at Badr's store. After its success, a dedicated skill was built that turns Claude into a theme designer specialized in Zid, now available to all merchants — so any merchant can repeat the same experience without having to start from scratch.

Important notice

The connection link between your store and the AI tool is treated the same way as your store's login credentials, because it grants access to its data. So don't share it with anyone else, and don't post it anywhere public.

How to start the same experience on your store

Step 1: Open your store, and go to the App Market

From your store's dashboard, go to the App Market by selecting the icon at the top, search for the AI connection app (MCP), and connect it to your store.

Step 2: Download Claude Code, and complete the connection with Zid

You'll need to download Claude and use Claude Code, and through it complete a single connection linking your Zid store with Claude. Once this connection is complete, Claude can access everything in your store: your products, categories, colors, and current theme data.

Step 3: Create a file for the theme to be uploaded to, then edit the prompt and send it

Create your own file and save it on your device — this is the file Claude will upload the theme design to afterward. Copy the ready-made prompt, change only the store link in it to your own store's link, then send it:

Copy this prompt and follow its instructions literally to build me a complete professional Zid theme:

https://github.com/abdulrahmanx97/zid-ai-theme

My store link: https://put-your-store-link-here.zid.store

What I need:

1. Understand my store first — my products, categories, and colors — before designing anything.

2. Build me a complete theme: every page with the same identity (not just color changes), and the homepage should be full and ready from the first activation, not empty.

3. Images: use my product images if available. For anything missing, give me ready prompts right here in the conversation (with name and size) — I'll generate them and send them back to you — no technical files, no complicated talk, and don't ask for images for everything, only what actually changes the look.

4. At the end give me: a ready ZIP file to upload + the theme's name and description + the upload steps on Zid — all within the conversation.

5. Don't claim you've uploaded the theme — I'll upload it myself.

Start now.

Step 4: Let Claude work until it reaches one final file

After sending the prompt, Claude starts working, giving you updates and results progressively through the conversation, until it finally reaches a single ready compressed (ZIP) file, along with the theme's name and description.

Step 5: Go to your store, and upload the file from the theme market

Go to your store, then the theme market, then custom themes. Click upload new theme, upload the compressed file Claude gave you, and name it (for example: Theme One).

Step 6: Activate the theme

After uploading, Zid starts preparing the theme on your store. From here, activate the theme from the same page, and your store's entire look will change.

This capability is currently available to Professional and Elite plan subscribers — the same plan Badr was subscribed to when he tried the feature before launching his store. And if you'd prefer to watch the steps rather than read them, there's a video explaining the whole experience step by step, including the same prompt above, on the account of Abdulrahman, the creator of the skill itself.

To follow along, you can watch the video:

From an individual experience to a standard available to everyone

What began as a personal decision by one merchant, comparing two results to choose the best one for his brand, turned into infrastructure available to any merchant on Zid who wants to go through the same experience. The core difference isn't that AI became capable of design — that was already possible before with general-purpose tools. The difference is that Zid gave it direct access to each store's data, turning what was once an individual experience into an established feature any merchant can repeat as easily as Badr did.

If you're looking for a design that genuinely reflects your brand, not a template that looks like other stores, the first step isn't far from the one Badr started with: activate the connection, and give Claude the chance to understand your store before it designs it.