Topic summary
A Shopify store owner using the Dawn theme wants to add a full-width horizontal line beneath each collection section on their homepage.
Three solutions were provided:
-
Solution 1: Insert custom CSS code in
theme.liquidfile above the</body>tag to style collection sections with bottom borders -
Solution 2: Add similar CSS styling code in
theme.liquidbefore the</head>tag -
Solution 3: Use the theme customizer’s Custom CSS section (Online Store > Themes > Customize > Theme settings) to add a border-bottom rule targeting collection sections
All three approaches involve CSS code that adds a 1px solid border beneath collection elements. Each respondent included screenshots demonstrating the visual result. The discussion remains open with no confirmed resolution from the original poster.
Hey @randytheasian
Follow these Steps:
-
Go to Online Store
-
Edit Code
-
Find theme.liquid file
-
Add the following code in the bottom of the file above tag
RESULT:
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code before the tag
Result:
Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!
You can add this code to Custom CSS in Online Store > Themes > Customize > Theme settings
.section:has(.collection) {
border-bottom: 1px solid #141414;
padding-bottom: 20px;
}
