Adding Descriptions In Product Grid In Modular

Solved
charlie4453
New Member
7 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!

0 Likes
Ninthony
Shopify Partner
2240 337 895

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 :D
0 Likes
charlie4453
New Member
7 0 0

Thank you very much!

0 Likes
Ninthony
Shopify Partner
2240 337 895

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 :D
0 Likes
charlie4453
New Member
7 0 0

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

0 Likes
Ninthony
Shopify Partner
2240 337 895

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 :D
0 Likes
charlie4453
New Member
7 0 0

Great, thanks again for all your help!

0 Likes
charlie4453
New Member
7 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.

0 Likes
Ninthony
Shopify Partner
2240 337 895

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 :D
0 Likes
charlie4453
New Member
7 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;
}
0 Likes