Shopify themes, liquid, logos, and UX
Hi everyone,
I'm trying to add short descriptions under my product grids in the Modular theme. Currently, it's just showing the Title & Price.
What I'm going for is how we had it on the old Wix site (see example below)
I'm fairly familiar with Shopify coding, but have been having some trouble with this one. Any help would be greatly appreciated!
Solved! Go to the solution
This is an accepted solution.
Add it as a product metafield. Add the Metafields Guru app to your shopify store, then go into the product and click on More Actions > Metafields Guru. Then you can create a metafield for that product. Metafields have a name, key, and value relationship. Make the namespace something easy like "product_info" and the key "short_description" Then enter whatever you would want to appear for that product into the value field. Then in your collection-template.liquid you would just find your product title and output the metafield underneath it:
<div class="product-title">
{{ product.title }}
</div>
{% if product.metafields.product_info.short_description %}
<div class="product-short-description">
{{ product.metafields.product_info.short_description }}
</div>
{% endif %}
Oh also this is kind of new but there's now a type next to the metafield. I would set it to "Single Line Text"
This is an accepted solution.
Add it as a product metafield. Add the Metafields Guru app to your shopify store, then go into the product and click on More Actions > Metafields Guru. Then you can create a metafield for that product. Metafields have a name, key, and value relationship. Make the namespace something easy like "product_info" and the key "short_description" Then enter whatever you would want to appear for that product into the value field. Then in your collection-template.liquid you would just find your product title and output the metafield underneath it:
<div class="product-title">
{{ product.title }}
</div>
{% if product.metafields.product_info.short_description %}
<div class="product-short-description">
{{ product.metafields.product_info.short_description }}
</div>
{% endif %}
Oh also this is kind of new but there's now a type next to the metafield. I would set it to "Single Line Text"
Thank you very much!
No problem, glad it helped. Thanks for accepting it as a solution. Feel free to reach out if you have any other questions.
I do have one more question, if I wanted to make it bold text, how would I go about doing that?
You can do that with simple html, just wrap <b> tags around your metafield:
<div class="product-title">
{{ product.title }}
</div>
{% if product.metafields.product_info.short_description %}
<div class="product-short-description">
<b>{{ product.metafields.product_info.short_description }}</b>
</div>
{% endif %}
Great, thanks again for all your help!
Another question on this site. I'm trying to add the cursor hover animation that can be seen on the Collection List Mosaic section to apply to the slideshow section. I've been playing with it for a bit but have had no luck.
You'll need to get the class name for that section. Let's just say it was "mosaic-gallery", you would apply the hover effect like this:
.mosaic-gallery:hover {
cursor: pointer;
}
Hmm, what if I were wanting to add a parallax effect to the slideshow section? I've tried a couple different things, but have had no luck. Here's what I put before:
.slideshow{
background-repeat: no-repeat;
background-position-x: center;
background-position-y: center;
background-size: cover;
background-attachment: fixed;
display: block;
}
hi - I have added the Metafields Guru app and have followed the steps but there isnt a 'collection-template.liquid' when editing the theme code?
hi - in the Automation theme there is the category 'collection-template.liquid' but i dont know how to find the product title in order to insert the code?
Hi Ninthony, I have been looking for a solution for this for some time, so thank you. I have used your code with metafield name "product_subtitle" and it seems to create a subtitle/short description in the product grid, but instead of displaying the metafield text, I see: {} (curly brackets) for all products. What am I doing wrong?
Hey @Marieke_NL -- so it looks like you're not referencing the namespace of your metafield. product_subtitle is the key you are trying to access but you have to tell it which metafield you're trying to access, typically it defaults to "custom". You can find it in the definitions
So it would look like this, depending on your namespace:
{{ product.metafields.custom.product_subtitle }}
Yes, that did the trick! Had been wrestling with that for a while now. Thanks so much @Ninthony !
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024