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

[FloridaGlow]

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 editing options within the product grid. This is what it looks like:

:

[oscprofessional]

Hello @FloridaGlow

To add text in metafield

Follow the steps

1. Go to the product from admin for which you want to show text .

2. Open the product and scroll down to the metafield option and check for the metafield you created . For ex: like below

3. Add the text in the metafield and save .

4. Now check the url.

Thank you

[WalkYourStyle]

1. Go to ‘Online Store’ → Theme → Edit Code

2. In the snippets folder locate the file ‘card-product.liquid’

3. Find the element with id “CardLink-{{ section_id }}-{{ card_product.id }}” which is inside a

   element

4. Below the

   element add the code

   {{ card_product.metafields.custom.metafield_name }}

[FloridaGlow]

@WalkYourStyle I added that, but what do I do now? That metafield’s name is “Product Short Description” would that change anything? Still can’t add it to the product grid it seems

[FloridaGlow]

@oscprofessional i have the metafield made already, but how can I take that metafield, and add it within the product grid on a collection tab under the product title?

[WalkYourStyle]

so you replace it with {{ card_product.metafields.custom.product_short_description }} like shown below

[FloridaGlow]

@WalkYourStyle Unfortunately, it didn’t work

[WalkYourStyle]

Please show me an image of the code after you added the code.

[FloridaGlow]

@WalkYourStyle

And I tried “product-short-description” and “my-product-short-description” , didn’t change anything on the website preview.

[WalkYourStyle]

You have added the code in the wrong place. My instructions say to find element with id “CardLink-{{ section_id }}-{{ card_product.id }}” and you found an element with id that starts with StandardCardNoMediaLink. Be careful, because that file has repetitive code and you have to add it to the right place.

[FloridaGlow]

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

[WalkYourStyle]

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 */
}

[FloridaGlow]

Thanks! Worked perfectly!

[FloridaGlow]

@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

[WalkYourStyle]

Can you please share your store’s URL?

[FloridaGlow]

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

[WalkYourStyle]

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{
       font-size: 11px;
   }
}

[FloridaGlow]

@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.

[WalkYourStyle]

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.

[FloridaGlow]

@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.