Re: how can i display partial title in colletion

Solved

how can i display partial title in colletion

anhtaivnpro
Tourist
7 0 1

1000006778.png

1000006777.png

How can i display partial title in colletion like image 1?

Thanks

Accepted Solution (1)
PageFly-Noah
Shopify Partner
1317 233 275

This is an accepted solution.

Hi @anhtaivnpro  you can add code here:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag </head>

<style>
.card__content .card__information .card__heading .full-unstyled-link {
    white-space: nowrap !important;
    overflow: hidden !important;
    width: 200px !important;
    text-overflow: ellipsis !important;
}

</style>

Hope my solution will help you resolve the issue.

Thank you.
 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

Replies 13 (13)

PageFly-Noah
Shopify Partner
1317 233 275

This is Noah from PageFly - Shopify Page Builder App

I can help you. Please can you provide the website url. Thank you.

 

Best regards,

Noah | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

PageFly-Noah
Shopify Partner
1317 233 275

This is an accepted solution.

Hi @anhtaivnpro  you can add code here:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag </head>

<style>
.card__content .card__information .card__heading .full-unstyled-link {
    white-space: nowrap !important;
    overflow: hidden !important;
    width: 200px !important;
    text-overflow: ellipsis !important;
}

</style>

Hope my solution will help you resolve the issue.

Thank you.
 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

anhtaivnpro
Tourist
7 0 1

Thanks so much, it's worked!

Hardik29418
Shopify Partner
2913 418 1081

Hello,

Welcome to the Shopify Community.
I read your problem and it seems that I need to analyze your website to provide the solution here.
Would you please share your website URL and if your website is password protected then also provide the password.

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email

niraj_patel
Shopify Partner
2378 514 506

Hello @anhtaivnpro 
Can you share store URL?

Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
anhtaivnpro
Tourist
7 0 1

Yes, my store: http://vartdigitals.com

Asad-Mahmood
Trailblazer
175 34 41

Go to your online store -> customize -> settings -> custom css
and paste this code there

.card__heading {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
If my solution has been helpful, you can consider supporting me via Buy Me a Coffee.
Hire me: asadmahmood8470@gmail.com
WhatsApp





hamzaadeel
Shopify Partner
11 2 4

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag </head>

.card__content .card__information .card__heading .full-unstyled-link {
width:200px white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media screen and (max-width: 450px) {
.card__content .card__information .card__heading .full-unstyled-link {
width: 142px;
white-space: nowrap;
overflow: hidden;
overflow:hidden;
text-overflow: ellipsis;
}
}

tmyusuf
Tourist
15 0 1

@anhtaivnpro @ 

Log in to your Shopify admin panel
Navigate to Online Store > Themes.
Select the theme you want to modify and click Actions > Edit code.

Find the title section: H3

You can use this code 

.card__heading {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}

 

I will hope this will helpful 

Thanks
Yusuf
Zenith Clipping is a professional Background Removal Service Provider in Bangladesh. We offer different types of image editing services to our clients. Starts at 39c/image. Get a free trial today!

anhtaivnpro
Tourist
7 0 1

1000006779.png

 Thanks!!! That's great!

hamzaadeel
Shopify Partner
11 2 4

@anhtaivnpro 
Please mark my solution correct if you found it helpful.
Thanks.

anhtaivnpro
Tourist
7 0 1

I tried this method from mr  PageFly-Noah and it worked. Thanks all

hamzaadeel
Shopify Partner
11 2 4

hamzaadeel_0-1710764238421.png

You will have empty space ahead by going with that.
you should have the text as the width of image at least.