blog.shopyra.app

Tag: ux

  • The Shopify product page checklist we run before every launch

    The Shopify product page checklist we run before every launch

    The product page is where the decision happens. Everything upstream — ads, collections, search — only exists to get someone here. This is the checklist we run before any store we work on goes live.

    It is deliberately specific. “Improve trust” is not actionable. “Put the returns window within one scroll of the buy button” is.

    Above the fold

    1. The main image loads first and loads fast. It is the LCP element on almost every product page. Eager loading, high fetch priority, sized for the device.

    2. Price is visible without scrolling on a 375px screen. Test on the smallest phone you support, not on your laptop with DevTools at 375px — those are not the same thing once the browser chrome is included.

    3. The product title reads like a person wrote it. “Merino Crew Neck — Charcoal” beats “MCN-2847-CHR-M Wool Sweater Mens Winter Warm”.

    4. Variant selection is obvious and reflects availability. Out-of-stock variants should look out of stock before they are tapped, not after.

    5. The add-to-cart button says what it does. “Add to cart” is fine. “Submit” is not. If there is a subscription option, the button should change to reflect the selected purchase type.

    6. There is one primary action. A buy button competing with a wishlist button, a compare button and a “notify me” button of equal weight is three ways to not buy.

    Trust and objection handling

    7. Shipping cost and timing are answerable in one interaction. Not a link to a policy page in the footer. A line under the button, or an accordion one tap away.

    8. The returns window is stated in a number of days. “Easy returns” means nothing. “30-day returns, we pay the label” means something.

    9. Reviews are on the page, not in a tab that requires loading. If you have fewer than ten reviews, show them anyway — sparse and real beats absent.

    10. Review content is skimmable. A rating distribution bar and the ability to filter by star rating does more work than a chronological list.

    11. Sizing guidance is specific to this product. A generic size chart for the whole store is a returns generator. Model height and worn size is the single highest-value line of copy on an apparel PDP.

    12. Payment options are shown as icons near the button. This is the one place trust badges genuinely earn their space — people want to know if their preferred method works before they invest in checkout.

    13. Nothing on the page is false. No fake countdown, no invented “12 people are viewing this”, no scarcity that is not real. Shoppers recognise these and the ones who do not are being misled. Neither outcome is good.

    Content and clarity

    14. The first paragraph answers “what is this and who is it for”. Not brand story. Brand story goes further down.

    15. Specifications are in a table, not a paragraph. Materials, dimensions, weight, care. Scannable.

    16. There is at least one image showing scale. A product in isolation on white has no size. Show it held, worn, or beside something familiar.

    17. There is at least one image showing detail. Texture, stitching, finish. This is what replaces touching it.

    18. Alt text describes the image. Both for screen readers and because image search is a real traffic source for physical products.

    Technical and search

    19. Product structured data is valid. Schema.org Product with offers, price, priceCurrency, availability and aggregateRating where you have reviews. Test it in Google’s Rich Results Test. Rich snippets in search results measurably improve click-through.

    20. The canonical URL is clean. Shopify serves products at both /products/x and /collections/y/products/x. Make sure the canonical points at the former, consistently.

    21. The meta description is written, not generated. 150 characters that give a reason to click, not the first 150 characters of the description.

    22. No layout shift when reviews or badges load. Reserve the space.

    23. It works with JavaScript disabled — or at least degrades honestly. You do not need full no-JS support, but a page that renders as a blank white rectangle when a script fails is a page that loses every visitor on a flaky connection.

    The one that is not on the list

    We deliberately do not include “add urgency” as a checklist item. Real urgency — genuine low stock, a genuine campaign deadline — is worth communicating. Manufactured urgency converts slightly better in the short term and costs you the customer’s trust permanently, which is a bad trade for anyone planning to still be selling next year.

    If you want the honest version of that pattern, build it against your real inventory data rather than a number you type into a settings field. It converts less than a lie would. That is the point.

    Running the checklist

    Print it, or copy it into a Notion doc. Run it on your three best-selling products first — that is where a two-point conversion improvement pays for the afternoon.

    Then run it on a product you have not looked at in a year. That one is usually more instructive.

  • Seven store design decisions that matter more than your theme

    Seven store design decisions that matter more than your theme

    Merchants spend weeks choosing a theme and an afternoon on everything below. The ratio should be reversed. A well-executed free theme beats a badly configured premium one every time, because these seven decisions do most of the work.

    1. Pick two typefaces and stop

    The fastest way to make a store look amateur is three or more type families. The fastest way to make it look considered is one family used at several weights, or two with an obvious division of labour — one for headings, one for everything else.

    Two practical constraints:

    • Load one weight range, not eight. A variable font covering 400–800 is one file. Eight static weights are eight requests, and you will use three of them.
    • Set a real type scale. Pick a ratio (1.25 is safe) and generate your sizes from it rather than choosing each one by eye. Consistency across a store is what reads as “designed”.

    2. Use one accent colour, deliberately

    Most store palettes fail by having too many colours doing the same job. You need:

    • A background (usually near-white or near-black)
    • A text colour with sufficient contrast against it
    • One accent, used only for things that are clickable or important
    • A muted grey for secondary text

    That is four. If your accent appears on a decorative divider, a heading, a badge and a button, it has stopped meaning “this is actionable”.

    Check contrast properly. Body text needs a 4.5:1 ratio against its background; large text needs 3:1. Grey-on-grey looks refined in a mockup and is unreadable on a phone outdoors.

    3. Set spacing on a scale

    Pick a base unit — 4px or 8px — and use multiples of it for every margin and padding value in the store. This single rule fixes more visual noise than any other change, because inconsistent spacing is what makes a page feel restless without anyone being able to say why.

    Then use spacing to group. Related things sit close together; unrelated things sit far apart. A price 4px from its product title and 32px from the next product reads correctly. The same elements at 16px and 16px do not.

    4. Decide what your images are

    Not “get good photography” — decide on a rule and apply it. Every product on white. Or every product in context. Or a consistent alternation of both. The specific choice matters far less than whether a shopper can tell there was a choice.

    The same applies to crop ratio. Pick one for product cards (4:5 is a good default for apparel, 1:1 for objects) and enforce it. A grid where some images are square and some are portrait looks broken even when every individual photo is good.

    5. Give the header one job

    Your header is not a sitemap. It should contain:

    • Your logo, linking home
    • Between three and six top-level links
    • Search, cart, account

    That is it. If you have eleven categories, the answer is a mega menu or a better information architecture, not eleven links at 13px.

    On mobile, the cart and search must be reachable with a thumb. Test this on a real phone held in one hand, which is how the majority of your traffic will do it.

    6. Write the microcopy

    The small text is where stores leak trust:

    • Empty cart: “Your cart is empty” is fine. Adding “Browse best sellers” with a link is better.
    • Form errors: “Invalid input” is useless. “Enter a postcode like SW1A 1AA” is useful.
    • Button labels: describe the outcome. “Add to cart”, “Continue to payment”, “Apply filters”.
    • Loading states: say what is loading.
    • Out of stock: say when it is back, or offer to tell them.

    None of this needs a designer. It needs someone to read every string on the site once, out loud.

    7. Respect the browser

    The things that make a store feel solid are mostly things you get for free by not overriding them:

    • Focus rings. Do not remove them. Restyle them if you must, but a keyboard user who cannot see where they are cannot check out.
    • Native scrolling. Custom scroll libraries almost always feel worse than the browser’s and break on touch devices.
    • prefers-reduced-motion. One media query. Some of your customers get motion sickness from parallax.
    • Back button. If your filters or variant selection do not update the URL, the back button takes people off the page instead of back a step.
    • Text selection and zoom. Do not disable either.

    The through-line

    Every item on this list is a constraint, not an addition. Fewer typefaces, one accent colour, one spacing scale, one image rule, fewer header links, less overridden browser behaviour.

    Good store design is mostly subtraction, which is why it does not correlate well with how much you spent on the theme.

    It is also why we build apps that inherit your theme’s decisions rather than imposing their own. An app that arrives with its own font, its own accent colour and its own spacing scale undoes the work you did here — which is a strange thing to pay a monthly fee for.