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

Store Design
1

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
example of collection page1281×788 181 KB

1 Like
2

@GemMuir

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


  {{ product.description | truncate: 50, ". . . " }}
3

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?

4

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

1 Like
5

@GemMuir

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

6

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?

7

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

1 Like
8

@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

9

Hi @GemMuir ,

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

Screenshot.png
Screenshot.png1176×429 36.2 KB

Hope it helps!

10

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.

1 Like
11

Screenshot 2022-07-06 at 15.51.41.png
Screenshot 2022-07-06 at 15.51.41.png373×549 147 KB

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?

12

@LitExtension

13

My stickers are not showing now either?

1 Like
14

@LitExtension

can you please send your code

15

Hi @GemMuir ,

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

The previous code only supports displaying text.

Hope it is clear to you.

1 Like
16

Screenshot 2022-07-07 at 15.11.32.png
Screenshot 2022-07-07 at 15.11.32.png424×526 168 KB

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

17

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.

1 Like
18

@LitExtension here is the code for metafields:

{{ product.metafields.descriptors.subtitle }}
{{ product.metafields.custom.roast_level_info.alt | escape }} {{ product.metafields.custom.tastes_like_description }}
19

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

{{ product.metafields.descriptors.subtitle }}

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

20

@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