Skip to main content

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

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>

      {% endfor %}

    </div>

  </div>

</section>

This code defines a section with the class "cstm-sliding-section." Inside this section, we have a container div with a unique ID based on the section's ID. This ID helps us target this specific section for custom styles and animations. A sliding track inside the container will hold our text blocks.

Step 2: Styling with CSS

Next, let's add some CSS to style the sliding text section:

<style>
#section-id-{{ section.id }}.scroll {
background-color: {{section.settings.bg_color}} ;
}

#section-id-{{ section.id }} .hc-slide p {
    color: {{section.settings.font_color}} ;
    display: inline;
    margin-bottom: 0;
    text-align: center;
    font-weight: 700;
    line-height: 26px;
    font-size:{{section.settings.font_size}}px;
    font-family: {{ section.settings.heading_font.family }};
}
  
  @keyframes scroll {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(calc(-250px * 6));
    }
  }

  #section-id-{{ section.id }}.hc-index-slider {
    margin: auto;
    overflow: hidden;
    position: relative;
    --width: 250px;
  }

  #section-id-{{ section.id }}.hc-index-slider .hc-slide-track {
    animation: scroll {{ section.settings.scroll_time }}s linear infinite;
    display: flex;
    width: calc(var(--width) * 12);
    padding: {{ section.settings.padding}}px 0;
  }
  #section-id-{{ section.id }}.hc-index-slider .hc-slide-track:hover {
    animation-play-state: {{section.settings.pause_text}};
  }
  #section-id-{{ section.id }}.hc-index-slider .hc-slide {
    width: var(--width);
    display: flex;
    justify-content: center;
  }

  @media screen and (max-width: 768px) {
    #section-id-{{ section.id }}.hc-index-slider {
      --width: 200px;
    }

    @keyframes scroll {
      0% {
        transform: translateX(0);
      }
      100% {
          transform: translateX(calc(-200px * 6));
        }
      }
    }
</style>


This CSS code handles the appearance and animation of the sliding text section. It allows customization of the background color and text properties. The "@keyframes scroll" defines the sliding animation, and the media query inside the "@media" block ensures a responsive layout for smaller screens.


Step 3: Customization with Liquid and Schema

To make our sliding text section customizable, we use Liquid and Schema tags. The Schema defines the settings and blocks available for customization, while Liquid renders the content based on user input.


{% schema %}
  {
    "name": "Sliding Text",
    "settings": [
      {
        "type": "color",
        "id": "bg_color",
        "label": "Background Color"
      },
      {
      "type": "range",
      "id": "padding",
      "min": 0,
      "max": 50,
      "step": 1,
      "unit": "px",
      "label": "Padding from top and bottom",
      "default": 16
    },
      {
          "type": "text",
          "label": "Scroll Time",
          "id": "scroll_time",
          "default": "10"
      },
      {
        "type": "color",
        "id": "font_color",
        "label": "Font color",
        "default": "#000000"
      },

      {
      "type": "range",
      "id": "font_size",
      "min": 8,
      "max": 50,
      "step": 1,
      "unit": "px",
      "label": "Font size",
      "default": 14
    },
    {
      "type": "select",
      "id": "pause_text",
      "label": "Pause text on mouse hover",
      "options": [
        {
          "value": "paused",
          "label": "Yes"
        },
        {
          "value": "initial",
          "label": "No"
        }
      ],
      "default": "paused"
    }
    ],
    "blocks": [
    {
      "name": "Sliding text",
      "type": "block",
      "settings": [
        {
          "type": "text",
          "label": "Add Text",
          "id": "text"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Sliding Text"
    }
  ]
  }
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

In this code block, we define the Schema for our sliding text section. It includes two settings: "Background Color" and "Scroll Time." Users can customize these values while adding new text blocks. The "presets" section allows you to define presets for quick setups.

Conclusion

With this step-by-step guide, you can easily create a dynamic sliding text section with customizable settings using HTML, CSS, Liquid, and Schema. This visually appealing element will add an engaging touch to your website and help you convey important messages effectively. So, go ahead and implement this sliding text section on your website, and watch as your content comes to life with style and elegance! Happy coding!


Here is the full code:

<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>
      {% endfor %}
    </div>  
</div>
<style>
#section-id-{{ section.id }}.scroll {
background-color: {{section.settings.bg_color}} ;
}

#section-id-{{ section.id }} .hc-slide p {
    color: {{section.settings.font_color}} ;
    display: inline;
    margin-bottom: 0;
    text-align: center;
    font-weight: 700;
    line-height: 26px;
    font-size:{{section.settings.font_size}}px;
    font-family: {{ section.settings.heading_font.family }};
}
  
  @keyframes scroll {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(calc(-250px * 6));
    }
  }

  #section-id-{{ section.id }}.hc-index-slider {
    margin: auto;
    overflow: hidden;
    position: relative;
    --width: 250px;
  }

  #section-id-{{ section.id }}.hc-index-slider .hc-slide-track {
    animation: scroll {{ section.settings.scroll_time }}s linear infinite;
    display: flex;
    width: calc(var(--width) * 12);
    padding: {{ section.settings.padding}}px 0;
  }
  #section-id-{{ section.id }}.hc-index-slider .hc-slide-track:hover {
    animation-play-state: {{section.settings.pause_text}};
  }
  #section-id-{{ section.id }}.hc-index-slider .hc-slide {
    width: var(--width);
    display: flex;
    justify-content: center;
  }

  @media screen and (max-width: 768px) {
    #section-id-{{ section.id }}.hc-index-slider {
      --width: 200px;
    }

    @keyframes scroll {
      0% {
        transform: translateX(0);
      }
      100% {
          transform: translateX(calc(-200px * 6));
        }
      }
    }
