My product descriptions are quite long and they are all showing on the PLP. I think this is causing the products to be stacked on top of each other in one long column. I need to hide these and make it 4 columns. Any suggestions?
Topic summary
A user is experiencing layout issues on their product listing page (PLP) using Shopify’s Taste theme. Long product descriptions are causing products to stack vertically in a single column instead of displaying in a 4-column grid.
Proposed Solutions:
- Adjust product card settings in the theme customizer (height or description length limits)
- Use Liquid code to truncate descriptions using
{{ product.description | truncate: 50, '' }} - Implement quick view functionality for full descriptions
- Rewrite product descriptions to be more concise
Current Status:
- The user cannot locate suggested theme settings or the exact file mentioned (product-grid.liquid)
- They found main-collection-product-grid.liquid instead but code changes had no effect
- Important: The issue only appears on the draft site, not the live site, suggesting a theme version or configuration difference
- The user is seeking guidance on finding Shopify developer assistance
The problem remains unresolved, with the draft/live site discrepancy being a key diagnostic clue that hasn’t been fully explored.
i think that’s not the problem problem is something else
Hey @bennybegood ,
Based on the information and image, the issue you’re facing is that the product descriptions are likely too long, causing the product cards to stack on top of each other and creating a cluttered layout.
Here are a couple of ways to address this in your Taste theme:
-
Adjust Product Card Settings:
- Go to your Shopify admin, navigate to Online Store > Themes, find your Taste theme, and click Customize.
- Look for settings related to product cards, such as “Product Card Height” or “Product Card Description Length.”
- Adjust these settings to shorten the height or limit the number of characters displayed for product descriptions on the PLP. This will create a more compact layout.
-
Use Liquid Code (for more control):
-
Access your theme code by going to Online Store > Themes, find your Taste theme, and click Actions > Edit code.
-
Locate product-grid.liquid. This file is responsible for the layout of products on your collection pages.
-
Edit the code to truncate the product description to a specific number of characters. For example:
Code snippet
{{ product.description | truncate: 50, '' }} -
This will truncate the description to 50 characters. You can adjust this number as needed.
-
-
Consider a “Quick View” option:
- Implement a “Quick View” feature on your PLP. This allows customers to hover over or click on a product to view a quick preview with more details, including the full product description.
4. Refine your product descriptions:
- Conciseness is key! Write shorter, more impactful descriptions that highlight the key features and benefits.
- Use bullet points to break up your text and make it easier to read.
Remember to test your changes thoroughly on different devices (desktop, mobile, tablet) to ensure the layout and functionality are as desired.
By implementing these suggestions, you should be able to improve the layout of your PLP and make it easier for customers to browse your products.
If you’re not comfortable with editing code, you can always seek assistance from a Shopify developer or explore tools like SEOPro that can help manage and optimize your product information, including descriptions.
I hope this helps!
Let me know if you have any other questions.
Emily
Hi,
Thank you for your response!!
There are no product card height or description length settings for your first suggestion.
For your second suggestion, I can not find any file named product-grid.liquid but i have one named main-collection-product-grid.liquid. Does it matter where I insert the code? I added it but it did not make any difference.
How do I seek assistance from a Shopify Developer?!
Thanks,
Olivia
The issue I’m facing is only in the draft site I am working on, so i’m not sure how helpful it will be: www.bennybegood.com. somehow the live site is not having this issue, only the draft site.