I found the problem. What you have to do is to add this code
@media screen and (max-width: 989px){
.product-short-description{
font-size: 11px;
}
}
at the start of the base.css or before it get’s overridden by other css.
Topic summary
Goal: Show a short text (metafield) under each product title in the Dawn 14.0.0 collection grid after moving the price to the quick add button.
Implementation:
- Edit Online Store → Themes → Edit code → snippets/card-product.liquid.
- Locate the with id “CardLink-{{ section_id }}-{{ card_product.id }}” inside the
title block (be careful: file has repeated patterns).
- Immediately below the title, output the metafield, e.g.,
{{ card_product.metafields.custom.product_short_description }}
(replace with your actual metafield key).
Common pitfalls and fixes:
- Placing code in the wrong block (e.g., near StandardCardNoMediaLink) prevents output.
- Metafield keys must be lowercase and match namespace/key (e.g., custom.livraison, not custom.Livraison).
- Using an incorrect CSS selector (must match the class you added).
Styling (base.css):
- Desktop: define font-size on the added class.
- Mobile: add a media query [email removed] (max-width: 989px) to set a smaller font; position the rule at the top of base.css or before overriding rules; use !important if needed.
- Spacing: adjust margin-top/margin-bottom on the class.
Outcome: Both users successfully displayed and styled the metafield; desktop/mobile font sizes and spacing resolved. Discussion concluded with solutions working.