Fictional studio example / annotated wireframe
An inspectable design specimen, not a client screenshot, completed provider integration or measured result. Interface choices illustrate the task described in this guide.
Compare two reading orders for the same product
Studio chair
Dimensions → finish → availability
Useful when appearance leads the initial choice.
Studio chair
Dimensions and intended use
Useful when size or compatibility determines fit.
These are generic layout sketches for discussion, not verified Squarespace template controls or plan capabilities.
Compare reading orders for the same product
Use an image-first chair layout when appearance leads the choice and a specification-first version when dimensions or intended use determine fit. Keep finish and availability together in both. Comparing two reading orders for the same fictional product makes the design decision inspectable without claiming that a Squarespace template already implements it.
Worked example — illustrative data.
| Layout specimen | Reading order | Best-fit question |
|---|---|---|
| A: image-first Studio chair | Main image → dimensions → finish → availability → action | Does the appearance suit the intended space? |
| B: specification-first Studio chair | Dimensions and intended use → finish/availability → action → supporting image | Will the chair fit and serve the intended task? |
| Shared content checklist | Exact selected finish, contents, availability, delivery and returns link | Can the buyer make an informed choice? |
Sketch both layouts with the same fictional product facts. Ask which information a buyer must see before choosing and place it near the selection control. Keep key facts readable on a narrow screen without requiring repeated open-and-close interactions. Use current provider controls where they support the design and verify any customization dependency before promising it. The sketches are content designs; they do not assert that a particular template or plan includes every arrangement.
A gallery can push size restrictions below the action
A long image gallery can push an important size limitation below the purchase action. Bring the limitation into the decision area even when that makes the page less visually minimal.
Choose the layout that makes the product’s main fit decision easier to explain. Validate it with a real task before treating preference for either sketch as evidence of better sales.
Continue with Guides for stores, software teams and local businesses, eCommerce website design and development and Test a mobile product gallery.
Before applying the specimen, verify exact feature availability, required permissions and supported field formats in the provider’s current documentation and your store.