Hi there - I need to set up a metafield for a collapsible FAQ for each individual product page. Can someone give me some instructions on how to do so? Any advice would be GREATLY appreciated. My URL is https://claribelskincare.com.
If anyone can still help it would be greatly appreciated. Just need some instructions or tips please.
Here is a guide to create a custom FAQ by each product. You do need to create 2 metaobjects and one metafield. Here are the steps:
-
First, you need to create a single pair of Question/Answer named FAQ. So in Settings > Meatafields and Metaobjects, create a Metaobject like this
and save -
Next, we need a list of FAQ, so create another metaobject named FAQ list that will be a list of references to a single FAQ object.
and save. -
Now, you need to create a metafield, so we can assing FAQ list to each product.
and save. -
We have all defenition now, we need data. You can go to Content > Metaobject and click on FAQ list and add data there but maybe it’s easier to go to each product and add from there.
You can add an entry for the FAQ list, but as none you will create new ones by creating as many sinle FAQ as you need and then selecting them. save at the end.
- You have data in for one product; repeat for others. Note, you can select some questions that may be the same by selecting one you have; it is like a global list of questions. Now, the tricky part the code. I have used Shopiy generate block (missed that is block and not a section but made changes) but AI could not figure out metaobject and metafields so did fix that part. Styles are liek that and you cand adjust to match your theme.
You have the Stileto theme and this is for Horizon and Dawn so maybe it will not look great but try first in copy of the live theme. Edit code and add a new section
name section “product-faq.liquid” with this code
{% assign ai_gen_id = section.id | replace: '-', '' | downcase %}
{% assign faq_list_ref = product.metafields.custom.product_faq_list %}
{% if faq_list_ref != blank %}
{% assign faq_lists = faq_list_ref.value %}
{% assign faq_item = faq_lists.faq.value %}
{% for faq_list in faq_lists %}
{% assign faq_items = faq_list.faq.value %}
{% if faq_items.size > 0 %}
{% style %}
.ai-product-faq-{{ ai_gen_id }} {
display: block;
width: 100%;
padding: {{ section.settings.section_padding }}px 0;
}
.ai-product-faq-container-{{ ai_gen_id }} {
max-width: {{ section.settings.max_width }}px;
margin: 0 auto;
padding: 0 20px;
}
.ai-product-faq-heading-{{ ai_gen_id }} {
font-size: {{ section.settings.heading_size }}px;
margin: 0 0 {{ section.settings.heading_spacing }}px;
color: {{ section.settings.heading_color }};
text-align: {{ section.settings.heading_alignment }};
}
.ai-product-faq-list-{{ ai_gen_id }} {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: {{ section.settings.item_spacing }}px;
}
.ai-product-faq-item-{{ ai_gen_id }} {
border: {{ section.settings.border_width }}px solid {{ section.settings.border_color }};
border-radius: {{ section.settings.border_radius }}px;
overflow: hidden;
background-color: {{ section.settings.item_background }};
}
.ai-product-faq-question-{{ ai_gen_id }} {
width: 100%;
padding: {{ section.settings.question_padding }}px;
background: none;
border: none;
text-align: left;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
font-size: {{ section.settings.question_size }}px;
font-weight: {{ section.settings.question_weight }};
color: {{ section.settings.question_color }};
transition: background-color 0.3s ease;
}
.ai-product-faq-question-{{ ai_gen_id }}:hover {
background-color: {{ section.settings.question_hover_bg }};
}
.ai-product-faq-question-text-{{ ai_gen_id }} {
flex: 1;
}
.ai-product-faq-icon-{{ ai_gen_id }} {
flex-shrink: 0;
width: 20px;
height: 20px;
transition: transform 0.3s ease;
color: {{ section.settings.icon_color }};
}
.ai-product-faq-item-{{ ai_gen_id }}.active .ai-product-faq-icon-{{ ai_gen_id }} {
transform: rotate(180deg);
}
.ai-product-faq-answer-{{ ai_gen_id }} {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.ai-product-faq-answer-content-{{ ai_gen_id }} {
padding: 0 {{ section.settings.question_padding }}px {{ section.settings.question_padding }}px;
font-size: {{ section.settings.answer_size }}px;
color: {{ section.settings.answer_color }};
line-height: 1.6;
}
.ai-product-faq-answer-content-{{ ai_gen_id }} p {
margin: 0 0 12px;
}
.ai-product-faq-answer-content-{{ ai_gen_id }} p:last-child {
margin-bottom: 0;
}
@media screen and (max-width: 749px) {
.ai-product-faq-heading-{{ ai_gen_id }} {
font-size: {{ section.settings.heading_size | times: 0.8 }}px;
}
.ai-product-faq-question-{{ ai_gen_id }} {
font-size: {{ section.settings.question_size | times: 0.9 }}px;
padding: {{ section.settings.question_padding | times: 0.8 }}px;
}
.ai-product-faq-answer-content-{{ ai_gen_id }} {
font-size: {{ section.settings.answer_size | times: 0.9 }}px;
padding: 0 {{ section.settings.question_padding | times: 0.8 }}px {{ section.settings.question_padding | times: 0.8 }}px;
}
}
{% endstyle %}
<product-faq-{{ ai_gen_id }} class="ai-product-faq-{{ ai_gen_id }}" {{ section.shopify_attributes }}>
<div class="ai-product-faq-container-{{ ai_gen_id }}">
{% if section.settings.heading != blank %}
<h2 class="ai-product-faq-heading-{{ ai_gen_id }}">{{ section.settings.heading }}</h2>
{% endif %}
<ul class="ai-product-faq-list-{{ ai_gen_id }}">
{% for faq_item in faq_items %}
<li class="ai-product-faq-item-{{ ai_gen_id }}" data-faq-item>
<button
class="ai-product-faq-question-{{ ai_gen_id }}"
aria-expanded="false"
type="button"
>
<span class="ai-product-faq-question-text-{{ ai_gen_id }}">
{{ faq_item.question.value }}
</span>
<svg
class="ai-product-faq-icon-{{ ai_gen_id }}"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</button>
<div class="ai-product-faq-answer-{{ ai_gen_id }}">
<div class="ai-product-faq-answer-content-{{ ai_gen_id }}">
{{ faq_item.answer | metafield_tag }}
</div>
</div>
</li>
{% endfor %}
</ul>
</div>
</product-faq-{{ ai_gen_id }}>
<script>
(function() {
class ProductFaq{{ ai_gen_id }} extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
this.items = this.querySelectorAll('[data-faq-item]');
this.setupEventListeners();
{% if section.settings.open_first %}
this.openFirstItem();
{% endif %}
}
setupEventListeners() {
this.items.forEach((item) => {
const button = item.querySelector('.ai-product-faq-question-{{ ai_gen_id }}');
const answer = item.querySelector('.ai-product-faq-answer-{{ ai_gen_id }}');
button.addEventListener('click', () => {
const isActive = item.classList.contains('active');
{% if section.settings.accordion_mode %}
this.items.forEach((otherItem) => {
if (otherItem !== item) {
this.closeItem(otherItem);
}
});
{% endif %}
if (isActive) {
this.closeItem(item);
} else {
this.openItem(item);
}
});
});
}
openItem(item) {
const button = item.querySelector('.ai-product-faq-question-{{ ai_gen_id }}');
const answer = item.querySelector('.ai-product-faq-answer-{{ ai_gen_id }}');
const content = answer.querySelector('.ai-product-faq-answer-content-{{ ai_gen_id }}');
item.classList.add('active');
button.setAttribute('aria-expanded', 'true');
answer.style.maxHeight = content.scrollHeight + 'px';
}
closeItem(item) {
const button = item.querySelector('.ai-product-faq-question-{{ ai_gen_id }}');
const answer = item.querySelector('.ai-product-faq-answer-{{ ai_gen_id }}');
item.classList.remove('active');
button.setAttribute('aria-expanded', 'false');
answer.style.maxHeight = '0';
}
openFirstItem() {
if (this.items.length > 0) {
this.openItem(this.items[0]);
}
}
}
customElements.define('product-faq-{{ ai_gen_id }}', ProductFaq{{ ai_gen_id }});
})();
</script>
{% endif %}
{% endfor %}
{% endif %}
{% schema %}
{
"name": "Product FAQ",
"settings": [
{
"type": "header",
"content": "Content"
},
{
"type": "text",
"id": "heading",
"label": "Heading",
"default": "Frequently Asked Questions"
},
{
"type": "select",
"id": "heading_alignment",
"label": "Heading alignment",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
],
"default": "left"
},
{
"type": "header",
"content": "Behavior"
},
{
"type": "checkbox",
"id": "accordion_mode",
"label": "Accordion mode",
"info": "Only one FAQ open at a time",
"default": true
},
{
"type": "checkbox",
"id": "open_first",
"label": "Open first item by default",
"default": false
},
{
"type": "header",
"content": "Layout"
},
{
"type": "range",
"id": "max_width",
"label": "Maximum width",
"min": 400,
"max": 1200,
"step": 50,
"unit": "px",
"default": 800
},
{
"type": "range",
"id": "section_padding",
"label": "Section padding",
"min": 0,
"max": 100,
"step": 5,
"unit": "px",
"default": 40
},
{
"type": "range",
"id": "heading_spacing",
"label": "Heading spacing",
"min": 10,
"max": 60,
"step": 5,
"unit": "px",
"default": 30
},
{
"type": "range",
"id": "item_spacing",
"label": "Item spacing",
"min": 5,
"max": 30,
"step": 5,
"unit": "px",
"default": 10
},
{
"type": "header",
"content": "Question style"
},
{
"type": "range",
"id": "question_size",
"label": "Font size",
"min": 12,
"max": 24,
"step": 1,
"unit": "px",
"default": 16
},
{
"type": "select",
"id": "question_weight",
"label": "Font weight",
"options": [
{
"value": "400",
"label": "Normal"
},
{
"value": "500",
"label": "Medium"
},
{
"value": "600",
"label": "Semibold"
},
{
"value": "700",
"label": "Bold"
}
],
"default": "600"
},
{
"type": "range",
"id": "question_padding",
"label": "Padding",
"min": 10,
"max": 40,
"step": 5,
"unit": "px",
"default": 20
},
{
"type": "color",
"id": "question_color",
"label": "Text color",
"default": "#000000"
},
{
"type": "color",
"id": "question_hover_bg",
"label": "Hover background",
"default": "#f5f5f5"
},
{
"type": "header",
"content": "Answer style"
},
{
"type": "range",
"id": "answer_size",
"label": "Font size",
"min": 12,
"max": 20,
"step": 1,
"unit": "px",
"default": 14
},
{
"type": "color",
"id": "answer_color",
"label": "Text color",
"default": "#666666"
},
{
"type": "header",
"content": "Item style"
},
{
"type": "color",
"id": "item_background",
"label": "Background color",
"default": "#ffffff"
},
{
"type": "range",
"id": "border_width",
"label": "Border width",
"min": 0,
"max": 5,
"step": 1,
"unit": "px",
"default": 1
},
{
"type": "color",
"id": "border_color",
"label": "Border color",
"default": "#e6e6e6"
},
{
"type": "range",
"id": "border_radius",
"label": "Border radius",
"min": 0,
"max": 20,
"step": 2,
"unit": "px",
"default": 8
},
{
"type": "color",
"id": "icon_color",
"label": "Icon color",
"default": "#000000"
},
{
"type": "header",
"content": "Typography"
},
{
"type": "range",
"id": "heading_size",
"label": "Heading size",
"min": 18,
"max": 48,
"step": 2,
"unit": "px",
"default": 32
},
{
"type": "color",
"id": "heading_color",
"label": "Heading color",
"default": "#000000"
}
],
"presets": [
{
"name": "Product FAQ"
}
]
}
{% endschema %}
And save and go to edit the theme, product page, but make sure that the product has defined this custom FAQ and add a new section “Product FAQ”.
You should see something like this
Now, alternative or if someone reads this and has the Horizon theme, the same section should work, but also there is an option to create a block, so it can be used in different sections. So it is similar, just in code editor, create a new “block” and in editor, you can add a Custom section, then this Product FAQ block. And code is
{% assign ai_gen_id = block.id | replace: '_', '' | downcase %}
{% assign faq_list_ref = product.metafields.custom.product_faq_list %}
{% if faq_list_ref != blank %}
{% assign faq_lists = faq_list_ref.value %}
{% assign faq_item = faq_lists.faq.value %}
{% for faq_list in faq_lists %}
{% assign faq_items = faq_list.faq.value %}
{% if faq_items.size > 0 %}
{% style %}
.ai-product-faq-{{ ai_gen_id }} {
display: block;
width: 100%;
padding: {{ block.settings.section_padding }}px 0;
}
.ai-product-faq-container-{{ ai_gen_id }} {
max-width: {{ block.settings.max_width }}px;
margin: 0 auto;
padding: 0 20px;
}
.ai-product-faq-heading-{{ ai_gen_id }} {
font-size: {{ block.settings.heading_size }}px;
margin: 0 0 {{ block.settings.heading_spacing }}px;
color: {{ block.settings.heading_color }};
text-align: {{ block.settings.heading_alignment }};
}
.ai-product-faq-list-{{ ai_gen_id }} {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: {{ block.settings.item_spacing }}px;
}
.ai-product-faq-item-{{ ai_gen_id }} {
border: {{ block.settings.border_width }}px solid {{ block.settings.border_color }};
border-radius: {{ block.settings.border_radius }}px;
overflow: hidden;
background-color: {{ block.settings.item_background }};
}
.ai-product-faq-question-{{ ai_gen_id }} {
width: 100%;
padding: {{ block.settings.question_padding }}px;
background: none;
border: none;
text-align: left;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
font-size: {{ block.settings.question_size }}px;
font-weight: {{ block.settings.question_weight }};
color: {{ block.settings.question_color }};
transition: background-color 0.3s ease;
}
.ai-product-faq-question-{{ ai_gen_id }}:hover {
background-color: {{ block.settings.question_hover_bg }};
}
.ai-product-faq-question-text-{{ ai_gen_id }} {
flex: 1;
}
.ai-product-faq-icon-{{ ai_gen_id }} {
flex-shrink: 0;
width: 20px;
height: 20px;
transition: transform 0.3s ease;
color: {{ block.settings.icon_color }};
}
.ai-product-faq-item-{{ ai_gen_id }}.active .ai-product-faq-icon-{{ ai_gen_id }} {
transform: rotate(180deg);
}
.ai-product-faq-answer-{{ ai_gen_id }} {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.ai-product-faq-answer-content-{{ ai_gen_id }} {
padding: 0 {{ block.settings.question_padding }}px {{ block.settings.question_padding }}px;
font-size: {{ block.settings.answer_size }}px;
color: {{ block.settings.answer_color }};
line-height: 1.6;
}
.ai-product-faq-answer-content-{{ ai_gen_id }} p {
margin: 0 0 12px;
}
.ai-product-faq-answer-content-{{ ai_gen_id }} p:last-child {
margin-bottom: 0;
}
@media screen and (max-width: 749px) {
.ai-product-faq-heading-{{ ai_gen_id }} {
font-size: {{ block.settings.heading_size | times: 0.8 }}px;
}
.ai-product-faq-question-{{ ai_gen_id }} {
font-size: {{ block.settings.question_size | times: 0.9 }}px;
padding: {{ block.settings.question_padding | times: 0.8 }}px;
}
.ai-product-faq-answer-content-{{ ai_gen_id }} {
font-size: {{ block.settings.answer_size | times: 0.9 }}px;
padding: 0 {{ block.settings.question_padding | times: 0.8 }}px {{ block.settings.question_padding | times: 0.8 }}px;
}
}
{% endstyle %}
<product-faq-{{ ai_gen_id }} class="ai-product-faq-{{ ai_gen_id }}" {{ block.shopify_attributes }}>
<div class="ai-product-faq-container-{{ ai_gen_id }}">
{% if block.settings.heading != blank %}
<h2 class="ai-product-faq-heading-{{ ai_gen_id }}">{{ block.settings.heading }}</h2>
{% endif %}
<ul class="ai-product-faq-list-{{ ai_gen_id }}">
{% for faq_item in faq_items %}
<li class="ai-product-faq-item-{{ ai_gen_id }}" data-faq-item>
<button
class="ai-product-faq-question-{{ ai_gen_id }}"
aria-expanded="false"
type="button"
>
<span class="ai-product-faq-question-text-{{ ai_gen_id }}">
{{ faq_item.question.value }}
</span>
<svg
class="ai-product-faq-icon-{{ ai_gen_id }}"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</button>
<div class="ai-product-faq-answer-{{ ai_gen_id }}">
<div class="ai-product-faq-answer-content-{{ ai_gen_id }}">
{{ faq_item.answer | metafield_tag }}
</div>
</div>
</li>
{% endfor %}
</ul>
</div>
</product-faq-{{ ai_gen_id }}>
<script>
(function() {
class ProductFaq{{ ai_gen_id }} extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
this.items = this.querySelectorAll('[data-faq-item]');
this.setupEventListeners();
{% if block.settings.open_first %}
this.openFirstItem();
{% endif %}
}
setupEventListeners() {
this.items.forEach((item) => {
const button = item.querySelector('.ai-product-faq-question-{{ ai_gen_id }}');
const answer = item.querySelector('.ai-product-faq-answer-{{ ai_gen_id }}');
button.addEventListener('click', () => {
const isActive = item.classList.contains('active');
{% if block.settings.accordion_mode %}
this.items.forEach((otherItem) => {
if (otherItem !== item) {
this.closeItem(otherItem);
}
});
{% endif %}
if (isActive) {
this.closeItem(item);
} else {
this.openItem(item);
}
});
});
}
openItem(item) {
const button = item.querySelector('.ai-product-faq-question-{{ ai_gen_id }}');
const answer = item.querySelector('.ai-product-faq-answer-{{ ai_gen_id }}');
const content = answer.querySelector('.ai-product-faq-answer-content-{{ ai_gen_id }}');
item.classList.add('active');
button.setAttribute('aria-expanded', 'true');
answer.style.maxHeight = content.scrollHeight + 'px';
}
closeItem(item) {
const button = item.querySelector('.ai-product-faq-question-{{ ai_gen_id }}');
const answer = item.querySelector('.ai-product-faq-answer-{{ ai_gen_id }}');
item.classList.remove('active');
button.setAttribute('aria-expanded', 'false');
answer.style.maxHeight = '0';
}
openFirstItem() {
if (this.items.length > 0) {
this.openItem(this.items[0]);
}
}
}
customElements.define('product-faq-{{ ai_gen_id }}', ProductFaq{{ ai_gen_id }});
})();
</script>
{% endif %}
{% endfor %}
{% endif %}
{% schema %}
{
"name": "Product FAQ",
"tag": null,
"settings": [
{
"type": "header",
"content": "Content"
},
{
"type": "text",
"id": "heading",
"label": "Heading",
"default": "Frequently Asked Questions"
},
{
"type": "select",
"id": "heading_alignment",
"label": "Heading alignment",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
],
"default": "left"
},
{
"type": "header",
"content": "Behavior"
},
{
"type": "checkbox",
"id": "accordion_mode",
"label": "Accordion mode",
"info": "Only one FAQ open at a time",
"default": true
},
{
"type": "checkbox",
"id": "open_first",
"label": "Open first item by default",
"default": false
},
{
"type": "header",
"content": "Layout"
},
{
"type": "range",
"id": "max_width",
"label": "Maximum width",
"min": 400,
"max": 1200,
"step": 50,
"unit": "px",
"default": 800
},
{
"type": "range",
"id": "section_padding",
"label": "Section padding",
"min": 0,
"max": 100,
"step": 5,
"unit": "px",
"default": 40
},
{
"type": "range",
"id": "heading_spacing",
"label": "Heading spacing",
"min": 10,
"max": 60,
"step": 5,
"unit": "px",
"default": 30
},
{
"type": "range",
"id": "item_spacing",
"label": "Item spacing",
"min": 5,
"max": 30,
"step": 5,
"unit": "px",
"default": 10
},
{
"type": "header",
"content": "Question style"
},
{
"type": "range",
"id": "question_size",
"label": "Font size",
"min": 12,
"max": 24,
"step": 1,
"unit": "px",
"default": 16
},
{
"type": "select",
"id": "question_weight",
"label": "Font weight",
"options": [
{
"value": "400",
"label": "Normal"
},
{
"value": "500",
"label": "Medium"
},
{
"value": "600",
"label": "Semibold"
},
{
"value": "700",
"label": "Bold"
}
],
"default": "600"
},
{
"type": "range",
"id": "question_padding",
"label": "Padding",
"min": 10,
"max": 40,
"step": 5,
"unit": "px",
"default": 20
},
{
"type": "color",
"id": "question_color",
"label": "Text color",
"default": "#000000"
},
{
"type": "color",
"id": "question_hover_bg",
"label": "Hover background",
"default": "#f5f5f5"
},
{
"type": "header",
"content": "Answer style"
},
{
"type": "range",
"id": "answer_size",
"label": "Font size",
"min": 12,
"max": 20,
"step": 1,
"unit": "px",
"default": 14
},
{
"type": "color",
"id": "answer_color",
"label": "Text color",
"default": "#666666"
},
{
"type": "header",
"content": "Item style"
},
{
"type": "color",
"id": "item_background",
"label": "Background color",
"default": "#ffffff"
},
{
"type": "range",
"id": "border_width",
"label": "Border width",
"min": 0,
"max": 5,
"step": 1,
"unit": "px",
"default": 1
},
{
"type": "color",
"id": "border_color",
"label": "Border color",
"default": "#e6e6e6"
},
{
"type": "range",
"id": "border_radius",
"label": "Border radius",
"min": 0,
"max": 20,
"step": 2,
"unit": "px",
"default": 8
},
{
"type": "color",
"id": "icon_color",
"label": "Icon color",
"default": "#000000"
},
{
"type": "header",
"content": "Typography"
},
{
"type": "range",
"id": "heading_size",
"label": "Heading size",
"min": 18,
"max": 48,
"step": 2,
"unit": "px",
"default": 32
},
{
"type": "color",
"id": "heading_color",
"label": "Heading color",
"default": "#000000"
}
],
"presets": [
{
"name": "Product FAQ"
}
]
}
{% endschema %}
Long post and process itself, so if you have addition question, let me know. Again, work on a copy/duplicate of the live theme.
STEP 1: Create Product Metafields (Admin) Go to Settings → Custom data → Products → Add definition
Metafield 1 (Question)
-
Name: FAQ Question
-
Namespace & key:
custom.faq_question -
Type: Single line text
-
Enable “List of values”
Save it.
Metafield 2 (Answer)
Click Add definition again.
-
Name: FAQ Answer
-
Namespace & key:
custom.faq_answer -
Type: Multi-line text
-
Enable “List of values”
Save it.
This lets you add multiple FAQs per product.
STEP 2: Add FAQ Content to a Product
-
Go to Products → Open a product
-
Scroll down to Metafields
-
Add:
-
FAQ Question (example: Is this safe for sensitive skin?)
-
FAQ Answer (your explanation)
-
-
Click “Add another” to add more FAQs
-
Save
Repeat for each product as needed.
STEP 3: Add the FAQ Section to Your Product Page (Theme)
Go to Online Store → Themes → … → Edit code
Open:
sections/main-product.liquid
(or product-template.liquid depending on your theme)
Paste this code where you want the FAQ to appear
(usually near the product description)
{% if product.metafields.custom.faq_question != blank %}
<div class="product-faq">
<h3>FAQs</h3>
{% for question in product.metafields.custom.faq_question %}
<details class="faq-item">
<summary>{{ question }}</summary>
<div class="faq-answer">
{{ product.metafields.custom.faq_answer[forloop.index0] | newline_to_br }}
</div>
</details>
{% endfor %}
</div>
{% endif %}
STEP 4: Add Styling (CSS)
Go to Assets → base.css (or theme.css)
Add this at the bottom:
.product-faq {
margin-top: 40px;
}
.product-faq h3 {
margin-bottom: 16px;
}
.faq-item {
border-bottom: 1px solid #ddd;
padding: 10px 0;
}
.faq-item summary {
cursor: pointer;
font-weight: 600;
}
.faq-answer {
padding-top: 8px;
color: #555;
}
Best regards,
Devcoder 