Solved

How can I limit the length of the product name on the collection page?

KKWAN
Tourist
6 0 2

Hi,

I am using Supply theme. Can anyone advise how I can limit the length of the product name so that the 'Add to cart' button can be align on the same level? 

Please help.

KK

 

 

 

productname.jpg

Accepted Solution (1)

Jasoliya
Shopify Expert
4808 621 1217

This is an accepted solution.

Hi @KKWAN 

Open snippet->product-grid-item.liquid and fine {{ product.title }}

now change this code with below:

{{ product.title  | truncate: 30}}

Note: you can change 30 with any number that mean they show 30 character of title.

 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here

View solution in original post

Replies 30 (30)

PageFly-Richard
Shopify Partner
4164 935 1586

Give me your page URL, so I can give you a custom code to fix.

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.

GTBond
Explorer
59 2 27

Hey Richard, can you please help me. I'd like to limit the product titles to 2 lines for uniformity. Like if the title would take up more than 2 lines, it just shows ellipses at the end of the second line.

My site url is https://gadzone.co

Jasoliya
Shopify Expert
4808 621 1217

This is an accepted solution.

Hi @KKWAN 

Open snippet->product-grid-item.liquid and fine {{ product.title }}

now change this code with below:

{{ product.title  | truncate: 30}}

Note: you can change 30 with any number that mean they show 30 character of title.

 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
KKWAN
Tourist
6 0 2

Thanks for your help.

Everything1
Tourist
15 0 0

Hi Jasoliya

Please help us to solve the product title issue on the collection page here is a screenshot https://www.screencast.com/t/TfybUg5C82G

here is the website collection page https://ihighlands.myshopify.com/collections/african-blackwood-bagpipes

Jasoliya
Shopify Expert
4808 621 1217

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file

@media only screen and (min-width: 767px) {
   .product-grid .product .name{    max-width: 265px;} 
}
@media only screen and (max-width: 767px) {
   .product-grid .product .name{    max-width: 165px;} 
}
Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Everything1
Tourist
15 0 0

Thank you so much for your quick reply. But there is no theme.scss file under ASSETS

Jasoliya
Shopify Expert
4808 621 1217

Then you can add in any cs file you have.

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Everything1
Tourist
15 0 0

Yes, it's work. You are super

 

Many thanks.

 

Everything1_0-1604648548014.png

 

Everything1
Tourist
15 0 0

Hi Jasoliya

We are facing issue with mega menu

Sometime mega menu show like this 

Everything1_0-1604906883580.png

 

and sometime show correct with space

 

Everything1_1-1604906909719.png

 

here is url https://ihighlands.myshopify.com/

CAN YOU PLEASE HELP US TO SOLVE ISSUE?

Thank you

Jasoliya
Shopify Expert
4808 621 1217

Try to add this css:

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file

 @media only screen and (min-width: 767px) {
        #megamenu-main-menu .col-sm-2.static-menu{    padding-right: 20px;}
    }

 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Everything1
Tourist
15 0 0

Hi Jasoliya,

Thanks for your reply. Yes, problem solved but the other menu problem does not solve here is the screenshot. Highly appriciate if you send another codes which solve whole mega menu

Thanks again

Everything1_0-1604914999555.png

 

Jasoliya
Shopify Expert
4808 621 1217

Remove previous code and add this new:

 @media only screen and (min-width: 767px) {
        #megamenu-main-menu .static-menu{padding-right: 20px;}
    }

 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Everything1
Tourist
15 0 0

@Jasoliya SUPERB THANKS FOR YOUR HELP

Everything1
Tourist
15 0 0

@Jasoliya Hope you are fine and in good health. below you can check the image view on mobile you can see the product title on the collection page

can you please help me to solve the issue?

thank you

Screenshot_20201111-190134_Chrome.jpg

Jasoliya
Shopify Expert
4808 621 1217

I can see itts fine now.

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Everything1
Tourist
15 0 0

@Jasoliya 

Hello

We have a store https://ihighlands.myshopify.com/ we want to replace add to the cart button text to VIEW text button when customer click on VIEW page should be redirected to a product page

like this example https://themes.shopify.com/themes/venture/styles/outdoors/preview here is more clear example https://www.screencast.com/t/vPUipiC1wip

Jasoliya
Shopify Expert
4808 621 1217

As i can see you have paid theme so must need custom code for that.

 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Everything1
Tourist
15 0 0

Hello @Jasoliya 

Hope you are fine and good health. I am facing issue with vertical menu width here is screenshot https://www.screencast.com/t/fLpvMQU0ygl

Everything1_0-1608297062342.png

 

backend width is 100% but its not show 100% can you please help me with code please here is link https://biznimart.myshopify.com/

Thanks always your great support and help

Jasoliya
Shopify Expert
4808 621 1217

Add this css in assets/bootstrap-purged.css

ul.megamenu li .sub-menu .content { width: 800px; }
ul.megamenu li .sub-menu .content .col-sm-2.static-menu { width: 20%; padding: 0 10px 0 0; }

 It will help bit.

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Everything1
Tourist
15 0 0

@Jasoliya thanks for your quick reply. I paste the code but problem not solve

Everything1_0-1608308820925.png

 

Everything1
Tourist
15 0 0

Hi @Jasoliya 

I paste code custom_code.scss now low better it is possible more width and rest collection show right like below screenshot

with text space

Everything1_0-1608315233842.png

 

 

Jasoliya
Shopify Expert
4808 621 1217

Hi

As this is paid theme there are many possibility to manage code, so we cant manage it easily if you want to do we have to change code structure for that and for that you have to hire someone. 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
korabic
Visitor
1 0 0

hi @Jasoliya 
I want Shorten TITLES automatically to 130 character count because when import product from suplier .they have more than 130 characters .i want product title will not exceed the 130 chracterr every time when i import new products .
please ,  it's possible ?
thank you 

Jasoliya
Shopify Expert
4808 621 1217

Hi @korabic 

You can use this code to truncate collection title till 130

{{ product.title | truncate: 130 }}

 You have to find "product.title" in section->product-template file and replace with my given code 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
GouravKumar
Shopify Partner
31 1 11

Many Thanks & You are Awesome

landonasbury
Visitor
1 0 0

How can I do this on mobile only?

Jasoliya
Shopify Expert
4808 621 1217

if you want only for mobile than you have to hide show title for desktop and mobile by code and then for mobile only try my above code, 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Samil
Visitor
1 0 0

Hi Jasoliya.

How Can I Limit The Length Of The Product Name with Studio theme.

I can find snippet->product-grid-item.liquid and fine {{ product.title }}

sixsunss
Visitor
3 0 0

Hi! Can I also edit anything here to make the title left aligned?

Thank you!