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

How to Create a Before-and-After Image Slider in Shopify

 A before-and-after image slider is a great feature to showcase visual transformations, whether it's for product makeovers, design changes, or customer testimonials. This feature can add an interactive touch to your Shopify store, helping to engage visitors and highlight the value of your offerings. In this guide, we’ll walk you through the steps to create a before-and-after image slider in Shopify.



Before diving into the technical setup, ensure you have the before and after images ready:

  • Use images of the same size for smooth sliding.
  • Optimize images for web use to improve loading speed.

1. Access the Theme Code Editor

  1. Log in to your Shopify admin panel.
  2. Go to Online Store > Themes.
  3. Click Actions > Edit Code.
Full Code 
 
            <style>
.cs-before-after-content--{{ section.id }} img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

  .cs-before-after-content--{{ section.id }} {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    place-items: center;
    column-gap: 5rem;
    position: relative;
    z-index: 0;
    row-gap: 2rem;
}

.cs-before-after-content--{{ section.id }}--no-content {
    grid-template-columns: repeat(1, 1fr);
}

.cs-main-container-{{ section.id }} {
    display: block;
    position: relative;
    max-width: 45rem;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

.cs-overlay--{{ section.id }} {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    overflow: hidden;
    max-width: 100%;
}

.cs-overlay--{{ section.id }} img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top left;
}

.cs-underlay-{{ section.id }} img {
    width: 100%;
}

.cs-before__text--{{ section.id }}, .cs-after__text--{{ section.id }} {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
}

.cs-before__text--{{ section.id }} h3, .cs-after__text--{{ section.id }} h3 {
    text-align: center;
    width: fit-content;
    font-size: 1.2rem;
    letter-spacing: 0.1rem;
    line-height: 1;
    padding: 0.5rem 1.3rem 0.6rem;
    margin: 0;
    white-space: nowrap;
}

.cs-after__text--{{ section.id }} {
    left: auto;
    right: 0;
}

.cs-input-{{ section.id }} {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    height: 100%;
    width: 100%;
    opacity: 0;
    -webkit-appearance: none;
    overflow: hidden;
}

.cs-input-{{ section.id }}::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 50rem;
    max-height: 100%;
    width: 5rem;
}

.cs-slider__line--{{ section.id }} {
    --line-width: 0.5rem;
    --arrow-x-offset: 1.75rem;
    --arrow-size: 0.7rem;
    display: block;
    position: absolute;
    z-index: 3;
    top: 0;
    left: 50%;
    height: 100%;
    width: var(--line-width);
    transform: translateX(-50%);
}

.cs-arrow-left-{{ section.id }}, .cs-arrow-right-{{ section.id }} {
    font-size: var(--arrow-size);
    width: 1em;
    height: 1.7em;
    position: absolute;
    top: 50%;
    background: rgb(var(--color-background));
}

.cs-arrow-left-{{ section.id }} {
    left: 0;
    transform: translate(calc(var(--arrow-x-offset) * -1), -50%);
    clip-path: polygon(100% 0%, 0 50%, 100% 100%);
}

.cs-arrow-right-{{ section.id }} {
    right: 0;
    transform: translate(var(--arrow-x-offset), -50%);
    clip-path: polygon(100% 50%, 0 0, 0 100%);
}

