Theme Quality Guidelines
This document defines quality standards for creating truly successful Instant Site themes. If your themes follow all of these guidelines, they become:
Easy for merchants to brand and customize Themes must adapt quickly to each merchant’s brand — often with only a logo, a preferred mood, or a few product photos. The system must make branding simple, even for merchants with no design experience.
Visually modern and professional Themes should reflect contemporary web and graphic design standards across different styles and spectrums.
Reliable even with unoptimized merchant content Most merchants upload phone-shot photos, uneven descriptions, or incomplete text. Themes must stay stable, clean, and trustworthy even with imperfect content — this dramatically increases their real-world usability.
Conversion-oriented and retail-friendly Themes should not only look good but help merchants communicate value, build trust, and guide shoppers toward purchase — especially when branding is minimal.
Compatible with the global color, typography, and layout systems Themes must integrate smoothly with our automated style mapping, palette system, and layout logic.
Step-by-step guide for building a successful theme designincludes minimum requirements for public themes and redirects to this guideline whenever necessary.
1. Content resilience & merchant adaptability
How well does the theme adapt to real merchant content?
A strong theme must remain stable, readable, and attractive even when filled with imperfect real-world merchant content.
Most merchants have low-quality photos, minimal branding, and uneven text. Your theme must support such things.
1.1 Content strategy
Before applying any rules, decide which content model your theme uses.
This choice affects tone, demo text, and the way merchants understand the layout and replace content.
Both strategies are equally important because different merchants work in different ways:
Some want a finished, atmospheric theme that already “feels like a brand,” and they prefer to adjust it slightly rather than write everything from scratch;
Others prefer a clean, neutral foundation — a blank but well-guided structure they can easily adapt to their own brand, photos, and tone.
The theme should clearly follow one of these storytelling approaches:
Brand-Driven Narrative Brand-driven narratives use rich, expressive storytelling to create a vivid sense of identity and atmosphere. They show how the theme performs when filled with immersive, cohesive brand content. The goal is to present a believable “mini-brand” that sells through mood and character
Do:
Build a coherent narrative world, complete with values, history, voice, or mood.
Use expressive language that enhances the aesthetic.
Add brand details to the text when it feels appropriate
Don’t:
Lock the theme into a single industry niche.
Mix unrelated tones or break narrative consistency
Brand-Independent Narrative Brand-independent narratives stay broadly compatible with any brand; they don’t construct a specific brand reality. The text should be coherent on its own, yet easy to replace. The goal is to illustrate theme structure using neutral, functional texts. Do:
Keep language simple, neutral, and brand-agnostic.
Use content that illustrates the type of information a merchant might place there without leaning into brand specifics or a distinct brand-focused tone of voice.
Use placeholders like “your company” instead of a brand name if needed.
Don’t:
Use directive placeholders (“Add headline,” “Describe your product”).
Fill space with texts like “Lorem ipsum.”
Both approaches are valid as long as the content remains removable and the theme stays flexible.
1.2 Image quality
The theme should work with:
mixed lighting, mixed backgrounds
different proportions (1:1, 3:4, 16:9)
inconsistent product image styles
Product cards must remain visually consistent regardless of input. Sections shouldn’t rely only on “perfect” editorial photography.
1.3 Text flexibility
The layout should remain stable with:
long or short headlines
short or long CTA labels
minimal or rich product descriptions
There should be no text overflow, no unaesthetic text clipping, no uneven spacing inside and around the section.
Two principles of effective CTAs:
CTAs should be action-based. No: “Our location.” Yes: “Find us on a map.”
CTAs with consistent function should have consistent wording. A good example is when all the buttons that invite users to buy something are labelled “Buy now.”
1.4 Structural stability
The layouts should not rely on “ideal” demo content.
The structure must keep its shape: cards stay aligned, columns don’t break, spacing remains consistent, and long or short text does not distort the layouts.
Sections should stay visually tidy and structured, even if some content is shorter, longer, or not provided.
1.5 Vertical universality
A theme that works across different product types (for example Apparel, Home & Garden, Jewelry & Accessories, etc.) is more likely to be chosen by a wider range of merchants and perform better commercially.
The goal is not to fit every vertical perfectly, but to ensure the design is flexible enough so that several of the key verticals can use it comfortably.
Key verticals:
Apparel & Footwear
Sports & Outdoor
Vape & Smoke
Bike
Golf
Wine & Liquor
Home & Garden
Jewelry & Accessories
Pet
Others
Checks to ensure the theme fits verticals flexibly:
1.6 Ease of content replacement
Make sure that your theme allows users to change content without breaking the theme's narrative or its technical execution:
Merchants should be able to add their own photos and text without breaking the visual balance.
The design should not depend on professional branding or art-direction.
Content areas must be clear and predictable, so replacement does not change the look and feel of the section.
1.7 Universal, safe, merchant-friendly text rules
Keep sample texts simple yet meaningful Avoid:
Space fillers like Lorem Ipsum
Nonsensical words and phrases
Descriptions of the section's functionality
Try to keep the functionality of the section deducible from the design, not described in words.
Keep the default tone neutral and broadly usable This way, a theme works for different types of merchants. Avoid:
Slang or niche-specific language (“your bakery”, “your gym”, “your vape brand”)
Overly emotional or biased statements
Culturally loaded assumptions
Aggressive promotional language
A neutral baseline makes it easier for merchants from different verticals to adapt the content quickly, without rewriting everything from scratch.
Balanced text length Demo texts should have a balanced structure:
Concise but meaningful headings
Short paragraphs (2–4 lines max)
Use demo texts to set an example of optimal content: concise, helpful, and easy to read. At the same time, ensure your design is minimally affected by non-optimal content.
CTA rules CTAs (call to action elements) should be action-based and descriptive. Recommended:
“Shop Now”
“Learn More”
“View Collection”
“Explore Products”
“Add to Cart”
Not recommended:
“Click Here”
overly long CTAs
jokey or whimsical CTAs (unless stylistically required)
Consistent content hierarchy Your theme must show good examples of:
Clear primary heading structure
Simple H2/H3 hierarchy
Short paragraphs, each with a clear purpose
Merchants should understand how to structure their content just by looking at the demo.
Optionality is allowed, but must be explicit If a block is optional, placeholders should say so:
“Optional: Add a short subtitle”
“Optional: Add a testimonial or rating”
This minimizes uncertainty (“what should I put here?”).
Do not hardcode brand identity into text Not recommend:
Invented slogans
Content too specific (“our sustainable factory in LA…”)
Overly stylized writing
Jokes, rhymes, metaphors
Merchants must feel the theme is a neutral vessel, not someone else’s personality.
2. Visual design quality
A modern website is not defined by a single visual style. It can be minimal, playful, raw, editorial, luxurious, experimental, or bold. Modernity is not about “clean vs. noisy” or “simple vs. complex.” Modernity is the quality of execution, not the aesthetic itself.
A modern theme feels:
intentional — every visual decision looks deliberate, not accidental
cohesive — all sections speak the same visual language
structured — spacing, grids, and proportions feel considered
emotional — the site creates atmosphere, not just layout
visually confident — strong in identity, consistent in tone
technically reliable — readable, accessible, visually clear
Today’s web draws from both contemporary graphic design and editorial culture; it borrows ideas from magazines, posters, branding systems, and digital installations.
A theme is considered modern when it creates a strong, unified visual experience — regardless of whether its style is quiet, expressive, experimental, or playful.
This is the foundation for evaluating Visual Design Quality.
2.1 Visual intent
The design must look intentional — not accidental, not random.
Check that:
Cpacing, compositions, and shapes feel purposefully chosen.
Bold or chaotic elements still appear controlled.
All elements should feel intentional — nothing accidental or out of place.
Examples: Yes: playful, chaotic layout with clear alignment logic. No: uneven gaps, random image crops, inconsistent font sizes.
2.2 Cohesion
All parts of the theme must feel like they belong to the same world. Cohesion refers to stylistic unity, not just the correctness of spacing.
Check that:
Typography, colors, spacing, and visuals are stylistically consistent
The chosen aesthetic is maintained across all sections
No section feels outdated or disconnected from the rest
Examples: Yes: consistent editorial tone from hero to footer. No: clean minimal hero + cluttered product grid + random playful icons.
2.3 Grid and rhythm
Regardless of style, the layout must have a readable internal structure. This evaluates visual craft, not technical stability (covered in Level 1).
Check that:
Spacing is predictable
Alignment is clean
Proportions feel intentional
Cards and blocks follow a consistent rhythm
Examples: Yes: even on expressive sites, grid lines are respected. No: blocks of inconsistent height, floating elements, broken alignments.
2.4 Readability and contrast
Users must be able to read the content clearly in all sections.
Check that:
Text is readable over images and backgrounds
Accent colors don’t compromise clarity
Headings and CTAs remain visible in all content scenarios
Examples: Yes: white text over noisy image, but with gradient/overlay. No: thin light text over saturated gradient → illegible.
2.5 Image aesthetics and integration
Images of different shapes and styles must visually integrate into the design without breaking its aesthetic quality.
This is not about technical stability (covered in Level 1) — it evaluates how well the visual character of the layout holds up when real merchant photos are used.
Check that:
1:1, 3:4, and 16:9 images look balanced within the layout
Cropping feels intentional and aesthetically consistent
Image containers preserve their visual proportions
Mixed-quality photos do not ruin the overall mood or tone
The theme still looks polished even with uneven photography
Examples:
Yes: A tall portrait photo still feels harmonious within a product card. No: One unusual image distorts the aesthetic rhythm or disrupts visual harmony.
2.6 Style–function balance
Aesthetic expression must not hide what the store sells.
Check that:
CTAs are visible
products remain identifiable
text isn’t overshadowed by decoration
artistic choices don’t block shopping logic
Examples: Yes: experimental typography paired with clear buttons. No: hero image so artistic that it’s unclear what the brand is.
2.7 Spectrum alignment
Every theme should fit naturally into one of our aesthetic spectrums. Read more: Aesthetic Spectrum
2.8 Accessibility and contrast standards
To ensure theme remain usable for all merchants and customers — especially in the NA region — all designs must follow essential accessibility principles.
Accessibility is not a limitation on creativity; it is a baseline that ensures clarity, readability, and trust across all palette choices and themes.
Themes should follow these rules:
Text must remain readable with sufficient color contrast in all palette variations
CTAs and buttons must be clearly distinguishable from surrounding content
Interactive elements must have visible focus states (hover, active, focus)
Essential information cannot rely on color alone
Typography must stay legible across both light and dark configurations
Iconography and UI elements must maintain clear visibility against their backgrounds
Our minimum requirement is to follow WCAG 2.1 AA contrast standards for text and interactive elements.
For detailed accessibility and contrast guidelines, refer to the official W3C documentation (free and publicly available):
WCAG 2.1 Guidelines (W3C) https://www.w3.org/TR/WCAG21/
WCAG Quick Reference https://www.w3.org/WAI/WCAG21/quickref/
3. Selling ability (conversion-oriented design)
Most of our merchants don’t have strong branding, high-quality photos, or a clear story — the theme has to do part of the selling work for them.
Beautiful visuals inspire, but they don’t guarantee conversion.
A good theme must provide clear, simple, built-in selling points that help the merchant explain what they sell, why it matters, and why the customer should trust them — even when they don't have a lot of high-quality content.
This is why we evaluate every theme not only for aesthetics, but for its ability to help merchants actually sell.
3.1 Essential selling practices
These are simple, reliable elements that help any theme support conversion — especially for merchants who have limited branding, not best quality photos, or very little content.
They are not strict requirements, but strong, proven practices that make themes clearer, more trustworthy, and easier to shop.
Strong Hero Section The hero must quickly answer, “What is this store?” Include:
Clear headline (what the store sells)
Simple positioning statement
High-contrast CTA
Readable background that does not overpower content
Visible Products The theme should show products early and clearly. At least one proper product section:
Clear photo
Visible price
Strong action button (Buy / Shop / View)
A shopper can understand the offer within seconds.
Trust / Value Block At least one block that builds trust or explains value. This may include:
Benefits
Guarantees
Badges/certifications
Reviews
Security or delivery info
Even one small trust element can dramatically increase conversion.
Clear Navigation Navigation must not create friction. Check that:
Menu is simple
Cart is visible
Path to checkout is obvious
Navigation elements are not hidden by design choices
Product Cards That Sell (Regardless of Image Quality) Product cards must remain sellable even when photos are dark, inconsistent, or phone-shot. Minimal tools that make any card work:
Clear product name
Visible price
Simple, strong CTA
Consistent image container that hides bad cropping
Neutral background or soft shadow to support lower-quality photos
Goal: even imperfect images still look trustworthy and shopper-friendly.
3.2 Optional enhancers
These elements reinforce conversion but are not mandatory:
Storytelling blocks (about, mission, team etc.)
Promotions, offers, discount banners
Bundles
Category blocks
Decorative visual anchors
Animations
Loyalty and gift cards featuring
4. Color system and brand adaptability
Most merchants don’t have a full brand book.
Very often, they only have:
Logo or even just a name.
Rough idea of “warm/cold" or "bright/soft”.
Few product photos.
Our color system solves this by letting us define one 6-color brand palette per site.
Based on this palette, the system can:
apply predefined themes (light, dark, accented),
recolor the entire theme consistently using the same mapping rules,
support multiple palette variations (“skins”) created by designers for the same theme.
Don’t pick colors for every button or card manually. Define the 6 core colors; the system already knows how to apply them.
This means themes must be designed to work well with any valid 6-color palette, and allow the whole site to change mood simply by switching palettes.
4.1 How the 6-color brand palette works
Each site uses one brand palette at a time.
This palette always consists of six roles:
Lightest – primary light background
Light – secondary light surface / card background
Soft Accent – light accent (can be used as a soft colored background)
Strong Accent – strong accent (buttons, links, accent text)
Dark – soft dark (primary text, muted text, icons)
Darkest – the darkest tone (strong contrast, dark backgrounds)
The color system works across three layers:
Brand Palette — defines the six base colors
Presets — define how these six colors are assigned to backgrounds, accents, and surfaces
Theme Modes — apply stylistic variations on top of presets (e.g., swapping hero background, emphasizing accent, adjusting contrast behavior)
Presets and themes never change the six colors — they only change how they are used.
Examples:
Light Preset → Lightest as main background, Strong Accent for CTAs
Dark Preset → Darkest as main background, Lightest for text
Accented Preset → Soft Accent + Strong Accent CTAs
Editorial Mode → Uses palette differently in hero/typography-heavy sections
Switching to another palette (another set of 6 colors) should visually “reskin” the theme without breaking structure or readability.
For technical mapping details (which tokens use which roles), see the separate [Color System Specification].
4.2 Requirements for the 6 colors
To keep themes safe and adaptable, each color role must follow some basic rules of tone and contrast.
Lightest — primary light background
Very light, close to white or soft off-white.
Neutral or slightly tinted.
High contrast with Dark and Darkest.
Used as main page background in light modes.
Goal: everything looks clean and breathable on top of it.
Light — secondary light surface
Also light, but clearly different from Lightest.
Can be slightly warmer / cooler / more tinted.
Still light enough for Dark text to be readable.
Used for cards, sections, panels.
Goal: create subtle depth and layering without heavy blocks.
Soft Accent — light accent background
A light, colored tone (not too dark, not neon).
Can be used as background with Dark or Darkest text.
Should feel softer than Strong Accent, but clearly related in hue.
Must keep good readability in sections with text.
Goal: add personality and mood (e.g. soft pink, pale blue, warm beige) without killing readability.
Strong Accent — brightest accent
Saturated, clearly visible, emotionally expressive.
Used for primary CTAs, active states, key highlights.
Must have strong contrast on Lightest / Light backgrounds.
Should not be so dark that it merges with Darkest, and not so light that it loses power.
Goal: be the “brand color” that catches the eye and drives action.
Dark — soft dark for text
Dark, but clearly lighter than Darkest.
Used for primary text, muted text, icons, some borders.
Must be readable on Lightest, Light, and Soft Accent.
Should not be a pure black if Darkest is already very dark — it’s a softer dark.
Goal: readable, comfortable text and subtle dark elements without feeling too harsh.
Darkest — deepest dark tone
The darkest color in the palette.
Used for strong dark backgrounds, some typography in dark sections, high-contrast elements.
Needs strong contrast with Lightest, Light, Soft Accent.
Should be clearly darker than Dark.
Goal: provide depth, drama, and strong contrast for dark sections and themes.
4.3 How to use 6-colors in theme design
When designing a theme, assume:
You only get six input colors from the brand.
You do not control individual element colors at runtime — only the mapping to roles.
A site can switch between palettes, presets, and modes without redesign.
Using the 6 colors, designers can create:
Light versions
Dark versions
Accent versions
Colored Light variations
Colored Dark variations
Additional mixed versions for different atmosphere
Presets allow you to shift emphasis:
Use Soft Accent for big sections,
Use Strong Accent sparingly or heavily,
Invert surfaces in dark mode,
Create hero variations without adding extra colors.
To ensure themes survive palette changes:
Rely on the six roles for all color decisions
Avoid standalone hardcoded colors
Avoid “rainbow” color usage
Keep sections readable under warm, cool, bright, or muted palettes
Ensure colors look intentional in both light-leaning and dark-leaning configurations
4.4 Using decorative color and effects safely
Designers can use the following elements:
Gradients (ready-made or vertical),
Textures,
Noise,
Glitch,
Shadows,
Illustrations,
Colored shapes or overlays,
However, these must:
Not affect readability or text contrast,
Remain visually compatible with different palette choices,
Keep the layout/hierarchy unchanged when removed or changed.
Decorative elements should support the color system, not replace it.
Last updated
Was this helpful?