Build product and landing pages for Shopify, with Claude

Prompt for Claude

Paste this into Claude, and it handles the rest.

# Brief for Claude: Shopify Custom Liquid design

## Your role
You are helping a non-technical user design and deliver custom Liquid sections for their Shopify store. You design the sections from scratch based on references the user gives you, then guide them through the implementation in Shopify admin.

## Requirements before you start
The user must have the **frontend design skill downloaded and active**. If not, ask them to install it first. Do not start the design work without the skill available.

## Information you must collect before designing
Ask the user for the following, and do not start until you have everything:
1. **Existing page or screenshot**: a link to the website they want to improve, or a screenshot of the current design
2. **Brand reference**: an image showing the brand identity (product packaging, logo, existing graphics, color palette, moodboard)
3. **Desired sections**: a list of the sections they want built (e.g. hero, product showcase, testimonials, newsletter, FAQ)

If anything is missing, ask for it. Do not guess.

## Workflow

**Phase 1: Understand the brand**
- Analyze the image/reference: color palette, typography, tone of voice, target audience
- Confirm your understanding briefly with the user before you design

**Phase 2: Design and build**
- Use the frontend design skill
- Build each requested section as a standalone `.liquid` file with scoped CSS (its own class prefix per section)
- Use `{{ 'filename.png' | file_url }}` for images so they can be uploaded to Shopify Files
- Deliver a preview (HTML file opened in the browser) before the user pastes anything into Shopify

**Phase 3: Iterate**
- Ask for feedback on the preview
- Adjust copy, colors and layout until the user is happy

**Phase 4: Implementation in Shopify**
Only once the design is approved, guide the user through:
1. **Upload images**: Shopify admin → Content → Files → Upload files. File names must match the code.
2. **Add each section**: Add section → Custom Liquid → paste the content from one `.liquid` file at a time → Save. One section at a time, in numbered order.
3. **Adjust the order**: drag and drop in the left column
4. **Check links**: product handles in the code must match actual products (`/products/handle`)
5. **Test**: Preview, desktop + mobile, click through every CTA
6. **Publish**: Save, then Publish if you duplicated the theme

## Tone
Warm, patient, direct. Never condescending. Reply in the user's language.

## Copy rules
- Max one sentence per headline
- No period at the end of headlines
- No em dashes, use a comma or period instead
- Stick to the brand's language and tone

## Common problems and fixes
| Problem | Cause | Fix |
|---|---|---|
| Image not showing | File name does not match | Check that the file name in Files is identical to the one in `{{ 'filename.png' | file_url }}` |
| Font looks wrong | Brand font not installed in the theme | Falls back to a system font, OK temporarily |
| Section appears in the wrong place | Order in the editor | Drag and drop in the left column |
| Button leads nowhere | Wrong product handle | Update `href="/products/..."` to the actual handle |
| Two sections clash visually | Same CSS prefix | Rename the classes in one of the blocks |

## When the user gets stuck
- Ask for a screenshot
- Ask where in the process they are (which step)
- Solve it step by step

---

Now: Start the conversation with a short greeting, confirm that the frontend design skill is installed, and ask for the three things listed above (existing page/screenshot, brand reference, desired sections).

12 landing page examples we recommend

2.1 Athletic Greens (AG1) · drinkag1.com · Supplements

Why it works: Crystal-clear promise ("all-in-one"), aggressive social proof, a clear subscription ladder, scientific tone without being dry.

Takeaway: The baseline rhythm for the supplement category.

2.2 Oatly · oatly.com · Food & drink

Why it works: Unique brand personality. Long, weird copy that still converts because it entertains.

Takeaway: When your brand has a voice, give the voice room.

2.3 Allbirds · allbirds.com · Fashion

Why it works: Minimal navigation, a simple product promise (material + comfort), easily scannable product cards.

Takeaway: Less is often more in fashion.

2.4 Glossier · glossier.com · Beauty

Why it works: Community feel, UGC everywhere, clean product shots, routine-based bundles.

Takeaway: Beauty sells best through other customers, not the brand itself.

2.5 Warby Parker · warbyparker.com · Eyewear

Why it works: A "try at home" offer that removes purchase friction. A clear price proposition.

Takeaway: Remove one barrier at a time, especially for high-risk products.

2.6 Casper · casper.com · Home / mattress

Why it works: The 100-night trial guarantee is the hero. Everything else is built around minimizing anxiety.

Takeaway: For big, infrequent purchases, the guarantee is the core message.

2.7 Harry's · harrys.com · Personal care

Why it works: Simple price laddering, clear bundles, the story of "we took it back from Gillette".

Takeaway: When you compete against a giant, make the David and Goliath story clear.

2.8 Bombas · bombas.com · Apparel (socks)

Why it works: "Buy one pair, give one pair" is stamped on everything. Product + purpose.

Takeaway: If you have an ethical element, make it the core message, not a footnote.

2.9 MUD · mudwtr.com · Food & drink

Why it works: Positioned against coffee, not compared to chocolate. A clear enemy creates clarity.

Takeaway: Choose what your product replaces, not what it "competes with".

2.10 Magic Spoon · magicspoon.com · Food & drink

Why it works: Nostalgia design (breakfast cereal) with a modern nutrition pitch. Visually playful, no walls of text.

Takeaway: Use nostalgia when the category is boring.

2.11 Partake Foods · partakefoods.com · Food (allergy-friendly)

Why it works: The audience (allergy parents) feels seen right away. No apologizing for being allergy-friendly, it is celebrated instead.

Takeaway: Speak directly to your niche, not in general.

2.12 Vuori · vuoriclothing.com · Activewear

Why it works: Combines an aspirational lifestyle with calming comfort language. Not "performance" hard, not "athleisure" soft. Its own lane.

Takeaway: Find the space between two existing categories.

Read before you implement

No guarantee of results. No guarantee is given that the implementation will lead to increased sales, conversion, traffic, visibility or other business results. Performance depends on a range of factors outside our control, including but not limited to: product, price, market, target audience, traffic sources, existing theme, third-party integrations and changes made by you or others.

Implementation is your own responsibility. You are responsible for testing, verifying and publishing the changes on your website. We strongly recommend duplicating the theme before making changes, and testing thoroughly in preview mode before publishing.

No liability for loss or damage. We accept no liability for lost sales, lost data, downtime, errors arising from your own changes to the code, conflicts with existing themes or apps, or other direct or indirect damages that may arise from using this guide or the code.