Skip to content
oBizee / FIELDNOTES
GUIDE 290 / Store design

Choose a store template with your real product photographs

Choose a storefront template by testing your actual photographs, crops, product details and mobile layouts instead of relying on polished demo imagery.

4 min read · estimatePublished by oBizee · Editorial approach

Choose a store around the work it must perform →

Choose a template with the photographs you own, not the photographs in its demo. A layout built around large, consistent studio images can look very different when it receives your real catalogue.

The goal is not to reject an ambitious visual design. It is to understand what content work the design requires before committing to it.

Assemble a representative image set

Choose a few products with different shapes and image conditions. Include a tall item, a wide item, a detailed close-up and an ordinary photograph that is not your strongest.

Use images you have permission to publish. Do not download a competitor's photographs to make your trial look finished.

The set should represent the range the template will actually display, including the less convenient cases.

Test the card crop

Place the images in the collection grid. Check whether the full product remains understandable at the template's card ratio.

A crop can create visual consistency while cutting off the feature a buyer needs to see. Jewellery clasps, bag straps or the top of a tall vase may disappear.

Do not solve every crop problem by shrinking the product to a tiny object. Compare crop behaviour and the amount of useful detail visible.

Inspect the product gallery

Open the same item on its product page. Check the main image, thumbnails and any zoom or enlargement behaviour available.

The gallery should help the buyer inspect relevant details rather than merely repeat the card image at a larger size.

Try a portrait and landscape image together. Decide whether the resulting change in height or framing is acceptable, and whether editing the originals would be a better solution.

Review text placed over images

A hero may look readable on the demo's dark background but fail on a bright product photograph.

Test the actual crop and wording on both wide and narrow screens. If readability depends on one precise patch of the image, the design may be fragile.

Consider a separate text area or a controlled overlay rather than forcing the image to carry both product evidence and text contrast.

Check loading without treating it as empty content

Large originals may take time to appear. Inspect whether the layout reserves space so text and controls do not shift unexpectedly.

Do not use a loading screenshot to judge the final crop, but do not ignore the loading experience either.

A useful test checks both the settled image and the route while media is arriving. Optimisation needs to preserve enough detail for the product decision.

Keep image meaning accessible

Write appropriate text alternatives according to the image's purpose. W3C distinguishes informative, decorative and functional images rather than recommending the same description for all of them. W3C image guidance.

A linked category image and a detailed product photograph may need different treatment. Do not repeat a long caption indiscriminately on every decorative image.

This is one part of accessibility, not proof that the whole template is accessible.

Estimate the content work

List the images that need recropping, replacement or additional angles. Include that work in the template decision.

A paid theme may not be expensive compared with the photography it requires. An included template may fit your existing assets with less adaptation.

Do not assume the demo's visual quality transfers automatically through installation.

Test with real names and prices too

Photographs share space with product titles, prices and option information. Use your actual wording, including a long name and an unavailable product.

A grid that looks balanced with short fictional labels may become uneven with real content. Check whether that affects comprehension rather than judging only symmetry.

Keep buying information readable even when the image is visually dominant.

Choose the fit you can maintain

Select the template whose crop rules and page structure suit the range, or commit explicitly to the content work needed to make it suitable.

Save a few representative screenshots from your authorised preview as future checks. Revisit them when new product photography is added.

The strongest template is not necessarily the one with the most impressive demo. It is the one that presents your actual products accurately and coherently without continual corrective work.

Use this guide, then test your own workflow.

Examples are illustrative. Confirm current features, charges and suitability before making a business decision.

Explore this topic → · Find an oBizee setup guide · Ask about your store