How can I adjust the product card layout using CSS or Liquid in my online store?

Store Design
, , , ,

Topic summary

A store owner using Shopify’s Local theme wants to redesign their product cards to match the layout from coop.se/handla.

Desired changes include:

  • Adjusting the position and size of the price and title
  • Relocating the quick buy button
  • Adding a metafield to display product weight/volume information

Key question: Whether these modifications can be achieved using CSS alone, or if editing the Liquid template files is necessary.

The user has provided comparison screenshots showing their current product card layout versus the target design they want to replicate. The discussion remains open with no responses yet addressing the technical approach needed.

Summarized with AI on November 24. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I’m using the Local template for my store, and I’m not satisfied with the layout of my product cards (picture one) and would like to change the layout similar to the product cards on this site www.coop.se/handla (picture 2). I’m primarily interested in adjusting the location/size of the price, title, quick buy button and also add a metafield for weight/volume to match the product card layout on the website above.

My question is whether this be accomplished using only css or do I have to edit the liquid file also?

Best regards!

My store: https://gryningens.myshopify.com/

Screenshot 2022-12-02 at 02.06.14.png
Screenshot 2022-12-02 at 02.06.14.png914×732 122 KB

Screenshot 2022-12-02 at 02.06.20.png
Screenshot 2022-12-02 at 02.06.20.png1078×806 151 KB