Shopify themes, liquid, logos, and UX
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:
How i want the product title on featured products to look like:
Solved! Go to the solution
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,
Feel free to reach out if you have any questions or need assistance.
Best Regards,
DWS
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,
Feel free to reach out if you have any questions or need assistance.
Best Regards,
DWS
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?
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:
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:
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 )
- Here is the solution for you @manbru
- Please follow these steps:
- 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:
- 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
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025