Adding social proof to your product pages can significantly increase trust and conversion rates. In this tutorial, we'll show you how to add a stylish Verified Testimonials block to your Shopify store using the Dawn theme . This block displays user avatars, names, and a verified icon—all customizable from the theme editor. ✅ Step 1: Open the main-product.liquid file Go to your Shopify Admin. Navigate to: Online Store → Themes → Edit code . Open the file: sections/main-product.liquid . Now add this code exactly as I’ve shown in the video — and yes, make sure to test it on a duplicate theme first! Full Code {%- when 'verified-testimonials' -%} <style> .verified-testimonials-container-{{block.id}} .verified-testimonials-user-icon-img-class { width: {{block.settings.verified_use...
A well-structured FAQ section helps customers find answers quickly, improving user experience and boosting conversions. If you're looking to add a double FAQ section in Shopify—where two sets of FAQs appear side by side—this guide will walk you through the process step by step.
Step 1: Understanding the Double FAQ Section
A double FAQ section divides questions and answers into two columns, making it visually appealing and easier to navigate. This layout is particularly useful when categorizing FAQs into different sections, such as Shipping & Returns on one side and Product Information on the other.
Step 2: Create a New Section in Shopify
To add a custom double FAQ section, follow these steps:
Login to Your Shopify Admin Panel.
Navigate to Online Store > Themes > Actions > Edit Code.
Under the Sections directory, click Add a new section.
Name it
double-faqand click Create section.
Step 3: Add Code for the Double FAQ Section
Replace the default code in double-faq.liquid with the following:
HTML
<style>
.double-faq-main-container--{{section.id}} *,
.double-faq-main-container--{{section.id}} :after,
.double-faq-main-container--{{section.id}} :before {
border: 0 solid;
box-sizing: border-box;
}
.double-faq-main-container--{{section.id}} {
display: flex;
flex: 1;
flex-direction: column;
margin: 0;
padding: 0;
letter-spacing: normal;
line-height: 1.15;
tab-size: 4;
}
.double-faq-main-container--{{section.id}} h1,
.double-faq-main-container--{{section.id}} h2,
.double-faq-main-container--{{section.id}} h3,
.double-faq-main-container--{{section.id}} h4,
.double-faq-main-container--{{section.id}} h5,
.double-faq-main-container--{{section.id}} h6 {
font-size: inherit;
font-weight: inherit;
}
.double-faq-main-container--{{section.id}} button {
color: inherit;
font-family: inherit;
font-size: 100%;
line-height: inherit;
margin: 0;
padding: 0;
}
.double-faq-main-container--{{section.id}} button {
text-transform: none;
}
.double-faq-main-container--{{section.id}} button {
-webkit-appearance: none;
background-color: transparent;
background-image: none;
}
.double-faq-main-container--{{section.id}} blockquote,
.double-faq-main-container--{{section.id}} dd,
.double-faq-main-container--{{section.id}} dl,
.double-faq-main-container--{{section.id}} figure,
.double-faq-main-container--{{section.id}} h1,
.double-faq-main-container--{{section.id}} h2,
.double-faq-main-container--{{section.id}} h3,
.double-faq-main-container--{{section.id}} h4,
.double-faq-main-container--{{section.id}} h5,
.double-faq-main-container--{{section.id}} h6,
.double-faq-main-container--{{section.id}} hr,
.double-faq-main-container--{{section.id}} p,
.double-faq-main-container--{{section.id}} pre {
margin: 0;
}
.double-faq-main-container--{{section.id}} ol,
.double-faq-main-container--{{section.id}} ul {
list-style: none;
margin: 0;
padding: 0;
}
.double-faq-main-container--{{section.id}} [role=button],
.double-faq-main-container--{{section.id}} button {
cursor: pointer;
}
.double-faq-main-container--{{section.id}} svg {
display: block;
vertical-align: middle;
}
.double-faq-main-container--{{section.id}} .accordion-content-text--{{section.id}} ol,
.double-faq-main-container--{{section.id}} .accordion-content-text--{{section.id}} ul {
list-style: revert;
padding-left: 1.5em;
}
.double-faq-main-container--{{section.id}} .accordion-icon {
border-radius: inherit;
height: 100%;
left: 0;
object-fit: cover;
position: absolute;
top: 0;
width: 100%;
}
.double-faq-main-container--{{section.id}} .accordion-icon {
transition-delay: inherit;
transition-duration: inherit;
transition-property: opacity;
transition-timing-function: inherit;
}
.double-faq-main-container--{{section.id}} .double-faq-main-wrapper--{{section.id}} {
background: #fff;
justify-content: flex-start;
}
.double-faq-main-container--{{section.id}} .double-faq-main-wrapper--{{section.id}},
.double-faq-main-container--{{section.id}} .double-faq-inner-wrapper--{{section.id}} {
align-items: center;
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
}
.double-faq-main-container--{{section.id}} .double-faq-inner-wrapper--{{section.id}} {
align-content: center;
background: {{ section.settings.bg_color }};
column-gap: 32px;
flex-wrap: wrap;
justify-content: center;
margin: 0;
padding: 64px 80px;
row-gap: 32px;
width: 100%;
}
.double-faq-main-container--{{section.id}} .double-faq-container--{{section.id}} {
align-items: center;
column-gap: 48px;
display: flex;
flex-direction: column;
justify-content: flex-start;
max-width: 100%;
min-height: 24px;
position: relative;
row-gap: 48px;
width: 1200px;
}
.double-faq-main-container--{{section.id}} .double-faq-heading--{{section.id}} h2{
align-self: stretch;
color: {{ section.settings.main_heading_color }};
display: flex;
flex-direction: column;
font-family: Fraunces;
font-size: 48px;
font-weight: 300;
justify-content: flex-start;
letter-spacing: -.03em;
line-height: 1.05;
position: relative;
text-align: center;
}
.double-faq-main-container--{{section.id}} .double-faq-block-grid--{{section.id}} {
align-items: flex-start;
column-gap: 32px;
display: flex;
flex-direction: row;
justify-content: flex-start;
min-height: 200px;
position: relative;
row-gap: 32px;
width: 100%;
}
.double-faq-main-container--{{section.id}} .double-faq-block-grid__item--{{section.id}} {
align-items: flex-start;
border: solid rgba(0, 0, 0, .3);
border-width: 1px 0 0;
column-gap: 12px;
display: flex;
flex-basis: 0%;
flex-direction: column;
flex-grow: 1;
flex-shrink: 1;
justify-content: flex-start;
min-width: 0;
position: relative;
row-gap: 12px;
}
.double-faq-main-container--{{section.id}} .accordion-header--{{section.id}} {
align-items: center;
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 20px;
position: relative;
width: 100%
}
.double-faq-main-container--{{section.id}} .accordion-heading--{{section.id}} h3 {
color: {{ section.settings.text_color_accordion }};
display: flex;
flex-basis: 0%;
flex-direction: column;
flex-grow: 1;
flex-shrink: 1;
font-family: ;
font-size: 18px;
font-weight: 500;
justify-content: flex-start;
max-width: 100%;
min-width: 0;
position: relative;
text-align: left;
}
.double-faq-main-container--{{section.id}} .accordion-content--{{section.id}} {
align-items: flex-start;
display: flex;
flex-direction: column;
height: 0;
justify-content: flex-start;
position: relative;
transition-duration: 125ms;
transition-property: color, background-color, fill, opacity, transform, border, box-shadow, left, height;
transition-timing-function: ease-in-out;
width: 100%;
}
.double-faq-main-container--{{section.id}} .accordion-content-text--{{section.id}} p {
color: {{ section.settings.text_color_accordion }};
display: flex;
flex-direction: column;
font-family: ;
font-size: 14px;
justify-content: flex-start;
letter-spacing: -.01em;
line-height: 1.5;
max-width: 100%;
padding: 0 20px 20px;
position: relative;
}
.double-faq-main-container--{{section.id}} .double-faq-block-grid__item--{{section.id}} {
align-items: flex-start;
border: solid rgba(0, 0, 0, .3);
border-width: 1px 0 0;
column-gap: 12px;
display: flex;
flex-basis: 0%;
flex-direction: column;
flex-grow: 1;
flex-shrink: 1;
justify-content: flex-start;
min-width: 0;
position: relative;
row-gap: 12px;
}
.double-faq-main-container--{{section.id}} .accordion-item--{{section.id}} {
align-items: flex-start;
align-self: stretch;
background: {{ section.settings.bg_color_accordion }};;
border: 1px solid {{ section.settings.border_color_accordion }};;
display: flex;
flex-direction: inherit;
justify-content: flex-start;
overflow: hidden;
padding: 0;
position: relative;
}
.double-faq-main-container--{{section.id}} .accordion-header--{{section.id}} {
align-items: center;
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 20px;
position: relative;
width: 100%;
}
.double-faq-main-container--{{section.id}} .accordion-icon-content--{{section.id}} {
color: {{ section.settings.text_color_accordion }};
height: 24px;
position: relative;
transition-duration: 125ms;
transition-property: color, background-color, fill, opacity, transform, border, box-shadow, left;
transition-timing-function: ease-in-out;
width: 24px;
}
.double-faq-main-container--{{section.id}} .accordion-item--{{section.id}}[data-state=open] .accordion-icon-content--{{section.id}} {
transform: rotate(180deg);
}
.double-faq-main-container--{{section.id}} .accordion-item--{{section.id}}[data-state=open] .accordion-icon-content--{{section.id}} .accordion-icon[data-trigger=active] {
opacity: 1;
}
.double-faq-main-container--{{section.id}} .accordion-item--{{section.id}}[data-state=open] .accordion-icon-content--{{section.id}} .accordion-icon:not([data-trigger=active]) {
opacity: 0;
}
.double-faq-main-container--{{section.id}} .accordion-content--{{section.id}} {
align-items: flex-start;
display: flex;
flex-direction: column;
height: 0;
justify-content: flex-start;
position: relative;
transition-duration: 125ms;
transition-property: color, background-color, fill, opacity, transform, border, box-shadow, left, height;
transition-timing-function: ease-in-out;
width: 100%;
}
.double-faq-main-container--{{section.id}} .accordion-item--{{section.id}}[data-state=open] .accordion-content--{{section.id}} {
height: auto;
}
.double-faq-main-container--{{section.id}} .double-faq-bottom-button--{{section.id}} {
align-items: center;
background: {{ section.settings.btn_bg_color }};
border-radius: 999px 999px 999px 999px;
column-gap: 8px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
padding: 8px 16px;
position: relative;
row-gap: 8px;
transition-duration: .3s;
transition-property: color, background-color, fill, opacity, transform, border, box-shadow, left;
transition-timing-function: ease-in-out;
text-decoration: none;
}
.double-faq-main-container--{{section.id}} .double-faq-bottom-button--{{section.id}}:hover {
background: {{ section.settings.btn_bg_color_hover }};;
transform: scale(1.1);
}
.double-faq-main-container--{{section.id}} .double-faq-bottom-button-text--{{section.id}} {
color: {{ section.settings.btn_text_color }};
display: flex;
flex-direction: column;
font-family: ;
font-size: 16px;
font-weight: 500;
justify-content: center;
line-height: 1.3;
position: relative;
text-align: center;
}
@media (max-width:1024px) {
.double-faq-main-container--{{section.id}} .double-faq-inner-wrapper--{{section.id}} {
padding: 64px;
}
.double-faq-main-container--{{section.id}} .double-faq-heading--{{section.id}} h2{
align-self: stretch;
font-size: 48px;
width: auto;
}
}
@media (max-width:768px) {
.double-faq-main-container--{{section.id}} .double-faq-inner-wrapper--{{section.id}} {
padding: 32px;
}
.double-faq-main-container--{{section.id}} .double-faq-heading--{{section.id}} h2{
align-self: stretch;
font-size: 40px;
width: auto;
}
.double-faq-main-container--{{section.id}} .double-faq-block-grid--{{section.id}} {
column-gap: 12px;
flex-direction: column;
row-gap: 12px;
}
.double-faq-main-container--{{section.id}} .double-faq-block-grid__item--{{section.id}},
.double-faq-main-container--{{section.id}} .double-faq-block-grid__item--{{section.id}} {
align-self: stretch;
flex-basis: auto;
flex-grow: 0;
flex-shrink: 1;
width: auto;
}
}
@media (max-width:575px) {
.double-faq-main-container--{{section.id}} .double-faq-inner-wrapper--{{section.id}} {
padding: 24px;
}
.double-faq-main-container--{{section.id}} .double-faq-container--{{section.id}} {
column-gap: 32px;
row-gap: 32px;
}
.double-faq-main-container--{{section.id}} .double-faq-heading--{{section.id}} h2{
align-self: stretch;
font-size: 32px;
text-wrap: balance;
width: auto;
}
.double-faq-main-container--{{section.id}} .double-faq-block-grid--{{section.id}} {
column-gap: 24px;
row-gap: 24px;
}
.double-faq-main-container--{{section.id}} .double-faq-block-grid__item--{{section.id}} {
flex-basis: auto;
flex-grow: 0;
flex-shrink: 1;
}
.double-faq-main-container--{{section.id}} .double-faq-block-grid__item--{{section.id}} {
flex-basis: auto;
flex-grow: 0;
flex-shrink: 1;
}
.double-faq-main-container--{{section.id}} .accordion-heading--{{section.id}} h3 {
flex-basis: 0%;
flex-grow: 1;
flex-shrink: 1;
font-size: 16px;
font-weight: 600;
min-width: 0;
text-wrap: balance;
width: auto;
}
}
</style>
{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}
@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}
<div
class="double-faq-main-container--{{section.id}} section-{{ section.id }}-padding"
data-section-id="{{ section.id }}"
>
<div double-faq-type="root" class="double-faq-main-wrapper--{{section.id}}">
<div class="double-faq-inner-wrapper--{{section.id}}" double-faq-type="container" id="double-faq-inner-wrapper--{{section.id}}">
<div class="double-faq-container--{{section.id}}" double-faq-type="container">
<div double-faq-type="text" class="double-faq-heading--{{section.id}}">
<h2>{{ section.settings.main_heading }}</h2>
</div>
<div class="double-faq-block-grid--{{section.id}}" double-faq-type="container">
<div
class="double-faq-block-grid__item--{{section.id}}"
double-faq-type="accordion-container"
data-is-first-open="true"
data-is-multi-open-enabled="false"
>
{% for block in section.blocks %}
{% if block.settings.alignment == 'left' %}
<div data-state="closed" class="accordion-item--{{section.id}}" double-faq-type="accordion-item">
<button class="accordion-header--{{section.id}}" double-faq-type="accordion-header" type="button">
<div double-faq-type="text" class="accordion-heading--{{section.id}}">
<h3>{{ block.settings.heading_1 }}</h3>
</div>
<div double-faq-type="icon" class="accordion-icon-content--{{section.id}}">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 256 256"
class="accordion-icon"
>
<title>plus-circle</title><path d="M128,26A102,102,0,1,0,230,128,102.12,102.12,0,0,0,128,26Zm0,192a90,90,0,1,1,90-90A90.1,90.1,0,0,1,128,218Zm46-90a6,6,0,0,1-6,6H134v34a6,6,0,0,1-12,0V134H88a6,6,0,0,1,0-12h34V88a6,6,0,0,1,12,0v34h34A6,6,0,0,1,174,128Z"></path>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 256 256"
class="accordion-icon"
data-trigger="active"
>
<title>minus-circle</title><path d="M174,128a6,6,0,0,1-6,6H88a6,6,0,0,1,0-12h80A6,6,0,0,1,174,128Zm56,0A102,102,0,1,1,128,26,102.12,102.12,0,0,1,230,128Zm-12,0a90,90,0,1,0-90,90A90.1,90.1,0,0,0,218,128Z"></path>
</svg>
</div>
</button>
<div
class="accordion-content--{{section.id}}"
double-faq-type="accordion-content"
>
<div double-faq-type="text" class="accordion-content-text--{{section.id}}">
{{ block.settings.content_1 }}
</div>
</div>
</div>
{% endif %}
{% endfor %}
</div>
<div
class="double-faq-block-grid__item--{{section.id}}"
double-faq-type="accordion-container"
data-is-first-open="false"
data-is-multi-open-enabled="false"
>
{% for block in section.blocks %}
{% if block.settings.alignment == 'right' %}
<div data-state="closed" class="accordion-item--{{section.id}}" double-faq-type="accordion-item">
<button class="accordion-header--{{section.id}}" double-faq-type="accordion-header" type="button">
<div double-faq-type="text" class="accordion-heading--{{section.id}}">
<h3>{{ block.settings.heading_1 }}</h3>
</div>
<div double-faq-type="icon" class="accordion-icon-content--{{section.id}}">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 256 256"
class="accordion-icon"
>
<title>plus-circle</title><path d="M128,26A102,102,0,1,0,230,128,102.12,102.12,0,0,0,128,26Zm0,192a90,90,0,1,1,90-90A90.1,90.1,0,0,1,128,218Zm46-90a6,6,0,0,1-6,6H134v34a6,6,0,0,1-12,0V134H88a6,6,0,0,1,0-12h34V88a6,6,0,0,1,12,0v34h34A6,6,0,0,1,174,128Z"></path>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 256 256"
class="accordion-icon"
data-trigger="active"
>
<title>minus-circle</title><path d="M174,128a6,6,0,0,1-6,6H88a6,6,0,0,1,0-12h80A6,6,0,0,1,174,128Zm56,0A102,102,0,1,1,128,26,102.12,102.12,0,0,1,230,128Zm-12,0a90,90,0,1,0-90,90A90.1,90.1,0,0,0,218,128Z"></path>
</svg>
</div>
</button>
<div
class="accordion-content--{{section.id}}"
double-faq-type="accordion-content"
>
<div double-faq-type="text" class="accordion-content-text--{{section.id}}">
{{ block.settings.content_1 }}
</div>
</div>
</div>
{% endif %}
{% endfor %}
</div>
</div>
{% if section.settings.button_label != blank %}
<a
class="double-faq-bottom-button--{{section.id}}"
double-faq-type="container"
href="{{ section.settings.button_label | default: '' }}"
rel="noopener noreferrer"
>
<div double-faq-type="text" class="double-faq-bottom-button-text--{{section.id}}">
{{ section.settings.button_label }}
</div>
</a>
{% endif %}
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
{% if section.settings.accordion == 'multi-open-d' %}
$(document).ready(function () {
$('[double-faq-type="accordion-header"]').click(function () {
var accordionItem = $(this).closest('[double-faq-type="accordion-item"]');
var content = accordionItem.find('[double-faq-type="accordion-content"]');
var accordionContainer = accordionItem.closest('[double-faq-type="accordion-container"]');
var isMultiOpen = accordionContainer.data("is-multi-open-enabled");
if (!isMultiOpen) {
// Close all other accordions if multi-open is disabled
accordionContainer.find('[double-faq-type="accordion-item"]').not(accordionItem).each(function () {
$(this).attr("data-state", "closed");
$(this).find('[double-faq-type="accordion-content"]').removeClass("open");
});
}
// Toggle the clicked accordion
if (accordionItem.attr("data-state") === "closed") {
accordionItem.attr("data-state", "open");
content.addClass("open");
} else {
accordionItem.attr("data-state", "closed");
content.removeClass("open");
}
});
});
{% endif %}
{% if section.settings.accordion == 'multi-open-e' %}
$(document).ready(function () {
$('[double-faq-type="accordion-header"]').click(function () {
var accordionItem = $(this).closest('[double-faq-type="accordion-item"]');
var content = accordionItem.find('[double-faq-type="accordion-content"]');
var accordionContainer = accordionItem.closest('[double-faq-type="accordion-container"]');
var isMultiOpen = accordionContainer.data("is-multi-open-enabled");
// Toggle the clicked accordion
if (accordionItem.attr("data-state") === "closed") {
accordionItem.attr("data-state", "open");
content.addClass("open");
} else {
accordionItem.attr("data-state", "closed");
content.removeClass("open");
}
});
});
{% endif %}
{% if section.settings.accordion == 'open-first' %}
$(document).ready(function () {
var accordionContainer = $('[double-faq-type="accordion-container"]');
// Open the first accordion item by default
accordionContainer.find('[double-faq-type="accordion-item"]').first().attr("data-state", "open");
accordionContainer.find('[double-faq-type="accordion-item"]').first().find('[double-faq-type="accordion-content"]').addClass("open");
// Click event for toggling accordion
$('[double-faq-type="accordion-header"]').click(function () {
var accordionItem = $(this).closest('[double-faq-type="accordion-item"]');
var content = accordionItem.find('[double-faq-type="accordion-content"]');
var isMultiOpen = accordionContainer.data("is-multi-open-enabled");
if (!isMultiOpen) {
// Close all other accordions if multi-open is disabled
accordionContainer.find('[double-faq-type="accordion-item"]').not(accordionItem).each(function () {
$(this).attr("data-state", "closed");
$(this).find('[double-faq-type="accordion-content"]').removeClass("open");
});
}
// Toggle the clicked accordion
if (accordionItem.attr("data-state") === "closed") {
accordionItem.attr("data-state", "open");
content.addClass("open");
} else {
accordionItem.attr("data-state", "closed");
content.removeClass("open");
}
});
});
{% endif %}
</script>
{% schema %}
{
"name": "Double Faq",
"tag": "section",
"enabled_on": { "templates": ["*"] },
"settings": [
{
"type": "color",
"id": "bg_color",
"label": "Background color",
"default": "#d7d6cd"
},
{
"type": "textarea",
"id": "main_heading",
"label": "Heading",
"default": "What is Lorem Ipsum?"
},
{
"type": "color",
"id": "main_heading_color",
"label": "Heading color",
"default": "#222"
},
{
"type": "text",
"id": "button_label",
"default": "Button label",
"label": "Button label",
"info": "Leave the label blank to hide the button."
},
{
"type": "url",
"id": "button_link",
"label": "Button link"
},
{
"type": "color",
"id": "btn_bg_color",
"label": "Button bg color",
"default": "#742c11"
},
{
"type": "color",
"id": "btn_bg_color_hover",
"label": "Button bg color hover",
"default": "#000"
},
{
"type": "color",
"id": "btn_text_color",
"label": "Button text color",
"default": "#fff"
},
{
"type": "select",
"id": "accordion",
"label": "Accordion open settings",
"options": [
{
"value": "multi-open-d",
"label": "Multi-open disabled"
},
{
"value": "multi-open-e",
"label": "Multi-open disabled"
},
{
"value": "open-first",
"label": "Open the first accordion item by default"
}
],
"default": "multi-open-d"
},
{
"type": "header",
"content": "Block color"
},
{
"type": "color",
"id": "bg_color_accordion",
"label": "Background color",
"default": "#fff"
},
{
"type": "color",
"id": "border_color_accordion",
"label": "Border color",
"default": "#222"
},
{
"type": "color",
"id": "text_color_accordion",
"label": "Text color",
"default": "#000001"
},
{
"type": "header",
"content": "Section padding"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "Top padding",
"default": 0
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "Bottom padding",
"default": 0
}
],
"blocks": [
{
"type": "faq_item",
"name": "FAQ Item",
"settings": [
{
"type": "text",
"id": "heading_1",
"label": "Text",
"default": "Where does it come from?"
},
{
"type": "richtext",
"id": "content_1",
"label": "Text",
"default": "<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</p>"
},
{
"type": "select",
"id": "alignment",
"label": "Alignment",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "right",
"label": "Right"
}
],
"default": "left"
}
]
}
],
"presets": [
{
"name": "Double Faq"
}
]
}
{% endschema %}
Step 4: Customize the Section
Heading: Change the main title of the FAQ section from the Shopify theme editor.
Columns: You can add or edit FAQs within each column using the Shopify theme editor.
Styling: Adjust colors, padding, and fonts in the CSS styles.
Step 5: Add the Section to Your Shopify Page
Go to Online Store > Customize.
Click Add Section and select Double FAQ.
Customize the questions and answers.
Save and preview your store.
Final Thoughts
A double FAQ section enhances the browsing experience by neatly organizing customer inquiries. By following this guide, you can create an informative and visually appealing FAQ layout tailored to your Shopify store.
Have any questions? Drop them in the comments below!
Comments
Post a Comment