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...
Introduction:
In today's competitive e-commerce landscape, providing comprehensive and tailored information to customers is crucial for success. One effective way to achieve this is by incorporating Frequently Asked Questions (FAQs) sections specific to each collection on your Shopify store. In this guide, we'll explore how you can leverage Shopify metafields to seamlessly integrate distinct FAQs for different collections, enhancing the browsing experience and boosting customer satisfaction.
you can achieve this by creating a separate template collection for each collection.
Benefits and Considerations:
Discuss the benefits of incorporating collection-specific FAQs, such as improved customer engagement, reduced support inquiries, and enhanced SEO through relevant content. Address considerations such as maintenance efforts and maintaining consistency across FAQs to uphold brand integrity.
Setting Up Collection-Specific FAQs:
- Accessing Metafields: Learn how to access and manage metafields for collections within the Shopify admin dashboard.
- Defining FAQ Structure: Structure metafields to accommodate FAQs, including fields for question titles and corresponding answers.
- Adding FAQs: Populate metafields with collection-specific FAQs, ensuring relevance and clarity to address customer inquiries effectively.
Here is the full code:
Full code
<style>
#id-{{ section.id }}{
background:{{ section.settings.bg_color }}
}
#id-{{ section.id }} .accordian-wrapper{
margin: 0 auto;
padding: 4rem;
width: {{ section.settings.section_size}}%;
}
#id-{{ section.id }} h2{
text-align: center !important;
color:{{section.settings.main_heading_color}};
font-size: {{ section.settings.main_heading_size }}px;
}
#id-{{ section.id }} .accordion-inner .accordion-item {
border-bottom: 1px solid #e5e5e5;
}
#id-{{ section.id }} #id-{{ section.id }} .accordion-inner .accordion-item button[aria-expanded=true] {
border-bottom: 1px solid #03b5d2;
}
#id-{{ section.id }} .accordion-inner button {
position: relative;
display: block;
text-align: left;
width: 100%;
padding: 1em 0;
color: {{ section.settings.text_color }};
font-size: {{ section.settings.text_size }}px;
font-weight: 400;
border: none;
background: none;
outline: none;
}
#id-{{ section.id }} .accordion-inner button:hover, #id-{{ section.id }} .accordion-inner button:focus {
cursor: pointer;
color: #03b5d2;
}
#id-{{ section.id }} .accordion-inner button:hover::after, .accordion-inner button:focus::after {
cursor: pointer;
color: #03b5d2;
border: 1px solid #03b5d2;
}
#id-{{ section.id }} .accordion-inner button .accordion-title {
padding: 1em 1.5em 1em 0;
}
#id-{{ section.id }} .accordion-inner button .icon {
display: inline-block;
position: absolute;
top: 18px;
right: 0;
width: 22px;
height: 22px;
border: 1px solid;
border-radius: 22px;
transform: translate(-50%, -50%);
}
#id-{{ section.id }} .accordion-inner button .icon::before {
display: block;
position: absolute;
content: "";
top: 9px;
left: 5px;
width: 10px;
height: 2px;
background: currentColor;
}
#id-{{ section.id }} .accordion-inner button .icon::after {
display: block;
position: absolute;
content: "";
top: 5px;
left: 9px;
width: 2px;
height: 10px;
background: currentColor;
}
#id-{{ section.id }} .accordion-inner button[aria-expanded=true] {
color: #03b5d2;
}
#id-{{ section.id }} .accordion-inner button[aria-expanded=true] .icon::after {
width: 0;
}
#id-{{ section.id }} .accordion-inner button[aria-expanded=true] + .accordion-inner-content {
opacity: 1;
max-height: 9em;
transition: all 200ms linear;
will-change: opacity, max-height;
}
#id-{{ section.id }} .accordion-inner .accordion-inner-content {
opacity: 0;
max-height: 0;
overflow: hidden;
transition: opacity 200ms linear, max-height 200ms linear;
will-change: opacity, max-height;
}
#id-{{ section.id }} .accordion-inner .accordion-inner-content p {
font-size: {{ section.settings.content_size }}px;
font-weight: 300;
margin: 1em 0;
color: {{ section.settings.content_color }};
}
</style>
{% if collection.metafields.custom.accordion_title.value != blank %}
<div id="id-{{ section.id }}">
<div class="accordian-wrapper">
<h2>{{ collection.metafields.custom.accordin_main_heading }}</h2>
{% assign accordian_title = collection.metafields.custom.accordion_title.value %}
{% assign accordion_content = collection.metafields.custom.accordion_content.value %}
<div class="accordion-inner">
{% for titles in accordian_title %}
<div class="accordion-item">
<button id="accordion-button-{{ forloop.index }}" aria-expanded="false">
<span class="accordion-title">{{ titles }}</span><span class="icon" aria-hidden="true"></span>
</button>
<div class="accordion-inner-content">
<p>{{ accordion_content[forloop.index0] }}</p>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
{% endif %}
{% comment %}
----------------------------------------------------------------------------------------
PASTE THIS SCRIPT IN THEME.LIQUID FILE
----------------------------------------------------------------------------------------
{% endcomment %}
<script>
const items = document.querySelectorAll(".accordion-inner button");
function toggleAccordion() {
const itemToggle = this.getAttribute('aria-expanded');
if (itemToggle === 'false') {
this.setAttribute('aria-expanded', 'true');
} else {
this.setAttribute('aria-expanded', 'false');
}
}
items.forEach(item => item.addEventListener('click', toggleAccordion));
</script>
{% schema %}
{
"name": "Collection accordion",
"settings": [
{
"type": "color",
"id": "bg_color",
"label": "Background Color"
},
{
"type": "range",
"id": "section_size",
"min": 30,
"max": 100,
"step": 1,
"label": "Section width",
"default": 50
},
{
"type": "range",
"id": "main_heading_size",
"min": 12,
"max": 40,
"step": 1,
"unit": "px",
"label": "Main heading size",
"default": 32
},
{
"type": "color",
"id": "main_heading_color",
"label": "Color",
"default":"#7288a2"
},
{
"type": "range",
"id": "text_size",
"min": 12,
"max": 40,
"step": 1,
"unit": "px",
"label": "Accordion Title font size",
"default": 16
},
{
"type": "color",
"id": "text_color",
"label": "Color",
"default":"#7288a2"
},
{
"type": "range",
"id": "content_size",
"min": 12,
"max": 40,
"step": 1,
"unit": "px",
"label": "Accordion content font size",
"default": 16
},
{
"type": "color",
"id": "content_color",
"label": "Color",
"default":"#7288a2"
}
],
"presets":[
{
"name": "Collection accordion"
}
]
}
{% endschema %}
Conclusion:
By leveraging meta fields to add unique FAQs for each collection, Shopify merchants can provide targeted and valuable information to their customers, ultimately enhancing the overall shopping experience and driving conversions. Emphasize the importance of continuous optimization and adaptation based on customer feedback to ensure long-term success.
This site is a lifesaver! The tutorials are clear, concise, and incredibly helpful. Keep up the great work!
ReplyDeleteThanks
DeleteThanks for this its been lifesaver
ReplyDeleteThanks
DeleteThanks for this amazing guide.
ReplyDeleteThanks
DeleteNice Post!!
ReplyDeletePlease look here at Hire Laravel Developers in India
Thanks
Delete