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

Store Design
1

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
productname.jpg1600×319 97.7 KB

2

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

3

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.

4

Thanks for your help.

5

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

6
  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;} 
}
7

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

8

Then you can add in any cs file you have.

9

Yes, it’s work. You are super

Many thanks.

Everything1_0-1604648548014.png
Everything1_0-1604648548014.png1250×599 56.7 KB

10

Hi Jasoliya

We are facing issue with mega menu

Sometime mega menu show like this

Everything1_0-1604906883580.png
Everything1_0-1604906883580.png1290×603 67.6 KB

and sometime show correct with space

Everything1_1-1604906909719.png
Everything1_1-1604906909719.png1314×570 64.4 KB

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

CAN YOU PLEASE HELP US TO SOLVE ISSUE?

Thank you

11

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;}
    }
12

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
Everything1_0-1604914999555.png1361×548 46.5 KB

13

Remove previous code and add this new:

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

@Jasoliya SUPERB THANKS FOR YOUR HELP

15

@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
Screenshot_20201111-190134_Chrome.jpg1080×2400 277 KB

16

I can see itts fine now.

17

@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

18

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

19

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
Everything1_0-1608297062342.png1249×628 113 KB

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

20

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.