In this video, I’ll demonstrate how you can effortlessly incorporate an aesthetically pleasing FAQ section into your Shopify store. By following the instructions provided in this tutorial, you’ll be able to customize the appearance, layout, and colors of your FAQ section to seamlessly blend with your store’s theme.
Overview of the FAQ Section
As depicted in the demonstration, the FAQ section boasts a clean and modern design suitable for both desktop and mobile versions of your store. You’ll have complete control over various elements such as icon color, hover color, text color, background color, font size, and more. With these customization options, you can ensure that the FAQ section aligns perfectly with your store’s branding and design aesthetic.
Customization Options
During the walkthrough, you witnessed how easy it is to personalize every aspect of the FAQ section. From adjusting icon colors to modifying text sizes, the customization possibilities are endless. Moreover, if you’re proficient in CSS coding, you can further enhance the layout by incorporating custom CSS code.
Integration with Dawn Theme
This tutorial seamlessly integrates the FAQ section into the Dawn theme, a popular choice among Shopify users. Whether you’re setting up a new store or looking to revamp your existing one, this tutorial provides invaluable insights into enhancing your store’s functionality and visual appeal.
Adding the FAQ Section
The tutorial meticulously guides you through the process of adding the FAQ section to your store. From installing the Dawn theme to creating a new section and pasting the provided code, each step is clearly explained to ensure a smooth implementation process.
Conclusion
In conclusion, adding a stylish FAQ section to your Shopify store has never been easier. With the step-by-step instructions provided in this tutorial, you can elevate your store’s user experience and provide valuable information to your customers without the need for coding expertise or paid apps.
<div class="wsp-shopify-section">
<h1 style="text-align: center; padding: 20px 20px 0px 20px;"> {{ section.settings.heading }} </h1>
<div class="wsp-container">
{%for block in section.blocks %}
<div class="wsp-container-item">
<input style="display:none!important;" type="checkbox" id="tab{{forloop.index}}" class="tab-toggle">
<label for="tab{{forloop.index}}" class="wsp-question">{{block.settings.question}}</label>
<div class="wsp-answer">{{block.settings.answer}}</div>
</div>
{% endfor %}
</div>
</div>
{% schema %}
{
"name": "Faq",
"presets" : [
{
"category":"Custom sections",
"name":"Faq",
"blocks": [
{
"type":"text"
},
{
"type":"text"
}
]
}
],
"settings": [
{
"type": "paragraph",
"content": "Subscribe Our Channel For Free Tutorials [WebSensePro](https:\/\/youtube.com\/@websensepro?sub_confirmation=1)"
},
{
"type":"text",
"label":"Heading",
"id":"heading",
"default":"Frequently Asked Questions"
},
{
"type":"color",
"label":"Icon color",
"id":"icon_color",
"default":"#fff"
},
{
"type":"color",
"label":"Question hover color",
"id":"hover_color",
"default":"#EFEFEF"
},
{
"type":"color",
"label":"Question color",
"id":"question_color",
"default":"#fff"
},
{
"type":"color",
"label":"Question Background color",
"id":"background_color",
"default":"#000"
},
{
"type":"color",
"label":"Answer color",
"id":"answer_color",
"default":"#000"
},
{
"type":"color",
"label":"Answer Background color",
"id":"answer_bg_color",
"default":"#fff"
},
{
"type":"range",
"id":"questions-font-size",
"label":"Questions font size",
"default":1.5,
"min":0.8,
"max":3.0,
"step":0.1
}
],
"blocks": [
{
"type":"text",
"name":"Questions/Answer",
"settings": [
{
"type":"text",
"label":"Question",
"id":"question",
"default":"Question text"
},
{
"type":"richtext",
"label":"Answer",
"id":"answer",
"default":"<p>Answer richtext</p>"
}
]
}
]
}
{% endschema %}
{% style %}
.wsp-shopify-section {
padding-right:30px;
padding-left:30px;
margin-bottom:50px
}
.wsp-container {
margin:auto;
max-width:1000px;
}
.wsp-container-item {
border-radius: 8px;
margin-bottom:10px;
overflow: hidden;
}
.wsp-question::after{
color: {{section.settings.icon_color}};
content: '\276F';
transition: all 0.2s ease;
}
.wsp-question {
border-radius: 8px;
display:flex !important;
justify-content: space-between;
background-color:{{section.settings.background_color}};
padding:15px 20px;
font-weight: bold;
color: {{section.settings.question_color}};
font-size: {{section.settings.questions-font-size}}rem;
}
.wsp-question:hover {
color: {{section.settings.hover_color}};
}
.wsp-answer {
padding: 0px 20px;
position: relative;
width: 100%;
height: 0;
opacity: 0;
overflow: hidden;
visibility: hidden;
will-change: height;
transform: translateY(25px);
transition: all .2s ease;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.tab-toggle:checked ~ .wsp-answer {
transform: translateY(0);
padding: 15px 20px;
height:auto;
opacity: 1;
overflow: unset;
visibility: visible;
transition: all .3s ease,opacity 1s ease,height .3s ease;
color: {{section.settings.answer_color}};
background-color: {{section.settings.answer_bg_color}};
}
.tab-toggle:checked ~ .wsp-question::after {
transform: rotate(90deg);
}
.tab-toggle{
display:none;
}
{% endstyle %}
