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 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