Shopify themes, liquid, logos, and UX
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?
yes, please this code your product cart, product item card item any file
<div class="product-description-short">
{{ product.description | truncate: 50, ". . . " }}
</div>
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?
if possible to give me theme zip code so i will update or give me theme access
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?
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>
I sent you a DM with my store URL
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
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?
There is a collection main.liquid? or shall I give you access? you might be able to fix the font too!
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
Hi @GemMuir,
Please go to product-thumbnail__product-info.liquid file and add code here:
Hope it helps!
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.
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?
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.
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)
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 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 }}
@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 }}
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>
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 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
My stickers are not showing now either?
can you please send your code
Does anyone know if there's a theme that lets you do this without adding custom code?
Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024