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

[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 · Accepted solution]

1. Go to 'Online Store' -> Theme -> Edit Code

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

3. Find the <a> element with id "CardLink-{{ section_id }}-{{ card_product.id }}" which is inside a <h3></h3> element

4. Below the <h3></h3> element add the code  <p class="product-my-additional-info"> {{ card_product.metafields.custom.metafield_name }} </p>

[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

[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 <a> element with id "CardLink-{{ section_id }}-{{ card_product.id }}" and you found an <a> 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.

[WalkYourStyle]

Please try again and add it at the start of the file 'base.css' line 0. And then leave it there so I can check from the inspector tool.

[FloridaGlow]

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

[WalkYourStyle]

I am glad to help!

[ManuBC]

Hi Walkyourstyle,

I have the same issue and followed your instructions, but nothing appeared.

I use a Meta field call "Livraison". Here is the code modification, and the link of my page : https://www.barreclandestine.com/collections/tous-les-produits

Do you see what's wrong ?

Many thanks for your help 🙂

[WalkYourStyle]

Did you fill in the metafields with data?

when you have this : {{ card_product.metafields.custom.Livraison }} it should be with lowercase 'L' : {{ card_product.metafields.custom.livraison }}

[ManuBC]

You are right, it worked ! I used the same case than the metafield, I didn't know it needed all lowercase 🙂

Thank you very much 🙏

[WalkYourStyle]

If you want to style it and you need help, reach out 🙂

[ManuBC]

Thanks for proposing ! I tryed the style too, but it dosen't work, I feel so dumb!

The Metafield "sous_category" appear correcly. I added this CSS to change the size, but nothing changed : 

.sous_categorie {
font-size: 8px !important;
}

By the way, is there a way to reduce the space between the lines ? 

[WalkYourStyle]

Yea add this code for the space reduction:

.product-my-additional-info {
    margin-top: 10px;
    margin-bottom: 10px;
}

What metafield are you talking about 'sous-categorie' ?

[ManuBC]

It works thank you and I understood my mistake, the correct name is ".product-my-additional-info" and not ".sous_categorie {"

Thank you so much for your time 🤗