Adding short descriptions to product cards in the Modular (Shopify) theme. Solution: create a product metafield (e.g., namespace “product_info”, key “short_description”) using Metafields Guru, set type to Single Line Text, then render it beneath the product title in the collection template with a conditional check. Code snippets were provided.
Styling: make the short description bold by wrapping the metafield output in HTML bold tags.
UI effects: to add a hover cursor effect similar to Collection List Mosaic, target the section’s class (e.g., “.mosaic-gallery:hover { cursor: pointer; }”). A parallax effect for the slideshow was attempted via CSS (background-attachment: fixed, etc.), but no working solution was confirmed.
Theme variations: one user could not locate “collection-template.liquid” in their theme (Automation); guidance on where to insert the code for that theme remains unresolved.
Troubleshooting: if the output shows {} instead of text, specify the metafield namespace when rendering (commonly “custom”), e.g., {{ product.metafields.custom.product_subtitle }}. This fixed the issue for a user.
Status: Short description via metafields is solved; hover cursor guidance provided; parallax and template-file location questions remain open.
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!
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:
{{ product.title }}
{% if product.metafields.product_info.short_description %}
{{ product.metafields.product_info.short_description }}
{% 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 tags around your metafield:
{{ product.title }}
{% if product.metafields.product_info.short_description %}
**{{ product.metafields.product_info.short_description }}**
{% 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 !