Shopify themes, liquid, logos, and UX
When in the grid view of a collection, the title is cut off after the first line of text. I want the title to wrap so the complete title is visible.
You can see what I mean at this URL (the first and second items): https://store.demmelearning.com/collections/all-aim-for-addition-and-subtraction-products
I'm using the Porto theme
Solved! Go to the solution
This is an accepted solution.
Hey @JBT2,
Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.
<style>
.products .product-col h3 {
overflow: auto !important;
white-space: normal !important;
text-overflow: initial !important;
}
</style>
Screenshot is for reference only, the correct code to paste is the one shown above.
This is an accepted solution.
Hey @JBT2,
Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.
<style>
.products .product-col h3 {
overflow: auto !important;
white-space: normal !important;
text-overflow: initial !important;
}
</style>
Screenshot is for reference only, the correct code to paste is the one shown above.
You can try adding this to your base.css file:
.products .product-col h3 {
letter-spacing: -.01em;
white-space: normal;
overflow: hidden;
text-overflow: ellipsis;
}
Result:
Hope that works for you!
@biznazz101
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025