A user wants to add a horizontal separator line between collapsible row headers and their content on product pages, as currently there’s no visual separation when sections expand.
Solution Provided:
accordion details[open] summary {
border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
}
This adds a subtle border below expanded collapsible headers. The solution includes a visual example showing the result with the separator line in place.
Hi,
I would like a straight line that separates every header and text when using collapsible rows in my products area. I dont like that it opens and there is nothing separting.
My shop is : https://37e58e-bf.myshopify.com/
Please see the picture below :
Thanks !
Hi @LUMYO
check this one.
From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
Find the theme that you want to edit and click on “Actions” and then “Edit code”.
In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.accordion details[open]>summary {
border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
}
And save.
Result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
