What's your biggest current challenge? Have your say in Community Polls along the right column.

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

Solved

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

FloridaGlow
Explorer
92 0 11

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:

:IMG_7851.jpg

 

Accepted Solution (1)

WalkYourStyle
Trailblazer
450 54 70

This is an 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>

 

View solution in original post

Replies 29 (29)

oscprofessional
Shopify Partner
16116 2410 3126

Hello @FloridaGlow 

To add text in metafield 

Follow the steps

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

oscprofessional_0-1721920856594.png


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

oscprofessional_1-1721920931123.png


3) Add the text in the metafield and save .

4) Now check the url.

Thank you

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
FloridaGlow
Explorer
92 0 11

@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
Trailblazer
450 54 70

This is an 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
Explorer
92 0 11

@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
Trailblazer
450 54 70

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

short.PNG

FloridaGlow
Explorer
92 0 11

@WalkYourStyle Unfortunately, it didn't work

WalkYourStyle
Trailblazer
450 54 70

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

FloridaGlow
Explorer
92 0 11

@WalkYourStyle IMG_7852.jpg

And I tried "product-short-description" and "my-product-short-description" , didn't change anything on the website preview.

WalkYourStyle
Trailblazer
450 54 70

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
Explorer
92 0 11

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

WalkYourStyle
Trailblazer
450 54 70

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
Explorer
92 0 11

Thanks! Worked perfectly!

FloridaGlow
Explorer
92 0 11

@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
Trailblazer
450 54 70

Can you please share your store's URL?

FloridaGlow
Explorer
92 0 11

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
Trailblazer
450 54 70

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
Explorer
92 0 11

@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
Trailblazer
450 54 70

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
Explorer
92 0 11

@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
Trailblazer
450 54 70

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
Explorer
92 0 11

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

WalkYourStyle
Trailblazer
450 54 70

I am glad to help!

ManuBC
Excursionist
35 1 7

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-produitsCapture d’écran 2024-08-29 à 23.35.25.png

Do you see what's wrong ?

Many thanks for your help 🙂

WalkYourStyle
Trailblazer
450 54 70

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
Excursionist
35 1 7

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
Trailblazer
450 54 70

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

ManuBC
Excursionist
35 1 7

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 ? 

Capture d’écran 2024-08-30 à 00.44.17.png

WalkYourStyle
Trailblazer
450 54 70

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
Excursionist
35 1 7

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 🤗