.cs-line--{{ section.id }}circle {
    --circle-size: 4.25rem;
    --border-size: 0.3rem;
    --line-width: 0.3rem;
    top: 50%;
    transform: translate(-50%, -50%);
    width: var(--circle-size);
    height: var(--circle-size);
    border-radius: 50%;
    background: rgba(var(--color-background), 0.15);
    border: solid var(--border-size) rgb(var(--color-background));
    backdrop-filter: blur(2px);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cs-line--{{ section.id }}circle::before, .cs-line--{{ section.id }}circle::after {
    content: "";
    display: block;
    height: 50rem;
    width: var(--line-width);
    background: rgb(var(--color-background));
    position: absolute;
    left: 50%;
    z-index: 1;
    transform: translateX(-50%);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cs-line--{{ section.id }}circle::before {
    bottom: 100%;
}

.cs-line--{{ section.id }}circle::after {
    top: 100%;
}

.cs-line--{{ section.id }}circle .cs-arrow-left-{{ section.id }} {
    left: 25%;
    transform: translate(-50%, -50%);
}

.cs-line--{{ section.id }}circle .cs-arrow-right-{{ section.id }} {
    right: 25%;
    transform: translate(50%, -50%);
}

@media screen and (max-width: 899px) {
    .cs-before-after-content--{{ section.id }} {
        grid-template-columns: repeat(1, 1fr);
    }
}

@media screen and (min-width: 900px) {
    .cs-before-after-slider-first--{{ section.id }} .cs-main-container-{{ section.id }} {
        order: -1;
    }

    .cs-line--{{ section.id }}classic {
        --line-width: 0.6rem;
        --arrow-size: 0.9rem;
    }

    .cs-line--{{ section.id }}circle {
        --circle-size: 5rem;
        --arrow-size: 0.75rem;
    }
}

</style>
{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}

<style>
  .cs-before-after-wraper--{{ section.id }}{
    background:{{ section.settings.bg_color }};
    color: {{ section.settings.text_color }};
  }
  .cs-before-after-wraper--{{ section.id }} h2{
    color: {{ section.settings.heading_color }};
  }
  .cs-before-after-wraper--{{ section.id }} .button{
    background: {{ section.settings.btn_bg_color }};
    color: {{ section.settings.btn_text_color }};
    margin-top: 20px;
  }

  
  .cs-before__text--{{ section.id }}, .cs-after__text--{{ section.id }}{
   background: {{ section.settings.labels_bg_color }};
  }
  .cs-before__text--{{ section.id }} h3, .cs-after__text--{{ section.id }} h3{
   color: {{ section.settings.labels_text_color }};
  }
  .cs-line--{{ section.id }}circle{
    border: 0.3rem solid {{ section.settings.line_color }} ;
  }
  .cs-line--{{ section.id }}circle::before, .cs-line--{{ section.id }}circle::after{
    background: {{ section.settings.line_color }};
  }

  .cs-slider__line--{{ section.id }} .cs-arrow-left-{{ section.id }} , .cs-slider__line--{{ section.id }} .cs-arrow-right-{{ section.id }} {
    background: {{ section.settings.arrow_color }};
  }
  .cs-input-{{ section.id }} {
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 0;
    opacity: 0.01; /* Very low opacity but still clickable */
    cursor: pointer;
    z-index: 10; /* Ensure it's above other elements */
  }

  .cs-input-{{ section.id }}::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    background: #000;
    cursor: pointer;
  }

  .cs-input-{{ section.id }}::-moz-range-thumb {
    height: 20px;
    width: 20px;
    background: #000;
    cursor: pointer;
  }
  
</style>

<div class="cs-before-after-wraper--{{ section.id }}">
  <div class="page-width section-{{ section.id }}-padding">
    <div class="cs-before-after-content--{{ section.id }} {% if section.settings.layout == 'slider_first' %} cs-before-after-slider-first--{{ section.id }}{% endif %}{% if section.settings.title == blank and section.settings.text == blank %} cs-before-after-content--{{ section.id }}--no-content{% endif %}">
  
      <div class="{% if section.settings.layout == 'slider_first' %} desktop-index-1{% endif %}">
        {%- unless section.settings.title == blank -%}
          
          <h2 class="{{ section.settings.heading_size }}">
            {{ section.settings.title }}
          </h2>
        {%- endunless -%}
        {%- unless section.settings.text == blank -%}
          
          <div class='rte'>
            {{ section.settings.text }}
          </div>
        {%- endunless -%}
        {%- if section.settings.button_label != blank -%}
          <a
            {% if section.settings.link %}
              href="{{ section.settings.link }}"
            {% else %}
              role="link" aria-disabled="true"
            {% endif %}
            class="button  {% if section.settings.button_style_secondary %}button--secondary{% else %}button--primary{% endif %}"
          >
            {{- section.settings.button_label | escape -}}
          </a>
        {%- endif -%}
      </div>
      <cs-main-container-{{ section.id }}s class="cs-main-container-{{ section.id }} {% if section.settings.layout == 'slider_first' %} desktop-index-0{% endif %}">
        {% unless section.settings.before_label == blank %}
          <div class="cs-before__text--{{ section.id }} ">
            <h3>{{ section.settings.before_label }}</h3>
          </div>
        {% endunless %}
        {% unless section.settings.after_label == blank %}
          <div class="cs-after__text--{{ section.id }} ">
            <h3>{{ section.settings.after_label }}</h3>
          </div>
        {% endunless %}
        <div class="cs-overlay--{{ section.id }}{% if section.settings.before_image != blank %} color-{{ section.settings.color_scheme }}{% endif %}">
          {%- if section.settings.before_image != blank -%}
            {{ section.settings.before_image | image_url: width: 1000 | image_tag: loading: 'lazy', width: 450 }}
          {%- endif -%}
        </div>
        <div class="cs-slider__line--{{ section.id }} cs-line--{{ section.id }}{{ section.settings.arrows_style }}" style="left: 50%;">
          <div class="cs-arrow-left-{{ section.id }}">&nbsp</div>
          <div class="cs-arrow-right-{{ section.id }}">&nbsp</div>
        </div>
        <input type="range" class="cs-input-{{ section.id }}" min="0" max="100" value="50">
        <div class="cs-underlay-{{ section.id }}">
          {%- if section.settings.after_image != blank -%}
            {{ section.settings.after_image | image_url: width: 1000 | image_tag: loading: 'lazy', width: 450 }}
          {%- else -%}
            {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
          {%- endif -%}
        </div>
      </cs-main-container-{{ section.id }}s>
    </div>
  </div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
  const slider = document.querySelector('.cs-main-container-{{ section.id }}');
  const input = slider.querySelector('.cs-input-{{ section.id }}');
  const overlay = slider.querySelector('.cs-overlay--{{ section.id }}');
  const overlay2 = slider.querySelector('.cs-slider__line--{{ section.id }}');

  input.addEventListener('input', function() {
    const sliderValue = this.value;
    overlay.style.width = sliderValue + '%';
    overlay2.style.left = sliderValue + '%';
  });
});


