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

GemMuir
Excursionist
46 0 4

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 pageexample of collection page

Replies 26 (26)

KetanKumar
Shopify Partner
36855 3637 11978

@GemMuir 

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

 

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

 

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
GemMuir
Excursionist
46 0 4

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
Shopify Partner
36855 3637 11978

@GemMuir 

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Joshua_B
Tourist
4 0 1

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
Shopify Partner
36855 3637 11978

@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>
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Joshua_B
Tourist
4 0 1

I sent you a DM with my store URL

Joshua_B
Tourist
4 0 1

@KetanKumar 

Did you get my message?

LitCommerce
Astronaut
2860 684 741

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

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
GemMuir
Excursionist
46 0 4

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
Excursionist
46 0 4

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

KetanKumar
Shopify Partner
36855 3637 11978

@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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
LitExtension
Shopify Partner
4860 1002 1141

Hi @GemMuir,

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

Screenshot.png

Hope it helps!

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
LitExtension
Shopify Partner
4860 1002 1141

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.

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
GemMuir
Excursionist
46 0 4

Screenshot 2022-07-06 at 15.51.41.png

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
Excursionist
46 0 4
LitExtension
Shopify Partner
4860 1002 1141

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.

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
GemMuir
Excursionist
46 0 4

Screenshot 2022-07-07 at 15.11.32.png

 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
Shopify Partner
4860 1002 1141

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.

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
GemMuir
Excursionist
46 0 4

@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
Excursionist
46 0 4

@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
Shopify Partner
4860 1002 1141

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>
LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
GemMuir
Excursionist
46 0 4

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
Excursionist
46 0 4

@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
Excursionist
46 0 4

My stickers are not showing now either?

KetanKumar
Shopify Partner
36855 3637 11978

@LitExtension 

can you please send your code

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

RoofBunk
Tourist
5 0 3

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