Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
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:
:
Solved! Go to the solution
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>
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
@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?
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>
@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
so you replace it with {{ card_product.metafields.custom.product_short_description }} like shown below
Please show me an image of the code after you added the code.
And I tried "product-short-description" and "my-product-short-description" , didn't change anything on the website preview.
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.
@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 */
}
Thanks! Worked perfectly!
@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
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{
font-size: 11px;
}
}
@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.
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.
It worked! Thanks so much for all of your help!
I am glad to help!
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 🙂
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 }}
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 🙏
If you want to style it and you need help, reach out 🙂
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 ?
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' ?
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 🤗
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024