Show full title when on a collections page

JBT2 · ‎02-21-2024

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

ThePrimeWeb · ‎02-21-2024

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.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

ThePrimeWeb · ‎02-21-2024

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.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

biznazz101 · ‎02-21-2024

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

Don't hesitate to reach out for more help with your store.
SEE OUR TASK STORE or check us out via our profile! FREE STORE AUDIT

Show full title when on a collections page