Skip to main content

Posts

How to Add a Social Proof Block in Shopify Product Page (Dawn Theme)

 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...
Post a Comment
Read more

Creating a Dynamic Multi-Tab Slider Section Section with Customizable Settings in Shopify

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 ...
6 comments
Read more

Creating a Dynamic Scrolling Text Section with Customizable Settings in Shopify

 Are you looking to add a touch of elegance and interactivity to your website? Sliding text sections can be a great way to capture your visitors' attention and convey important messages in a dynamic manner. In this blog, we will guide you through the process of creating a customizable sliding text section using HTML, CSS, and Liquid, an easy-to-use template language. Step 1: HTML Markup First, let's set up the basic HTML structure for our sliding text section: <section class="cstm-sliding-section">   <div id="section-id-{{ section.id }}" class="hc-index-slider scroll">     <div class="hc-slide-track">       {% for block in section.blocks %}       <div class="hc-slide">         <div class="text-wrapper">           <p class="text">{{ block.settings.text }}</p>         </div>       </div>      ...
9 comments
Read more

How to Create Custom Announcement Bar with Slider in Shopify.

In this blog post, we'll learn how to create an announcement bar using the Swiper.js library in Shopify with custom coding . The announcement bar is a simple but effective way to display important messages or announcements on your website. With Swiper.js, we can easily create a dynamic and interactive announcement bar with customizable settings. Prerequisites Before we begin, make sure you have included the Swiper.js library in your project. You can do this by adding the following code to the <head> section of your HTML file: <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" /> <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script> HTML Structure To create the announcement bar, we'll need to define a container element and a set of messages or announcements. Here's the HTML structure for the announcement bar: <div id="announcement-bar" class="swiper-container zwk...
1 comment
Read more