01 When Images Do the Selling
Online, nobody touches the product. The images are the product.
A skincare Shopify store with 34 products came to us converting at 1.4%, below the ecommerce average, despite solid reviews and repeat customers who clearly loved what they bought. The problem was visible within minutes of opening the store: every product page led with a single bottle-on-white photo, followed by two or three near-identical angles of the same bottle. No texture. No usage. No answers.
Skincare buyers have questions that words answer slowly and images answer instantly. What does the texture feel like? How much do I use? When in my routine does it go? What will it do for my skin type? Baymard Institute's product page research consistently finds that users rely on images as a primary way to evaluate products, and that most ecommerce sites provide too few image types, not too few images. Ten angles of a bottle answer one question ten times.
The store assumed the fix was an expensive new photoshoot. It wasn't. The raw photography was fine. What was missing was a system: a deliberate sequence of image types where each slot answers a specific buyer question, plus designed graphics for the answers photography can't provide. This case study covers that system, how we built it across the catalog with the photos the store already had, and what it did to the numbers.
The core product graphics insight: shoppers don't browse image galleries, they interrogate them. Every image slot is a chance to answer a purchase-blocking question. A gallery that shows the same bottle from five angles has answered one question and left five unanswered. Design the gallery around the questions, not the product.
02 What the Image Audit Found
We audited every product page's imagery against the questions buyers actually ask, pulled from three sources: on-site search queries, support tickets, and the questions customers asked in reviews. Then we checked scroll depth and gallery interaction data. The pattern was consistent across the catalog:
GALLERY CONTENT GAPS
Average 3.2 images per product, all of them pack shots. Baymard finds most product pages need multiple image types: in-scale, in-use, detail, and informational
Zero texture or swatch shots across a catalog where texture is a top-three purchase question
No usage or routine imagery, "how do I use this" was the #1 support ticket theme
Ingredient info existed only as a long text list below the fold
DECISION SUPPORT GAPS
Store sold three cleansers with no visual way to tell which one fits which skin type, on-site search showed users bouncing between all three
Product size unclear: no in-hand shot, several reviews mentioned "smaller than expected", a known returns driver
Before/after results claims in text with nothing visual supporting them
31% of pre-purchase support tickets were some form of "is this right for me"
VISUAL IDENTITY PROBLEMS
Three generations of packaging photography mixed across the catalog: different lighting, backgrounds, and crops in the same collection grid
Occasional promo graphics made in different tools by different freelancers, no shared palette or typography
Collection grid read as a marketplace of random sellers, not one brand
BEHAVIORAL EVIDENCE
Gallery interaction data showed most users swiped past image two, then scrolled to reviews looking for the answers the gallery didn't give
Customer photos in reviews got more zoom interactions than the store's own photography
Pages with a lone lifestyle image (added ad hoc over the years) converted measurably better than pack-shot-only pages, the experiment had already run itself
03 Our Product Graphics Approach
Product imagery work fails when it's treated as decoration or as photography alone. We treat it as conversion infrastructure, built in three steps:
Research first
Support tickets, review questions, and on-site searches are a free, ranked list of what blocks purchases. We tagged three months of them into themes. The top five themes became the brief for the image system. Nothing got designed because it looked good; everything got designed because a specific question needed answering at a specific moment.
System over assets
One defined gallery structure applied to all 34 products: each slot has a fixed purpose, template, and style rules. This is what makes the work scale. Designing 34 galleries individually is a project that never ends. Designing 7 slot templates once, then populating them, took three weeks for the full catalog and keeps every future product launch consistent by default.
Designed answers
Some questions have no photographic answer: which cleanser suits my skin type, what do these ingredients do, how does this fit in a routine. Those get designed infographic slides inside the gallery, built in the brand's palette and type so they read as product content, not ads. This is where graphic design directly does conversion work that photography can't.
04 The 7-Slot Gallery System
Every product page gallery was rebuilt to this sequence. Each slot answers one question, in the order buyers ask them:
"What am I buying?" The only slot the old galleries filled. Standardized crop and background across all 34 products
"What does it feel like?" A smear or drop of the actual product, shot close. The single most zoomed image type after launch
"How big is it?" Product held in a hand. Directly addresses the "smaller than expected" review pattern and its returns
"What will it do for me?" Designed slide: product photo plus three benefit callouts, brand palette, consistent template
"What's in it?" Three hero ingredients with one-line plain-language explanations, replacing the wall of text nobody read
"When do I use it?" A simple AM/PM step strip showing where the product sits in a routine. Killed the #1 support ticket theme
"Do people like it?" Star rating, review count, and one short customer quote, designed in the same template family
Why order matters: gallery analytics showed most shoppers view the first three images and a swipe past that is earned, not given. So the sequence front-loads the highest-stakes answers: what it is, what it feels like, how big it is. The designed graphics sit behind them for the shoppers deep enough in consideration to keep swiping.
05 Designing the Benefit Graphics
The infographic slides (slots 4, 5, and 6) are where most stores go wrong in one of two directions: either they skip them entirely, or they cram Amazon-style graphics with starbursts, ten callouts, and clip-art icons that cheapen the brand. The design rules we set:
| Rule | What It Means | Why |
|---|---|---|
| Three callouts max | Each graphic makes at most three points, in seven words or fewer each | A graphic that says ten things says nothing. Shoppers give each gallery image seconds, not minutes |
| Brand type and palette only | Same two typefaces and color set as the site, one template family for all graphics | Graphics that match the brand read as product information. Graphics that don't read as third-party ads and lower trust |
| Plain language | "Helps skin hold moisture" instead of ingredient jargon | The graphic is for the buyer who doesn't know the jargon. The buyer who knows it reads the full list below anyway |
| Real product photo in every graphic | Each infographic is built around an actual photo, never icon-only layouts | Keeps the slide anchored to the thing being bought and keeps the gallery feeling like one continuous set |
| Legible at thumbnail size | Every graphic checked at the size of a mobile gallery dot-swipe view | Most gallery views happen on phones. A graphic that only works at desktop zoom fails where the buying happens |
The skin-type comparison problem got its own treatment. For the three cleansers, we designed one shared comparison chart, which cleanser for which skin type, and placed the same graphic in all three galleries. Shoppers stopped bouncing between the three pages trying to reverse-engineer the difference:
BEFORE: THREE PRODUCTS, NO MAP
The experience
Three cleanser pages with near-identical photos and descriptions differing by a few adjectives
The behavior
Users ping-ponged between pages, many left to research elsewhere, some asked support, most just left
"Which one is for me" was 31% of pre-purchase tickets
AFTER: ONE COMPARISON GRAPHIC, EVERYWHERE
The design
A single chart mapping skin types to the right cleanser, present in all three galleries and the collection page
The behavior
Cross-page bouncing dropped, and the "wrong" products stopped getting bought and returned
Skin-type support tickets down 31%, cleanser returns down too
06 Consistency Across the Catalog
The second half of the project was less glamorous and just as important: making 34 products look like one brand. Mixed photography generations, inconsistent crops, and freelancer-of-the-month promo graphics had left the collection grid looking like a marketplace. Stanford's Web Credibility research found that visual design is the single biggest driver of how users judge a site's credibility, and a ragged product grid is a credibility statement whether the store intends it or not.
The fixes were mechanical once the standards existed:
Edit, not reshoot
Every existing pack shot was re-edited to one standard: same background tone, same margin ratio, same shadow treatment, same crop. Older photos were color-matched to the newest generation. No reshoots. The collection grid went from visibly three eras of photography to one continuous set in about a week of retouching.
Handoff
All infographic slots, promo banners, and sale badges were built as editable templates with locked type, palette, and layout rules. The store's own team now produces launch graphics that match everything else without a designer in the loop. Consistency that depends on one freelancer's memory dies with the next invoice. Consistency that lives in templates survives.
Speed
Seven images per gallery could easily have doubled page weight. Every asset ships as WebP with responsive sizes, graphics exported at exactly the display resolution, lazy loading past slot two. Median product page weight went down 22% despite the galleries more than doubling in image count. More images, faster pages, both at once, because weight was a design rule from day one.
07 Results: Same Products, Same Traffic, 57% More Conversions
The new galleries rolled out in two waves: the 10 best sellers first, then the rest of the catalog over three weeks. That gave us a built-in comparison, redesigned pages against not-yet-redesigned pages, on the same site with the same traffic, before the full rollout completed. Eight weeks after full rollout:
| Metric | Before | After (8 Weeks) | Change |
|---|---|---|---|
| Overall conversion rate | 1.4% | 2.2% | ↑57% |
| Add-to-cart rate (redesigned pages) | 5.0% | 7.3% | ↑46% |
| Gallery engagement (viewed 4+ images) | 18% | 44% | ↑26pts |
| "Is this right for me" support tickets | Baseline | −31% | ↓31% |
| Return rate (cleansers) | 11% | 7% | ↓4pts |
| Median product page weight | Baseline | −22% | Faster, with 2x images |
Metrics from GA4, Shopify analytics, and the store's helpdesk, comparing the 8 weeks before the first rollout wave against weeks 3–10 after full rollout. Traffic within 6% across both periods, no pricing or ad strategy changes in the window. During the phased rollout, redesigned pages outperformed not-yet-redesigned pages on add-to-cart rate by a similar margin, which is the strongest evidence the imagery drove the result.
Context: the phased rollout matters for honesty here. Because best-seller pages got new galleries weeks before the rest of the catalog, we could watch redesigned and untouched pages side by side under identical traffic. The gap between them tracked the final overall lift closely. Without that comparison, a 57% conversion claim from imagery alone would deserve skepticism.
08 Why It Worked
Three principles carried the result, and none of them required a camera.
The gallery answered questions instead of showing angles Biggest lever
The old galleries answered "what does the bottle look like" five times. The new ones answer seven different questions once each: what it is, what it feels like, how big it is, what it does, what's in it, when to use it, and whether people like it. Gallery engagement more than doubled because there was finally a reason to keep swiping. Every image type maps to a question mined from real support tickets and reviews, which is why the ticket volume fell alongside the conversion lift.
Designed graphics did the work photography can't Graphics as conversion
Comparison charts, ingredient explainers, and routine strips are pure graphic design, and they addressed the single biggest revenue blocker: shoppers who wanted to buy but couldn't tell which product was theirs. The skin-type chart alone cut the dominant support ticket category by a third and reduced wrong-product returns. When a store's problem is buyer confusion, the fix is information design, not better photos.
A system made consistency automatic Scale
Slot templates, retouching standards, and an editable graphics kit mean the 35th product will look like the first 34 without anyone remembering the rules. The store's perceived credibility rose with the grid's consistency, which matches what credibility research has said for two decades: buyers judge trustworthiness by visual coherence long before they read a word. Systems age well; one-off assets don't.
09 Key Takeaways for Store Owners
List the five questions buyers ask before purchasing your product, from support tickets, reviews, and search terms. Then open your gallery and check which ones it answers. Most stores discover they've answered one question many times.
Re-editing existing photos to one standard, sequencing them deliberately, and adding designed graphics costs a fraction of new photography and usually moves the numbers more. Shoot new photos only for the slots the system reveals as truly empty.
Any store selling variants of the same category (three cleansers, four coffee roasts, five mattress firmnesses) needs one comparison graphic shared across all of them. Confused buyers don't pick one, they leave, or worse, they pick wrong and return it.
Three callouts max, brand fonts and colors, plain language, real product photo, legible on a phone. If it looks like a marketplace ad, it lowers trust instead of building it.
Redesign your top ten pages first and compare them against the untouched rest under the same traffic. The gap is your evidence, and it turns the rest of the rollout from a bet into a decision.
Are Your Product Images Answering Buyers' Questions?
We'll audit your galleries against what your buyers actually ask, and show you which images and graphics are missing, ranked by conversion impact.
Reading Time: 9 minutes · Category: Ecommerce Design · Product Graphics · Image Systems