Limit Product Title Length in Featured Section (Dawn)

Solved

Limit Product Title Length in Featured Section (Dawn)

manbru
Pathfinder
129 0 30

Hey,

 

On my product page i have the featured product section but the product title in it makes the product cards look really bad. So what i want is that if the product is longer than two lines it stops and there are just three dots. 

 

my store: https://r1vex.myshopify.com/products/emil-randig-strandstol-taupe 

 

Right now:

Skärmavbild 2024-07-24 kl. 13.54.26.png

 

How i want the product title on featured products to look like:

Skärmavbild 2024-07-24 kl. 14.04.40.png

Accepted Solution (1)

dws_pvt_ltd
Shopify Partner
368 69 87

This is an accepted solution.

Hello @manbru, Please change your CSS in base.css file of the .full-unstyled-link class. 

Please follow these steps to add this CSS code:
1. Go to your Online Store
2. Click on "Themes"
3. Select "Edit code"
4. Open your CSS file. If you have a custom CSS file, open that instead.
5. If you can't find your custom CSS file, open "base.css"
6. Add the following code at the end of the file.

Font size you can add as per choice. 12px is looks better i think.

 

/* currently your CSS code is like below */
/* comment or remove this code and add new code */
.full-unstyled-link {
    text-decoration: none;
    color: currentColor;
    display: block;
}
/* add or update this code for this CSS for 2 lines in product card */
.card__information .full-unstyled-link {
    text-decoration: none;
    color: currentColor;
    font-style: normal;
    font-size: 12px;
    line-height: 19px;
    font-weight: normal;
    height: 39px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 0;
}

 

See the screenshot below,

dws_pvt_ltd_0-1721823497284.png

dws_pvt_ltd_1-1721823524732.png

 

Feel free to reach out if you have any questions or need assistance.

Best Regards,

DWS

 

 

Helpful? then please Like and Accept the Solution.
For any inquiries, please feel free to contact via WhatsApp and Email: sales@dolphinwebsolution.com.
For more information visit our website Dolphin Web Solution Pvt Ltd.

View solution in original post

Replies 4 (4)

dws_pvt_ltd
Shopify Partner
368 69 87

This is an accepted solution.

Hello @manbru, Please change your CSS in base.css file of the .full-unstyled-link class. 

Please follow these steps to add this CSS code:
1. Go to your Online Store
2. Click on "Themes"
3. Select "Edit code"
4. Open your CSS file. If you have a custom CSS file, open that instead.
5. If you can't find your custom CSS file, open "base.css"
6. Add the following code at the end of the file.

Font size you can add as per choice. 12px is looks better i think.

 

/* currently your CSS code is like below */
/* comment or remove this code and add new code */
.full-unstyled-link {
    text-decoration: none;
    color: currentColor;
    display: block;
}
/* add or update this code for this CSS for 2 lines in product card */
.card__information .full-unstyled-link {
    text-decoration: none;
    color: currentColor;
    font-style: normal;
    font-size: 12px;
    line-height: 19px;
    font-weight: normal;
    height: 39px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 0;
}

 

See the screenshot below,

dws_pvt_ltd_0-1721823497284.png

dws_pvt_ltd_1-1721823524732.png

 

Feel free to reach out if you have any questions or need assistance.

Best Regards,

DWS

 

 

Helpful? then please Like and Accept the Solution.
For any inquiries, please feel free to contact via WhatsApp and Email: sales@dolphinwebsolution.com.
For more information visit our website Dolphin Web Solution Pvt Ltd.
AbubakrSaban
Tourist
4 0 1

When implementing this solution you are no longer able to click anywhere on the card other than the text (title) for cards where title has been limited to 2 lines etc.  So it creates an inconsistent experience, any ideas?

Roy-ロイ
Shopify Partner
91 19 34

Hi @manbru ,

I'm happy to help you with that! You can easily achieve this by adding a simple CSS code to your theme.

To get started, follow these steps:

  1. Log in to your Shopify Admin panel.
  2. Go to Online Store > Theme > Edit code.
  3. In the code editor, navigate to the section-main-product.css file.

Now, add the following code at the end of the file:

 

product-recommendations .card__heading.h5 a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

Result: 

Roy_0-1721823757755.png

 

 

Let's connect and grow your Shopify business together! 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - Connect with me at: roy.solution.partner@gmail.com ( CRO | Site Speed Optimization | Custom Development )

BSS-TekLabs
Shopify Partner
2401 695 830

- Here is the solution for you @manbru 
- Please follow these steps:

step.png

- Then find the base.css or theme.css file.
- Then add the following code at the end of the file and press 'Save' to save it.

.full-unstyled-link { 
     display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

- Here is the result you will achieve:

BSSTekLabs_0-1721824874400.png

 

 

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now