Vandalshop: mobile, before / after

Three changes that need no new code: CSS on the existing theme. Screenshots from a phone view (375 px), 15.10.2026. The "after" images are a test in our own browser; nothing has been changed on the site.

1. Product gallery: tap the photo → large view with zoom

Today tapping the photo does nothing, and the magnifier button sits off-screen, so nobody can enlarge a photo. After the fix, a tap opens the full gallery with pinch-zoom, swipe and fullscreen. The site already has the lightbox; it just was not reachable.

BEFOREProduct page on a phone, nothing happens after a tap
Tap = nothing. No zoom, no gallery.
AFTERLightbox gallery open on a phone
Tap = gallery with zoom, swipe, fullscreen. (Screenshot taken before the duplicate fix, which changes the counter from 2/19 to 1/9.)

2. Product page: a calmer photo, product sooner

Fewer labels on the photo (only −10% and the ribbon stay), a fixed photo frame with no empty band, smaller thumbnails. Name and price move up the screen.

BEFOREProduct page before
−10%, WEBSHOP CIJENA, Top Seller! over the photo; large arrows.
AFTERProduct page after
Clean photo, magnifier bottom right, compact thumbnails.

3. Product cards: price under the photo, not on it

On every card the price, the discount and "WEBSHOP CIJENA" cover about a fifth of the photo. After the fix the photo is whole (not cropped), the labels are small, and the price sits under the photo. The legally required prices (30-day lowest, anchor price) stay.

BEFORECategory before
Text blocks over the photo, cropped product.
AFTERCategory after
Whole photo, price under it, less clutter.

Also in the plan (UX-AUDIT.md): remove the expired Back-to-School banner from the home page, add SALE to the menu, turn on "Notify me when back in stock" on sold-out items, and lazy-load images (the home page currently loads ~12 MB of images on a phone). Before shipping we need to check whether the "WEBSHOP CIJENA" label must stay on the photo.