FROM CACHE - en_header

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

Solved
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)

Accepted Solutions
Jasoliya
Shopify Expert
4532 586 1144

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 to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here

View solution in original post

Replies 30 (30)
RichardNguyen
Shopify Partner
1600 250 934

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

PageFly- Advanced Shopify Page Builder - Empowering 100.000+ active merchants.


Check our Evergreen List of Best Platforms To Sell Online.


Or our new series to Build The Perfect Mobile-Friendly Store.

Jasoliya
Shopify Expert
4532 586 1144

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 to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
KKWAN
Tourist
6 0 2
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
4532 586 1144

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 to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
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
4532 586 1144

Then you can add in any cs file you have.

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
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
4532 586 1144

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 to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
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
4532 586 1144

Remove previous code and add this new:

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

 

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
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
4532 586 1144

I can see itts fine now.

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
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
4532 586 1144

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

 

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
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
4532 586 1144

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 to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here