Adding a short description for each product on collections page FLEX theme

[GemMuir]

I want to add a short description for each product so you can see what each coffee tastes like before clicking through to product page. How can I do this using FLEX theme? (I want  I also want to make the names of the coffee bigger but they don't seem to change - where can I edit these?example of collection page

[KetanKumar]

@GemMuir 

yes, please this code your product cart, product item card item any file 

<div class="product-description-short">
  {{ product.description | truncate: 50, ". . . " }}
  </div>

[GemMuir]

Hi, thank you - where exactly do I add this code? is it in the theme.liquid somewhere or the style.css? if I truncate the description will it be able to show an image too in the description? I want it to display the roast level?

[KetanKumar]

@GemMuir 

if possible to give me theme zip code so i will update or give me theme access 

[Joshua_B]

Hello, I also want to add mini descriptions to my products on the collection page and front page, can I get help with where the code goes?

[KetanKumar]

@Joshua_B 

yes, please share store url or used this code if are you have able to code

<div class="product-description-short">
  {{ product.description | truncate: 50, ". . . " }}
  </div>

[Joshua_B]

I sent you a DM with my store URL

[Joshua_B]

@KetanKumar 

Did you get my message?

[LitCommerce]

Hi @GemMuir,

Please send me the code of featured-collection.liquid file, I will guide you to find the correct file and add the code

[GemMuir]

I can't see a file for this anywhere do you know where it will be? It doesn't come up if I search this either?

[GemMuir]

There is a collection main.liquid? or shall I give you access? you might be able to fix the font too!

[KetanKumar]

@GemMuir 

yes, please 

It can be done by doing some code customization. please send me a personal message and we can discuss what you'd like

[LitExtension]

Hi @GemMuir,

Please go to product-thumbnail__product-info.liquid file and add code here:

Hope it helps!

[LitExtension]

Hi @GemMuir,

Please change code:

{{ product.description | strip_html | truncate: 100 }}

=>

{{ product.metafields.custom.tastes_like_description }}

Then you just go to each product and add data for 'tastes_like_description' metafields, it will display fine.

[GemMuir]

I have added the code for the other 2 metafields that need to be displayed but the image doesn't show (just as a link) and I don't know how to style it!  Also want to make the product title much bigger but don't know where I can do this in the theme?

 

[GemMuir]

@LitExtension 

[LitExtension]

Hi @GemMuir,

With image metafield, you need to change the code like following:

<img src="{{ product.metafields.custom.tastes_like_description | img_url: 'master' }}"alt="{{ product.metafields.custom.tastes_like_description.alt | escape }}">

The previous code only supports displaying text.

Hope it is clear to you.

[GemMuir]

 Hi, it is nearly there! just shows very squashed together.

1. How can I add space (padding) between the different metafields?

2. How can I change the size of the title font?

3. How can I change the font for the bottom meta field (tastes like)

@LitExtension 

 

[LitExtension]

Hi @GemMuir,

Go to Assets > styles.css and paste this at the bottom of the file:

/* #1 */
.product-thumbnail__description img {
	padding: 5px 0;
}
/* #2 */
.product-thumbnail__title {
	font-size: 20px !important;
}

#3: Please send me the code you added for metafield, I will guide it for you.

[GemMuir]

@LitExtension  here is the code for metafields:

<div class="product-thumbnail__description">
{{ product.metafields.descriptors.subtitle }} <br>
<img src="{{ product.metafields.custom.roast_level_info | img_url: 'master' }}"alt="{{ product.metafields.custom.roast_level_info.alt | escape }}">
{{ product.metafields.custom.tastes_like_description }}

[GemMuir]

@LitExtension  and how is the code to add padding to the other 2 metafields:

{{ product.metafields.descriptors.subtitle }} <br>

and
{{ product.metafields.custom.tastes_like_description }}

[LitExtension]

Hi @GemMuir,

#3: Please change code:

<div class="product-thumbnail__description">
{{ product.metafields.descriptors.subtitle }} <br>
<img src="{{ product.metafields.custom.roast_level_info | img_url: 'master' }}"alt="{{ product.metafields.custom.roast_level_info.alt | escape }}">
<p style="font-size: 12px;">{{ product.metafields.custom.tastes_like_description }}</p>
</div>

[GemMuir]

What is this the answer to? I need to do the following:

1. Change the font for last metafield

2. Add padding to the other 2 metafields

3. Display my stickers (they are no longer showing since adding this code)

The code above just looks like it's to change the font size?

Thanks

@LitExtension 

[GemMuir]

@LitExtension my stickers (new / coming soon etc) are not showing since we added in the code for the custom description! How can I get them to display? They are enabled in my theme? Thanks

[GemMuir]

My stickers are not showing now either?

[KetanKumar]

@LitExtension 

can you please send your code

[RoofBunk]

Does anyone know if there's a theme that lets you do this without adding custom code?