Problem
Products come in several materials and colours, and buyers need to see what they pick. The default gallery and variant picker did not show the selection clearly, and product data such as ratings and materials had nowhere to live.
Solution
I rebuilt the product page section and picker. The picker shows the chosen value next to each option and uses variant images as swatches. I wrote a new gallery with a main slider and thumbnails, set up metafields for ratings and product attributes, and fixed how the rating shows on cards and product pages.
Key decisions
Chose a new gallery over restyling the default
Why A main slider with thumbnails suits product photos better than the default layout.
Chose metafields for rating and attributes
Why The values are editable in the admin and render in the theme without an app.
Chose variant images as swatches
Why Buyers see the real finish.
Results
- A reworked product page with a variant picker that shows the selected value.
- A new gallery with a thumbnail strip and navigation.
- Metafield definitions for product rating, rating count and attributes such as material.
- A fix for product ratings on cards and product pages.