Customize Featured Collection Section on homepage

Store Design

Topic summary

Goal: Insert an extra product detail (e.g., “12 pack”) between product name and price in the Refresh theme’s product cards, initially in the homepage Featured Collection.

Implemented solutions:

  • Sitewide or homepage-only: Add markup after the product title in card-product.liquid (after under the heading block found via “card__heading{% if card_product.featured_media or settings.card_style == ‘standard’ %} h5{% endif %}”). Use a simple text node for all pages, or wrap with {% if template == ‘index’ %} for homepage only.
  • Collection-specific: Update card-product.liquid to check card_product.collections for collection.handle == ‘bebidas’; if true, render “12 pack cans”. This targets only products in the “bebidas” collection across all product cards.
  • Styling/spacing: Add CSS in base.css targeting #additional_info to adjust margin, font size, and line height.

Follow-up and guidance:

  • Exact insertion point re-clarified: paste the conditional block immediately after the title’s closing .

Current issue (unresolved):

  • On the custom page “copy-of-sobre-matu-mate” (section “nuestras bebidas”), the font size for the added info does not apply, while it appears correctly on other pages. Preview links and screenshots were provided; cause not yet identified. Discussion remains open.
Summarized with AI on December 18. AI used: gpt-5.
8

@Vinsinfo many thanks, I was able to apply it but on this page

copy-of-sobre-matu-mate nuestras bebidas → there the font size is not adjusting, although it is again linking to the same collections

Screenshot 2024-09-24 at 9.25.13 p.m..png
Screenshot 2024-09-24 at 9.25.13 p.m..png2562×1236 401 KB

https://k5dxgyj7e7p6x5ov-61049766108.shopifypreview.com

on all other pages it has the smaller font size like this (it should be like this):

Screenshot 2024-09-24 at 9.25.55 p.m..png
Screenshot 2024-09-24 at 9.25.55 p.m..png2562×1468 493 KB