IMPORTANT PLS: Help needed with formatting of product card

Store Design
, , , , ,

Topic summary

Formatting of product cards in the featured collection needs adjustments (Shopify store, Judge.me reviews added). Requested changes: 1) enlarge and bold product title, 2) reduce price font size to fit one line, 3) increase spacing between price and Add to Cart.

Proposed fix: add custom CSS in theme.liquid (Online Store → Theme → Edit code) before , targeting mobile screens (max-width: 767px) and a specific featured collection slider ID.

CSS effects:

  • Product title: font-size 14px, font-weight 900 (bold).
  • Button spacing: margin-top 20px for the quick-add button.
  • Price on sale: set to inline-flex, with flex-direction and wrap unset (adjusts layout, not font size).

Notes:

  • Code targets a specific section ID; may not apply broadly across the site.
  • The price font-size request is not directly addressed; layout is changed instead.
  • Images included show the product card and where to place CSS in theme.liquid.

Outcome/Status: One solution provided; no confirmation of resolution yet. Discussion remains open.

Summarized with AI on December 23. AI used: gpt-5.
2

Hello @RaghavGoel1

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

@media screen and (max-width: 767px) { ul#Slider-template--15885066174541__featured_collection_YKLPGH .full-unstyled-link { font-size: 14px !important; font-weight: 900; } ul#Slider-template--15885066174541__featured_collection_YKLPGH .quick-add__submit.button.button--full-width{ margin-top: 20px !important; } ul#Slider-template--15885066174541__featured_collection_YKLPGH .price--on-sale .price__sale { display: inline-flex !important; flex-direction: unset !important; flex-wrap: unset !important; } }

niraj_patel_0-1722687978499.png
niraj_patel_0-1722687978499.png200×298 21.9 KB

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.