Solved

Adding Descriptions In Product Grid In Modular

charlie4453
New Member
8 0 0

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.

Screenshot 2021-09-15 124856.jpg

 

What I'm going for is how we had it on the old Wix site (see example below)

Screenshot 2021-09-15 124947.jpg

I'm fairly familiar with Shopify coding, but have been having some trouble with this one. Any help would be greatly appreciated!

Accepted Solution (1)

Ninthony
Shopify Partner
2329 350 1023

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"

 

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄

View solution in original post

Replies 14 (14)

Ninthony
Shopify Partner
2329 350 1023

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"

 

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
charlie4453
New Member
8 0 0

Thank you very much!

Ninthony
Shopify Partner
2329 350 1023

No problem, glad it helped. Thanks for accepting it as a solution. Feel free to reach out if you have any other questions.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
charlie4453
New Member
8 0 0

I do have one more question, if I wanted to make it bold text, how would I go about doing that?

Ninthony
Shopify Partner
2329 350 1023

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 %}

 

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
charlie4453
New Member
8 0 0

Great, thanks again for all your help!

charlie4453
New Member
8 0 0

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.

Ninthony
Shopify Partner
2329 350 1023

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;
}

 

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
charlie4453
New Member
8 0 0

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;
}
Naomiford
Tourist
3 0 0

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?

Naomiford
Tourist
3 0 0

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?

Marieke_NL
New Member
4 0 0

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?

Marieke_NL_0-1702632401875.png

 

Ninthony
Shopify Partner
2329 350 1023

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

Ninthony_1-1704475656234.png

 

 

So it would look like this, depending on your namespace:

{{ product.metafields.custom.product_subtitle }}

 

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
Marieke_NL
New Member
4 0 0

Yes, that did the trick! Had been wrestling with that for a while now. Thanks so much @Ninthony !