Work · Case study · Demo store
Hearth & Hound — pet & home-goods demo store
A demo store on PrestaShop for dog beds, collars, bowls and throws. The fixes here were things the store didn't have at all, like a size guide and filters. Others were places where it said something that wasn't true, from the policy pages to checkout.
Overview
What was missing, and what wasn't true
Three main fixes, then four smaller ones that bring the rest of the store up to the same standard.
Hearth & Hound is a fictional brand of goods for dogs, cats and the homes they share: linen beds, waxed canvas collars, oak feeders, wool throws. Much of the range comes in sizes, and every order is click and collect. A standard PrestaShop store handles neither well.
Each block below shows the problem, the fix and why it matters for conversion. Like Northcairn, the screenshots show the same store before and after the work.
Fix 01 · Size guide
“Which size fits my dog?”
Beds come in S/M/L, collars in S–XL, feeders in three heights. Nothing on the page said which one to pick.
Problem
Products with size variants showed a row of buttons and nothing else. The beds go by the dog's weight, the Waxed Canvas Collar by neck circumference, and the Raised Oak Feeder comes in Low, Medium and Tall. To find the actual dimensions, shoppers had to dig through the description tab, and nothing told them how to measure.
Solution
A size guide on the product page, tailored to each kind of product. It has a line drawing showing what's measured, then a table with every size's range, its real dimensions and a few typical breeds. It opens from a “Find your size” button and highlights the size already selected. The Choose button on each row sets that size on the product and closes the guide. A short tip covers the in-between cases. The dimensions come from each product's own description, because a bolster bed, a cushion bed and a crate mat all differ in size. On a phone the guide opens as a bottom sheet.
Why it matters for conversion
Not knowing the size is a common reason people give up on a bed or a collar, and a wrong guess comes back as a return. With the answer next to the size buttons, shoppers can pick a size without leaving the page or guessing.
Fix 02 · Faceted filters
Filters, from nothing
The category pages had no filters at all. There was nothing set up for filters to run on.
Problem
PrestaShop's faceted search module was there, but the store had no product features and no filter template. So the category page was just a list of products. Shoppers couldn't narrow it down to their dog's size, a material or a budget.
Solution
I added a Material feature and filled in its values from each product's description. Then I set up a filter template for the catalogue categories with Size, Material and a Price slider. Filters are chips with a result count, and they use the same markup on phone and desktop. On desktop they sit in the sidebar. On mobile, a Filters button shows how many are active and opens them in a sheet with a “Show N results” button. Active filters appear above the grid as chips you can remove.
Why it matters for conversion
Someone with a 30 kg dog only wants to see what fits. Filtering down to that takes one tap, instead of opening each product to check.
Fix 03 · Click & collect
“Free shipping” that wasn't shipping
Every order is picked up in person, but the store kept promising free shipping.
Problem
The only way to get an order is click and collect, but PrestaShop called it “Shipping: Free” everywhere. That line appeared in the cart popup, the cart and checkout summaries, and the checkout step title. The order confirmation email even had a “Delivery address”. Shoppers could easily expect a courier and find out otherwise after paying.
Solution
Everywhere that said “Shipping: Free” now says “Click and collect — Free”: the cart popup, the cart and checkout summaries, and the checkout step, now called “Collection”. The order confirmation email has a Collection section saying how long the order takes to be ready. The delivery address is replaced by the collection point's address and opening hours.
Why it matters for conversion
A shopper who expects a delivery and then learns they have to pick up the order is likely to cancel, and to trust the store less. Saying it plainly at every step means only people who can collect place an order, and they know what happens next.
04 · Category & product cards
A category page in the store's own style
The listing still looked like stock PrestaShop.
Problem
The category page used the stock theme's layout: white boxes, a bold all-caps title and small centred product names. It looked nothing like the homepage and product pages.
Solution
A new layout for the category page and product cards. Headings are set in Fraunces with terracotta accents, as on the rest of the site, and product names show in full.
05 · Policy pages
Terms that describe this shop
Delivery, Legal notice, Terms and Secure payment still had PrestaShop's demo text.
Problem
The pages shoppers read before paying were PrestaShop's placeholder text. They described delivery the store doesn't offer and payment it doesn't take, and the product page promised 30-day returns that the store's return settings didn't match.
Solution
All four pages rewritten to match how the store actually works. Collection is free and takes 2–4 working days. Returns are 30 days, longer than the 14 days required by law, and the store's return settings now match. The payment page says the store takes no cards: bank transfer, cheque, or cash when you collect.
06 · Stray colours & inline styles
No more stray blue
The parent theme's blue kept showing up on buttons and links, mostly on hover or click.
Problem
The Classic parent theme's blue kept showing up across the site. You'd see it on a pressed button, a hovered link in checkout, a focused field or a product name in the cart popup. Most of these only appear on hover, focus or click, so you'd never spot them in a static screenshot. Some styling was also hard-coded in inline style attributes.
Solution
A browser script forced every hover, focus and active state on ten kinds of page and found 32 places where the blue appeared. Each was overridden with the brand colours, plus a shared focus ring, and a re-run found none. The inline styles were moved into the stylesheet.
07 · Checkout branding
A checkout that matches the store
The last step before paying looked like a different website.
Problem
Checkout had PrestaShop's green step numbers and check marks, grey radio buttons and checkboxes, and “Ecommerce software by PrestaShop™” in the footer. It was the least on-brand page in the store, right at the moment of paying.
Solution
The step indicator now uses the site's charcoal and terracotta, with a clear “Edit” link on completed steps. Radio buttons and checkboxes are terracotta, form fields share the paper background with a higher-contrast border, and the footer shows the store's own name.
Let's start
Is your store telling shoppers the truth?
The demo is live. Open a bed or a collar and try the size guide, then send me a link to your own site.