Can anyone help me hide the preview description on my blog. I want it to look more clean on the front page of the website. I am using grid theme. Thanks
Topic summary
A user wants to remove blog preview descriptions from their homepage for a cleaner appearance.
Initial Solutions Offered:
- PageFly-Noah provided CSS code to add to theme.liquid above the
</head>tag - Dan-From-Ryviu offered an alternative CSS snippet for the same location
Problem:
The initial solutions didn’t work for the original poster and another user (tarek_guma).
Working Solution:
AliAl-baity provided a more detailed approach that avoids editing theme.liquid:
- Open page preview and use browser’s “Inspect Element” tool
- Use the element selector to click on a blog card showing the preview
- Locate the
<p>section containing the preview text - Copy the class name from
class="____" - Add CSS code
.CLASS-NAME-HERE { display: none !important; }to the Custom CSS section
Important Note: If the class name contains a space, only copy the part before the space and include the dot (.) prefix when adding to CSS.
The discussion includes screenshots demonstrating the inspect element process and where to find the relevant HTML elements.
Hi @tylerklefot
This is Noah from PageFly - Shopify Page Builder App
Please add this code to your theme.liquid above the to get this solved
Step 1: Online Stores > Themes > More Actions > Edit code
Step 2: click on theme.liquid and paste the code above the
Hope this can help you solve the issue
Best regards,
Noah | PageFly
1 Like
Hi @tylerklefot
Can you share your homepage link?
thank you
I’m pretty sure I pasted that in the correct spot but it looks like the descriptions are still there? Any ideas? Thanks in advance.
Hi @tylerklefot Please try again with this code to make it work correct with your theme.
Here’s how it work :
Hi @tylerklefot
You can remove it by adding this code to theme.liquid file before tag in Online store > Themes > Edit code
Not working on Dawn 15
Not working on Dawn
managed to fix…ignore the instructions to edit your theme.liquid file as that’s generally bad practice.
-
Open the preview of the page the blogs section is
-
Right click and click inspect element or inspect
-
click the “Select element” icon. If yours looks different to the screenshot, a google search should show you where yours would be.
- Hover over any of the blog cards showing the preview and click on it as shown
- Find the
section which represents the preview (p in html stands for paragraph)
-
Copy the class name from under “class=_____________________”
!!!If the class name has a space, only copy the part before the space!!! -
Paste the following snippet in the Custom Css part of your section. Make sure to add the class name with a “.” at the beginning:
.PUT-CLASS-NAME-HERE {
display: none !important;
}
That should fix it!