</style>
</section>
{% schema %}
  {
    "name": "Sliding Text",
    "settings": [
      {
        "type": "color",
        "id": "bg_color",
        "label": "Background Color"
      },
      {
      "type": "range",
      "id": "padding",
      "min": 0,
      "max": 50,
      "step": 1,
      "unit": "px",
      "label": "Padding from top and bottom",
      "default": 16
    },
      {
          "type": "text",
          "label": "Scroll Time",
          "id": "scroll_time",
          "default": "10"
      },
      {
        "type": "color",
        "id": "font_color",
        "label": "Font color",
        "default": "#000000"
      },

      {
      "type": "range",
      "id": "font_size",
      "min": 8,
      "max": 50,
      "step": 1,
      "unit": "px",
      "label": "Font size",
      "default": 14
    },
     {
      "type": "font_picker",
      "id": "heading_font",
      "label": "Heading font",
      "default": "helvetica_n4"
   },
    {
      "type": "select",
      "id": "pause_text",
      "label": "Pause text on mouse hover",
      "options": [
        {
          "value": "paused",
          "label": "Yes"
        },
        {
          "value": "initial",
          "label": "No"
        }
      ],
      "default": "paused"
    }
    ],
    "blocks": [
    {
      "name": "Sliding text",
      "type": "block",
      "settings": [
        {
          "type": "text",
          "label": "Add Text",
          "id": "text"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Sliding Text"
    }
  ]
  }
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}



Comments

  1. AnonymousAugust 4, 2023 at 3:06 AM

    You put your best efforts into making this vlog look perfect and it is.

    ReplyDelete
  2. AnonymousAugust 8, 2023 at 1:19 AM

    Great

    ReplyDelete
  3. AnonymousDecember 18, 2023 at 3:46 AM

    Wow

    ReplyDelete
  4. AnonymousJanuary 8, 2024 at 1:56 AM

    Good work!

    ReplyDelete
  5. AnonymousJanuary 22, 2024 at 10:30 PM

    how to repeat the scrolling?

    ReplyDelete
    Replies
    1. AnonymousFebruary 3, 2024 at 2:18 AM

      Hi you can check my new blog post advance scrolling text for the repeat scrolling text.

      Delete
  6. AnonymousFebruary 2, 2024 at 8:23 AM

    Finally! thanks so much, it worked!
    Can i ask you some help to make the "Image with Text" module full-width?
    I'm on dawn 13.0 and actually i tried everything, bu nothing seems working :(
    Thankyou! appreciated

    ReplyDelete
    Replies
    1. AnonymousFebruary 2, 2024 at 8:59 AM

      Yes I will definitely help you.. Please contact me on my email id shopifycheatcode@gmail.com

      Delete
  7. AnonymousMay 24, 2024 at 2:49 AM

    Great tutorials. Easy to follow.

    ReplyDelete

Post a Comment

Popular posts from this blog

How to create a Image scrolling/marquee section in Shopify theme

We are excited to unveil our latest addition to the customization options for your website: the Image Marquee section. This dynamic feature allows you to create a continuous scrolling display of your brand logos, offering a visually engaging way to showcase your partners, sponsors, or featured brands. Let's dive into the features and customization options available with the Image Marquee section. Key Features Continuous Scrolling Animation : The marquee animation provides a smooth, continuous scroll of images, giving your site a modern and dynamic feel. Responsive Design : The section is fully responsive, ensuring that your logos look great on desktops, tablets, and mobile devices. Customizable Speed and Direction : Adjust the scroll speed and choose the direction of the animation to fit your design preferences. Interactive Elements : You can enable or disable the pause-on-hover feature, giving visitors the option to pause the marquee for a closer look at the logos. Styling Option...
1 comment
Read more

How to Create Fake Sales Pop-Ups on Your Shopify Store

 How to Create Fake Sales Pop-Ups on Your Shopify Store Adding sales pop-ups to your Shopify store can create a sense of urgency and social proof, encouraging potential customers to make a purchase. While it's always best to be transparent and honest with your customers, some store owners may choose to implement fake sales pop-ups to simulate recent purchases. Here's a step-by-step guide on how to create such pop-ups using custom code in your Shopify store. Step 1: Create a New Section First, you'll need to create a new section in your Shopify theme. To do this, follow these steps: Go to the Shopify Admin Dashboard . Navigate to Online Store > Themes . Click on Actions > Edit Code for the theme you want to modify. Under the Sections directory, click on Add a new section . Name the section customer-purchased . Conclusion This guide walks you through creating a fake sales pop-up on your Shopify store using a custom section. Full code ...
7 comments
Read more

Create a Dynamic Video Slider with Customization Options in shopify

 In the fast-paced world of digital content, captivating your audience's attention is crucial. One effective way to engage your viewers is through dynamic video sliders, seamlessly blending visuals with interactivity. Today, we unveil a versatile solution that not only showcases your video content but also offers customization options to align with your brand's identity. Unveiling the Interface Our video slider combines sleek design with intuitive functionality. Let's dive into its key components: Background Customization: Set the stage with a background color of your choice to complement your brand's aesthetic. Engaging Heading and Text: Craft a compelling message with customizable heading and descriptive text, ensuring your audience stays informed and intrigued. Interactive Play Button: Enhance user engagement with a play button overlay, enticing viewers to interact with your video content. Navigation Arrows: Navigate through the slider effortlessly with customiza...
10 comments
Read more