Hi, within my collection product grids, I moved the price to my quick add add to cart button, but I was wondering if there was a way I can add a few words where the price used to be (under product title). I made a metafield for it if it helps but I don’t know how to incorporate since there is no edi…

Go to ‘Online Store’ → Theme → Edit Code In the snippets folder locate the file ‘card-product.liquid’ Find the element with id “CardLink-{{ section_id }}-{{ card_product.id }}” which is inside a element Below the element add the code {{ card_product.metafields.custom.metafield_name …

@WalkYourStyle oh yes, my bad, it worked! How can I make the font smaller though?

In the assets folder of your theme’s code find the ‘base.css’ and at the bottom of the file add this code: .my-product-short-description{ font-size: 12px; /* Change the number according to your preference */ }

@WalkYourStyle one more thing, how can I change this metafield’s font size for mobile? That code works for laptop viewing but doesn’t seem to change on mobile

Can you please share your store’s URL?

https://vwchrksunqiritr3-57075630262.shopifypreview.com @WalkYourStyle It looks great on laptop, but is too big on mobile as it extends to that second line Note: Only the single SPF 50 Spray Sunscreen under “Suncare” has the metafield attached

From the inspector tool it looks like the font size applies to screens with minimum width of 990px. Try adding this code .product-short-description { font-size: 11px !important; } And if it still doesn’t work add this one @media screen and (max-width: 989px){ .product-short-description{ …

@WalkYourStyle Unfortunately, both didn’t work, I added them to base.css. I want it to be 11 px on laptop which is great, but on mobile to be 8 or 9.

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.

@WalkYourStyle this didn’t change anything either, I added to the base.css file before my edits started, I added it at the end of the default base.css but it is still the same.

Adding few word description to products in the product grid - Dawn 14.0.0

Technical Q&A

FloridaGlow July 26, 2024, 3:44pm 22

It worked! Thanks so much for all of your help!

Topic		Replies	Views
Make changes to font size, metafields and alignment of product card text Store Design design	2	44	November 19, 2024
Adding product metafield to product grid below each product - Dawn Theme Store Design collection-page , css , metafields , product-page	8	175	July 19, 2024
Reducing space between lines of text in a metafield Shopify Discussion troubleshooting	9	140	March 17, 2025
How to change metafield subtitles on product page grid Store Design product-page	4	58	June 17, 2025
Add text within the Product Grid section - Dawn Theme Store Design design , customizations , collection-page	6	132	February 9, 2023

Adding few word description to products in the product grid - Dawn 14.0.0

Related topics