Shopify themes, liquid, logos, and UX
How to Add Ellipsis Based on Title Length:
https://sollowellness.com/collections/all-coffee
Hi @Oleh ,
Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code
Step 2: Search file theme.liquid
Step 3: Insert this code above </head> tag:
<style>
.product-card__title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
</style>
Hope this can help you,
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍
B2Bridge: All-in-one B2B wholesale solution, enabling merchants to set up a complete B2B store quickly and without coding.
With features like customizable registration forms, customer segmentation, and tailored price lists, it simplifies wholesale management.
B2Bridge also includes a dedicated Quick Order page and flexible Net Payment Terms, streamlining operations for wholesalers and enhancing the buying experience.
Hi @Oleh ,
Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code
Step 2: Search file theme.liquid
Step 3: Insert this code above </head> tag:
<style>
.product-card__title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
</style>
Hope this can help you,
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍
B2Bridge: All-in-one B2B wholesale solution, enabling merchants to set up a complete B2B store quickly and without coding.
With features like customizable registration forms, customer segmentation, and tailored price lists, it simplifies wholesale management.
B2Bridge also includes a dedicated Quick Order page and flexible Net Payment Terms, streamlining operations for wholesalers and enhancing the buying experience.
Hi @Oleh ,
Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code
Step 2: Search file theme.liquid
Step 3: Insert this code above </head> tag:
<style>
.product-card__title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
</style>
Hope this can help you,
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍
B2Bridge: All-in-one B2B wholesale solution, enabling merchants to set up a complete B2B store quickly and without coding.
With features like customizable registration forms, customer segmentation, and tailored price lists, it simplifies wholesale management.
B2Bridge also includes a dedicated Quick Order page and flexible Net Payment Terms, streamlining operations for wholesalers and enhancing the buying experience.
Hey @Oleh,
I can help with the title truncation issue in your Shopify theme. The solution involves a simple CSS tweak that adds proper ellipsis and maintains consistent card heights.
.product-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.4em; line-height: 1.2; }
Modify collection-grid.liquid or product-grid.liquid to apply the class to the title element:
<h3 class="product-title"> {{ product.title }} </h3>
If you'd like us to implement this for you, just let us know, and we’ll help set it up properly! We'll ensure it integrates smoothly with your current design.
Let me know if you have any questions!
Cheers!
Shubham | Untechnickle
Helping for free – just email me: hello@untechnickle.com
Get Revize for Free | Let your shoppers edit orders post-purchase | #1 Order Editing + Upsell App
Find Global Growth Opportunities For Your Business with Shopify AcademyLearn how to exp...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025