Solved

Show full title when on a collections page

JBT2
Shopify Partner
1 0 0

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

Accepted Solution (1)

ThePrimeWeb
Shopify Partner
2114 605 470

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.

ThePrimeWeb_0-1708543211118.jpeg

 

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

Replies 2 (2)

ThePrimeWeb
Shopify Partner
2114 605 470

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.

ThePrimeWeb_0-1708543211118.jpeg

 

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
Shopify Partner
494 50 89

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:

biznazz101_0-1708546823581.png

 

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