Search results
0No results yet. Try a broader topic or a shorter phrase.
Design and product experience
Organize brand, product choices, variants and imagery, then test templates, navigation, bundles and performance along the mobile buying journey.
For · Brand, merchandising, design and theme delivery teams
1 / 4
Structure & navigation
Make the right route easy to find.
InputBuying journey and catalogOutcomePage roles, menus and search requirements
What are the different jobs of home, collection and product pages?
The home page introduces the brand and routes; a collection helps shoppers compare and narrow choices; a product page explains a specific item and supports buying. Connect these roles before placing stories, guides and help.
- Follow a home-page entry through a collection to one product.
- Check the information needed before each next step.
The layout depends on the catalog, industry and buying process.
How should search and filters help product selection?
Start with model names, uses and attributes shoppers actually enter. Define the needed products, accessories and help results, then test selected filters, result counts, empty results and reset behavior.
- Test a model, a synonym and a query with no result.
- Check returned items against selected attributes.
Available result types depend on configuration and implementation; URL crawling is a separate SEO decision.
Articles & checklists for this step
2 / 4
Pages & visuals
Explain the brand and product consistently.
InputPage roles and brand assetsOutcomeReadable design and evidence placement
How do pages maintain a consistent brand identity?
Agree shared rules for type, color, images, spacing and interaction before varying layouts by task. Use motion to explain state or guide action, then check its effect on reading and buying.
- Compare shared elements across home, collection and product pages.
- Check that information and actions remain clear with reduced motion.
Brand direction depends on products, audience and the actual design work.
How can product imagery support understanding and loading?
Give each image a job: explain material, scale, use or an option. Choose its aspect ratio, crop and display size, then check important details and layout stability on a phone.
- Check crops, focal points and readable details at different widths.
- Record how critical images and scripts affect loading and interaction.
Platform image optimization and the theme’s final presentation are separate. Recheck variant selection and the cart after performance changes.
Where should stories, reviews and evidence appear?
Place them where shoppers evaluate differences, trust or buying conditions, with links to the underlying explanation. Identify brand statements, industry examples and customer reviews accurately.
- Connect each piece of evidence to a real buyer concern.
- Check names, models, dates and attribution.
An industry example does not establish WESWOO’s involvement; reviews and results require genuine evidence.
Articles & checklists for this step
3 / 4
Product & purchase
Connect understanding with selection and buying.
InputDesign, models and buying conditionsOutcomeConsistent options, accessories and cart
How do you verify the selected variant after a product-page redesign?
Identify the actual variant from its options, then compare media, price, availability and the cart result. Also enter through a variant deep link and check that the selected item matches what reaches the cart.
- Test available, sold-out and missing-image variants.
- Change the selection, add it to the cart and verify options and quantity.
A title or hero image does not identify a variant. Check prices, availability and delivery in the intended market.
How can model, bundle and accessory choices avoid mistakes?
Identify the main model and option, explain bundle contents and accessory compatibility, and show the resulting amount. Recheck compatibility after changing the main item and inspect every cart line.
- Test required, optional and incompatible choices.
- Compare standalone and bundle contents and prices.
Recommendations do not establish compatibility; displayed totals must match the actual offer.
Which conditions should be clear before checkout?
Make currency, delivery scope, returns and warranty information findable for the current market. Check model, accessories and quantity in the cart, link summaries to applicable policies, then compare checkout with those commitments.
- Open the relevant policies from product and cart pages.
- Use a controlled order to verify charges and contents.
Delivery, warranty and return terms must reflect the merchant’s approved policies.
Articles & checklists for this step
Five checks for a product-template change
Establish the scope
Record the current theme, template and products that use it. Preview in a duplicate theme and retain existing copy, media and settings. A shared template change affects the other product pages that use it.
Identify each content source
Map the title, specifications, images and descriptions to product data, metafields or template content. Test empty values and missing translations, and confirm where the merchant maintains each item.
Compare two kinds of products
Use one well-populated product and one with less data on the same template. Compare media, specifications and recommendations. Change one product record and verify that it does not incorrectly overwrite another.
Complete the buying journey
On mobile and desktop in the target market, change variants and compare media, specifications, price, availability and the cart line. Check keyboard operation, obscured text and concise alternative text for product images.
Record release and recovery
Record the owner, version, release time and affected templates. Repeat representative buying journeys after release. Before reverting, review subsequent work by others so it is not overwritten.
Teaching scenario: two products share a template
Suppose product A has a complete material description and product B has no value for that field. Preview both after the template change, record how B displays the empty value, and check whether each variant shows its own image. Do not turn A’s content into a claim shared by every product.
Choose metafields or metaobjects
Who owns the value?
Product or variant specifications normally fit metafields. Consider metaobjects for multi-field content referenced in several places.
Who maintains and reads it?
Record type, unit, language, source and maintenance responsibility. Check theme Liquid, Storefront API and admin access separately.
What happens when data changes?
Plan fallbacks for missing translations, empty values, removed references and publication state. Validate with isolated records before any production bulk change.
4 / 4
Mobile & acceptance
Complete a buying task before acceptance.
InputWorking pages and test productsOutcomeInteraction, performance and exception evidence
What should a mobile storefront acceptance check cover?
Follow the shopper’s task: find a product, understand differences, choose options, check conditions and reach checkout. Inspect navigation, overlays and controls at each step instead of judging only the homepage.
- Complete the main buying journey at a narrow width and record failures.
- After closing menus and overlays, check headings, scrolling and controls.
A lab score or screenshot cannot establish the experience of real shoppers. Record devices, networks and real-data observations too.
What needs checking after a performance change?
Recheck navigation, options, cart and checkout entry before comparing loading and interaction. Record the page, device, network and change scope, keeping lab measurements separate from real usage.
- Inspect changes to important images, apps and scripts.
- Retain comparable before-and-after results and failures.
A score alone cannot establish conversion improvement.
Articles & checklists for this step
Bring the brand story onto the product page
Choose one featured product and connect the brand story to design, materials and use that shoppers can verify.
Pick a real design decision
Choose a material, construction detail or use case and explain which customer problem it addresses.
Give each image a question to answer
Use a close-up for texture, a familiar reference for scale and a scene that shows the product in use.
Separate brand, collection and campaign choices
Keep a common baseline for product photography. Give collections room for their own details and place campaign styling on campaign pages.
Try choosing a product on mobile
Ask someone unfamiliar with the brand to compare two products and find the differences, specifications and evidence behind their choice.
Learn from project examples
INIU · Specifications to cart
- Business problem
- Power, capacity, ports and device compatibility need to be compared quickly.
- Implementation described in the published case
- The case places core specifications in the main reading area and connects scenario entry points, filtering and mobile add-to-cart to the same product fields.
- Acceptance question for a new project
- Choose different specifications, colours and stock states. Do the list, product page and cart refer to the same sellable configuration?
Shokz UK · Scenarios and variants
- Business problem
- Shoppers first choose a sports or work range, then confirm colour, fit and accessories within a model.
- Implementation described in the published case
- The case separates scenario navigation from variants and keeps media, benefits and purchase controls tied to the current SKU.
- Acceptance question for a new project
- Switch colour and fit, then use the long-page purchase bar. Do imagery, price, benefit copy and cart variant remain consistent?
Maintained by WESWOO · 2026-11-12
Related service · Shopify design and theme development ↗Working on a store project?
Connect what you have learned to the right scope, people and next steps.