For future readers, I actually did not exactly do this but this reminded me that I could just add a custom liquid section right above the header.
You can use my code for Dawn theme and just add as many rows as you need:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#faq-container {
margin-top: 10px; /* Adjust the top margin as needed */
margin-bottom: 30px; /* Adjust the bottom margin as needed */
max-width: 850px; /* Limit maximum width */
font-family: 'Montserrat', sans-serif; /* Replace with your Shopify theme font */
margin-left: auto;
margin-right: auto;
}
.collapsible {
background-color: #FFFFFF;
color: black;
cursor: pointer;
padding-top: 20px; /* Adjust padding individually */
padding-right: 18px;
padding-bottom: 18px;
padding-left: 2px;
width: 100%;
border-top: 1px solid #acacac;
border-right: none;
border-bottom: none;
border-left: none;
text-align: left;
font-size: 15px;
position: relative;
transition: background-color 0.3s ease;
font-family: 'Montserrat', sans-serif; /* Montserrat font for collapsible headers */
font-weight: bold; /* Make collapsible headers bold */
}
.collapsible:after {
content: '\02795'; /* Unicode character for "plus" sign (+) */
font-size: 13px;
color: black;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2796"; /* Unicode character for "minus" sign (-) */
}
.collapsible:hover {
background-color: #f6f6f6;
font-weight: bold;
text-decoration: underline;
}
.content {
padding: 0 18px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background-color: #ffffff;
}
#faq-container .content p {
text-align: left; /* Ensure text alignment is left */
font-size: 14px; /* Adjust font size for the text inside collapsible content */
background-color: #ffffff; /* Adjust background color for the text inside collapsible content */
}
h2 {
text-align: center;
margin-top: 20px; /* Adjust the top margin for h2 */
margin-bottom: 30px; /* Adjust the bottom margin for h2 */
font-size: 40px; /* Adjust the font size for h2 */
font-weight: bold; /* Adjust the font weight for h2 */
}
p {
text-align: center;
margin-top: 15px; /* Adjust the top margin for p */
margin-bottom: 30px; /* Adjust the bottom margin for p */
font-size: 16px; /* Adjust the font size for p */
}
.collapsible:hover .active {
font-weight: normal;
text-decoration: none;
}
@media screen and (max-width: 600px) {
#faq-container {
margin-left: 15px; /* Left margin for mobile view */
margin-right: 15px; /* Right margin for mobile view */
}
}
</style>
</head>
<body>
<div id="faq-container">
<h2>FAQ</h2>
<button class="collapsible">Question 1</button>
<div class="content">
<p>Insert your content here.</p>
</div>
<button class="collapsible">Question 2</button>
<div class="content">
<p>Insert your content here.</p>
</div>
<button class="collapsible">Question 3</button>
<div class="content">
<p>Insert your content here.</p>
</div>
</div>
<script>
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
</script>
</body>
</html>
