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...
Creating a Dynamic Multi-Tab Slider Section Section with Customizable Settings in Shopify
Introducing the Dynamic Multi-Tab Slider Section: Elevate your online store's product presentation with our cutting-edge Dynamic Multi-Tab Slider Section. This advanced Shopify feature allows you to seamlessly showcase multiple collections of products in a visually engaging manner, offering your customers a user-friendly way to explore your offerings. With customizable settings to tailor the experience to your brand's unique style, this section brings a new level of sophistication to your e-commerce platform.
Note:
Please be aware that the code has recently been updated. As a result, the code shown in the video may differ slightly from the current version. We recommend reviewing the latest code provided below or in the repository to ensure you are using the most up-to-date version.
Thank you for your understanding!
Step 1: Add the Section to Your Theme
- Go to your Shopify admin.
- Navigate to "Online Store" > "Themes."
- Find the theme you want to edit and click "Actions" > "Edit Code."
- Inside your theme files, create a new section called collection-tab.liquid.
Step 2: Add the HTML Structure
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}
{{ 'component-slider.css' | asset_url | stylesheet_tag }}
{{ 'template-collection.css' | asset_url | stylesheet_tag }}
{% if section.blocks.size > 0 %}
<div class="scc-ct-tabs-section page-width" style="background-color: {{ section.settings.background_color }};">
<div class="page-width">
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="//code.jquery.com/jquery-3.6.0.js"></script>
<script src="//code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
{% if section.settings.useslider %}
<script src="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css"/>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css"/>
{% endif %}
{% if section.settings.title != blank %}
<h2 class="h1">{{ section.settings.title }}</h2>
{% endif %}
<div id="scc-ct-tabs" class="scc-ct-tabs">
<div class="scc-ct-tabs-container">
<ul>
{% for block in section.blocks %}
{% assign collection = collections[block.settings.collection] %}
<li><a href="#scc-ct-tabs-{{ collection.id }}-{{ forloop.index }}">{{ block.settings.custom_tab_label | default: collection.title }}</a></li>
{% endfor %}
</ul>
</div>
{% for block in section.blocks %}
{% assign collection = collections[block.settings.collection] %}
<div id="scc-ct-tabs-{{ collection.id }}-{{ forloop.index }}">
<ul class="grid product-grid grid--2-col-tablet-down grid--4-col-desktop">
{%- for product in block.settings.collection.products limit: section.settings.product_limit -%}
<li class="grid__item scroll-trigger animate--slide-in">
{% render 'card-product',
card_product: product,
media_aspect_ratio: section.settings.image_ratio,
image_shape: section.settings.image_shape,
show_secondary_image: section.settings.show_secondary_image,
show_vendor: section.settings.show_vendor,
show_rating: section.settings.show_rating,
show_quick_add: section.settings.enable_quick_add,
section_id: section.id
%}
</li>
{%- endfor -%}
</ul>
{% if block.settings.viewall %}
<div class="center collection__view-all scroll-trigger animate--slide-in">
<a class="button" href="{{ block.settings.collection.url }}"> View all </a>
</div>
{% endif %}
</div>
{% endfor %}
</div>
</div>
</div>
<script>
$(function() {
function tabSlider() {
$('.scc-ct-tabs .product-grid').each(function() {
var productCount = $(this).find('.grid__item').length;
if ($(window).width() <= 480 && productCount < 4) {
if ($(this).hasClass('slick-initialized')) {
$(this).slick('unslick');
}
$(this).slick({
dots: true,
arrows: false,
infinite: false,
speed: 300,
slidesToShow: 1,
slidesToScroll: 1
});
} else if (productCount >= 4) {
if ($(this).hasClass('slick-initialized')) {
$(this).slick('unslick');
}
$(this).slick({
dots: true,
arrows: false,
infinite: false,
speed: 300,
slidesToShow: 4,
slidesToScroll: 1,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 1,
infinite: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 1
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
}
});
}
// Initialize tabs and slider
$("#scc-ct-tabs").tabs({
create: function(event, ui) {
tabSlider();
},
activate: function(event, ui) {
tabSlider();
}
});
// Drag to scroll functionality
var isDown = false;
var startX;
var scrollLeft;
$('.scc-ct-tabs-container').mousedown(function(e) {
isDown = true;
startX = e.pageX - $(this).offset().left;
scrollLeft = $(this).scrollLeft();
});
$('.scc-ct-tabs-container').mouseleave(function() {
isDown = false;
});
$('.scc-ct-tabs-container').mouseup(function() {
isDown = false;
});
$('.scc-ct-tabs-container').mousemove(function(e) {
if (!isDown) return;
e.preventDefault();
var x = e.pageX - $(this).offset().left;
var walk = (x - startX) * 2; //scroll-fast
$(this).scrollLeft(scrollLeft - walk);
});
});
</script>
<style>
.scc-ct-tabs-section {
padding: {{ section.settings.padding }}px 0;
max-width: {{ section.settings.max_width }}%;
}
.scc-ct-tabs-section h2{
font-size: {{ section.settings.heading_size }}px;
color: {{ section.settings.text_color }};
}
.scc-ct-tabs .slick-track .grid__item {
padding: 0 5px;
}
.scc-ct-tabs .slick-next {
right: 0;
}
.scc-ct-tabs .slick-prev {
left: 0;
}
.scc-ct-tabs .slick-next, .scc-ct-tabs .slick-prev {
transform: none;
top: -20px;
}
.scc-ct-tabs .slick-next::before, .scc-ct-tabs .slick-prev::before {
color: #000;
}
.scc-ct-tabs .slick-slider {
margin-bottom: 30px;
}
.scc-ct-tabs .collection__view-all a {
color: white !important;
}
.scc-ct-tabs {
background: none !important;
border: none !important;
}
.scc-ct-tabs.ui-tabs .ui-tabs-nav {
background: none;
padding: 0;
display: flex;
justify-content: start;
border: none;
}
.scc-ct-tabs-section h2 {
text-align: center;
}
.scc-ct-tabs.ui-tabs .ui-tabs-nav li {
border: none;
background: none;
}
.scc-ct-tabs.ui-tabs .ui-tabs-nav li a {
color: #ddd;
padding: 5px 40px;
border-radius: 50px;
}
.scc-ct-tabs.ui-tabs .ui-tabs-nav li.ui-tabs-active a {
background: grey;
}
.scc-ct-tabs-container {
overflow-x: auto;
white-space: nowrap;
cursor: grab;
overflow-y: hidden;
margin: 40px 0 30px 20px;
}
.scc-ct-tabs-container:active {
cursor: grabbing;
}
.scc-ct-tabs.ui-tabs .ui-tabs-nav li a {
color: {{ section.settings.tab_text_color }};
padding: 5px 40px;
border-radius: 0; /* Removed border-radius */
background: {{ section.settings.tab_background_color }}; /* Change background color to dark grey */
border: 1px solid {{ section.settings.tab_border_color }};
font-size: 14px;
}
</style>
{% endif %}
{% schema %}
{
"name": "Tabs",
"settings": [
{
"type": "range",
"id": "max_width",
"label": "Max Width (%)",
"min": 50,
"max": 100,
"step": 1,
"unit": "%",
"default": 100
},
{
"type": "text",
"id": "title",
"label": "Title"
},
{
"type": "range",
"id": "heading_size",
"min": 12,
"max": 60,
"step": 1,
"unit": "px",
"label": "Font size",
"default": 16
},
{
"type": "color",
"id": "text_color",
"label": "Text color",
"default": "#000000"
},
{
"type": "checkbox",
"id": "useslider",
"label": "Use slider",
"default": true
},
{
"type": "header",
"content":"Tab settings"
},
{
"type": "color",
"id": "tab_text_color",
"label": "Tab Text color",
"default": "#000000"
},
{
"type": "color",
"id": "tab_background_color",
"label": "Tab Background color",
"default": "#ffffff"
},
{
"type": "color",
"id": "tab_border_color",
"label": "Tab Border color",
"default": "#cccccc"
},
{
"type": "range",
"id": "product_limit",
"label": "Product Limit",
"min": 1,
"max": 50,
"step": 1,
"default": 20
},
{
"type": "range",
"id": "padding",
"label": "Padding (px)",
"min": 0,
"max": 50,
"step": 1,
"default": 10
}
],
"blocks": [
{
"type": "tab",
"name": "Tab",
"limit": 5,
"settings": [
{
"type": "collection",
"id": "collection",
"label": "Collection"
},
{
"type": "checkbox",
"id": "viewall",
"label": "Show view all",
"default": true
},
{
"type": "text",
"id": "custom_tab_label",
"label": "Custom Tab Label"
}
]
}
],
"presets": [
{
"name": "Tabs",
"blocks": []
}
]
}
{% endschema %}
Impressive
ReplyDeleteThanks for sharing this awesome knowledge about Shopify development. Are you looking for Shopify Development Company
ReplyDeleteI'm glad you found the information helpful! 😊
DeleteGood Blog Article.Thanks for sharing the information.
ReplyDeleteCypress Training Institutes in Hyderabad
Cypress Online Training Course
Cypress Automation Training Course
Cypress Training in Hyderabad
Cypress Online Training
Cypress Online Training Hyderabad
Cypress Training
Cypress Certification Course Online
Cypress Training in Ameerpet
its not working for my empire 2.0 theme
ReplyDeletefirst the error was product -card does not exist i replaced it product grid item in code but it started showing products but it is rendering single product on whole page and whole multi tabs functionality is gone
Hello, has there been a change in the instructions? I can only see 2 steps and I don't know if this "cheatcode" can be made with only 2 steps. Thanks for the help by the way, you are doing a great job with this blog
ReplyDelete