</script>
{% schema %}
{
  "name": "Before & After slider",
  "settings": [
    {
      "type": "color",
      "id": "bg_color",
      "label": "Background color",
      "default": "#ffffff"
    },
    {
      "type": "header",
      "content": "General"
    },
    {
      "type": "text",
      "id": "title",
      "default": "Lorem Ipsum Before & After slider",
      "label": "Heading"
    },
    {
      "type": "select",
      "id": "heading_size",
      "options": [
        {
          "value": "h2",
          "label": "Small"
        },
        {
          "value": "h1",
          "label": "Medium"
        },
        {
          "value": "h0",
          "label": "large"
        }
      ],
      "default": "h1",
      "label": "Heading size"
    },
    {
      "type": "color",
      "id": "heading_color",
      "label": "Text color",
      "default": "#000000"
    },
    {
      "type": "richtext",
      "id": "text",
      "default": "<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>",
      "label": "Text"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text color",
      "default": "#000000"
    },
    {
      "type": "text",
      "id": "button_label",
      "label": "Button label"
    },
    {
      "type": "url",
      "id": "link",
      "label": "Button link"
    },
    {
      "type": "checkbox",
      "id": "button_style_secondary",
      "label": "outline button style",
      "default": false
    },
    {
      "type": "color",
      "id": "btn_bg_color",
      "label": "Button background color",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "btn_text_color",
      "label": "Button text color",
      "default": "#ffffff"
    },
    {
      "type": "header",
      "content": "Slider"
    },
    {
      "type": "select",
      "id": "layout",
      "options": [
        {
          "value": "slider_first",
          "label": "Slider first"
        },
        {
          "value": "slider_second",
          "label": "Slider second"
        }
      ],
      "default": "slider_second",
      "label": "Desktop slider placement"
    },
    {
      "type": "text",
      "id": "before_label",
      "label": "Before label",
      "default": "Before"
    },
    {
      "type": "text",
      "id": "after_label",
      "label": "After label",
      "default": "After"
    },
    {
      "type": "color",
      "id": "labels_bg_color",
      "label": "Label background color",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "labels_text_color",
      "label": "Label text color",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "line_color",
      "label": "Line color",
      "default": "#000000"
    },
    {
      "type": "select",
      "id": "arrows_style",
      "options": [
        {
          "value": "classic",
          "label": "Classic"
        },
        {
          "value": "circle",
          "label": "Circle around"
        }
      ],
      "default": "circle",
      "label": "Arrows style"
    },
    {
      "type": "color",
      "id": "arrow_color",
      "label": "Arrow color",
      "default": "#000000"
    },
    {
      "type": "image_picker",
      "id": "before_image",
      "label": "Before image"
    },
    {
      "type": "image_picker",
      "id": "after_image",
      "label": "After image"
    },
    {
      "type": "header",
      "content": "Section padding"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Top padding",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Bottom padding",
      "default": 36
    }
  ],
  "presets": [
    {
      "name": "Before & After slider"
    }
  ],
  "disabled_on": {
    "groups": ["header", "footer"]
  }
}
{% endschema %}

Conclusion

Creating a before-and-after slider in Shopify is a fantastic way to engage your audience and demonstrate the value of your products or services. Whether you use an app for simplicity or dive into custom coding for greater flexibility, you can easily implement this interactive feature and elevate your store’s user experience. Happy selling!

Comments

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 Stunning Section Dividers in Shopify

 Creating visually striking section dividers is a fantastic way to enhance the design and flow of your Shopify store. Section dividers can break the monotony of a page, guide the user’s eye, and add a professional touch to your site’s layout. In this blog, we'll explore how to create custom section dividers in Shopify using Liquid , CSS , and Schema options for maximum flexibility. 🛠 Why Use Section Dividers? Improve Visual Appeal : Add flair to your design and make transitions between sections seamless. Enhance Branding : Use custom shapes or patterns that reflect your brand identity. Guide User Attention : Direct users to specific sections like promotions, testimonials, or CTAs. Create Distinction : Separate content effectively to improve readability and layout organization. 📝 How to Add Custom Section Dividers in Shopify Follow these steps to create and customize section dividers: 1️⃣ Add a Section File Log in to your Shopify admin and navigate to Online Store > Themes . C...
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