How to design a collection product page for a wine store?

Store Design
, , ,

Topic summary

Goal: implement a Shopify collection (product listing) page for a wine store to match a provided Figma design.

Key requested changes:

  • Add four button tabs at the top, each preceded by a star icon.
  • Tweak/refine the filter sidebar layout and behavior.
  • Show a distinct color state for checkboxes when checked.
  • Add a price range bar/slider.

Assets and context:

  • Figma mockup and screenshots are central to understanding the target layout (images attached).
  • A development store URL and password were provided for review and implementation.

Ask:

  • Seeking guidance and implementation advice to achieve pixel parity with the Figma design using HTML/CSS (and likely minor JavaScript for the price slider and tab interactions).

Response so far:

  • One participant offered to handle the work and requested a direct message.

Status:

  • No technical solution or step-by-step guidance shared yet; discussion remains open with actionable needs clearly listed but unresolved.
Summarized with AI on January 9. AI used: gpt-5.
1

Hey everyone!
We are currently working on the project to build a wine store. We are at a design step for a collection page, we got a figma design for the that collection page like this (see the first photo) and we would like to design our actual page to be the same with that design. Currenly our page need more edit (see the second photo on the right side for our current page status)

NickyTran_3-1704175286967.png
NickyTran_3-1704175286967.png823×804 84.5 KB

NickyTran_4-1704175588095.png
NickyTran_4-1704175588095.png1897×881 379 KB

  • need to add the 4 .button tabs at first
  • need to tweak filter sidebar
  • need to add colour to checkbox when checked
  • need star icon before each tab
  • need to add price range bar

Anyone have experience in design please show me the way to achieve this.

Thanks very much

Our development store: https://kilikanoon.myshopify.com/collections/all pw: tranjames.

2

Hello! How are you guys doing?

I can help you with this project, this is my specialty. Message me and I can go ahead and help you with this.