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 testimonial section in Shopify

 Enhance Trust and Engagement with Customer Reviews on Your Shopify Store




In today's digital marketplace, customer reviews play a crucial role in building trust and influencing purchase decisions. Integrating a well-crafted Customer Reviews Section into your Shopify store not only showcases positive feedback but also enhances engagement and credibility. Let's explore how you can effectively implement and customize this section using Shopify's powerful features.

Designing Your Customer Reviews Section

Customization Options:

  • Background and Padding: Begin by setting the background color and adjusting the padding to ensure your reviews section seamlessly integrates with your store's design.
  • Visual Appeal: Customize the size of review star images to visually highlight customer satisfaction ratings.
  • Typography: Choose colors for headings, subheadings, card headings, and text to maintain visual consistency and readability across your reviews.
  • Card Styling: Define the background color, border color, border radius, and other elements to create a cohesive look for each review card.
  • Author Details: Customize the appearance of the author's name to ensure it stands out while maintaining a harmonious design flow.

Conclusion

Integrating a Customer Reviews Section into your Shopify store not only boosts credibility but also enhances user engagement by showcasing authentic customer experiences. By leveraging Shopify's robust customization options and responsive design capabilities, you can create a compelling reviews section that resonates with visitors and drives conversions.

Ready to elevate your customer experience? Start by integrating a dynamic Customer Reviews Section on your Shopify store today!

Full Code:


HTML 
            <!-- customer-reviews.liquid -->

<style>
  #id-{{ section.id }} {
    background: {{ section.settings.bg_colr }};
    padding-top:{{ section.settings.padding_top}}px;
    padding-bottom:{{ section.settings.padding_bottom }}px;
  }
  .scc-rs-reviews-section p {
      line-height: 1.6 !important;
  }
  .scc-rs-page-width {
      max-width: 1620px !important;
      padding: 0 50px;
  }
  .scc-rs-main-star-img img {
      width: {{ section.settings.img_size }}%;
  }
  .scc-rs-stars {
      text-align: center;
  }
  .scc-rs-main-heading {
      font-weight: 800;
      font-size: 45px;
      line-height: 70px;
      text-align: center;
      margin: 12px 0 0;
      color: {{ section.settings.heading_color }};
  }
  .scc-rs-main-desc {
      font-weight: 400;
      font-size: 20px;
      line-height: 70px;
      text-align: center;
      margin: 10px 0 0;
      color: {{ section.settings.subheading_color }};
  }
  .scc-rs-review-card .scc-rs-stars img {
      margin: 0 auto;
      width: 170px;
  }
  .scc-rs-review-card h3 {
      font-weight: 700;
      font-size: 24px;
      line-height: 30px;
      text-align: center;
      margin: 30px 0 20px;
      color: {{ section.settings.card_heading_color }};
  }
  .scc-rs-review-card p {
      font-weight: 400;
      font-size: 18px;
      line-height: 42px;
      text-align: center;
      margin: 0;
      color: {{ section.settings.text_color }};
  }
  .scc-rs-author {
      font-weight: 700;
      font-size: 20px;
      line-height: 36px;
      text-align: center;
      margin: 20px 0 0;
      position: absolute;
      left: 50%;
      bottom: 35px;
      transform: translate(-50%, 0px);
      color: {{ section.settings.author_color }} !important;
  }
  .scc-rs-review-card {
    background: {{ section.settings.card_bg_color }};
    border: 1px solid {{ section.settings.card_border_color }};
    border-radius: {{ section.settings.card_border_radius }}px;
    padding: 49px 35px 94px;
    position: relative;
    height: initial !important;
  }
  .scc-rs-review-slider .slick-track {
      display: flex;
      gap: 27px;
  }
  .scc-rs-reviews-section {
      padding: 8rem 0 15rem;
  }
  .scc-rs-reviews-section .slick-arrow:before {
      display: none;
  }
  .scc-rs-reviews-section .slick-prev, .scc-rs-reviews-section .slick-prev:hover, .scc-rs-reviews-section .slick-prev:focus {
      height: 46px;
      width: 46px;
      left: 30px !important;
    {% if section.settings.left_arrow != blank %}
    background: url({{ section.settings.left_arrow | img_url:'master'}});
      {% endif %}
    background-repeat: no-repeat;

  }
  .scc-rs-reviews-section .slick-next, .scc-rs-reviews-section .slick-next:hover, .scc-rs-reviews-section .slick-next:focus {
      height: 46px;
      width: 46px;
      right: 30px !important;
      {% if section.settings.right_arrow != blank %}
      background: url({{ section.settings.right_arrow | img_url:'master'}});
      {% endif %}
      background-repeat: no-repeat;

  }
  .scc-rs-review-carousel-wrapper {
      margin: 65px 0 0;
  }
  .scc-rs-review-slider {
      padding: 0 100px;
  }
  .scc-rs-video-slider-section .scc-rs--main-heading {
      margin: 0;
  }
  /*** MEDIA ***/
  @media only screen and (max-width:  1699px) {
  .scc-rs-review-slider {
      padding: 0 20px;
  }
  .scc-rs-reviews-section .slick-prev, .scc-rs-reviews-section .slick-prev:hover, .scc-rs-reviews-section .slick-prev:focus {
      left: -30px!important;
      z-index: 1;
  }
  .scc-rs-reviews-section .slick-next, .scc-rs-reviews-section .slick-next:hover, .scc-rs-reviews-section .slick-next:focus {
      z-index: 1;
      right: -30px!important;
  }
  }
  @media only screen and (max-width: 1349px) {
  .scc-rs-review-slider .slick-track {
      gap: 20px;
  }
  .scc-rs-review-card {
      padding: 49px 20px 94px;
  }
  .scc-rs-review-slider {
      padding: 0;
  }
  .scc-rs-reviews-section .slick-prev, .scc-rs-reviews-section .slick-prev:hover, .scc-rs-reviews-section .slick-prev:focus {
      left: -50px!important;
  }
  .scc-rs-reviews-section .slick-next, .scc-rs-reviews-section .slick-next:hover, .scc-rs-reviews-section .slick-next:focus {
      right: -50px!important;
  }
  }
  @media only screen and (max-width: 1199px) {
  .scc-rs-main-heading {
      font-size: 38px;
      line-height: 50px;
      margin: 10px 0 0;
  }
  .scc-rs-review-carousel-wrapper {
      margin: 60px 0 0;
  }
  .scc-rs-reviews-section {
      padding: 8rem 0 8rem;
  }
  .scc-rs-reviews-section .slick-prev, .scc-rs-reviews-section .slick-prev:hover, .scc-rs-reviews-section .slick-prev:focus {
      left: -40px!important;
  }
  .scc-rs-reviews-section .slick-next, .scc-rs-reviews-section .slick-next:hover, .scc-rs-reviews-section .slick-next:focus {
      right: -40px!important;
  }
  }
  @media only screen and (max-width: 1023px) {
  .scc-rs-reviews-section .slick-prev, .scc-rs-reviews-section .slick-prev:hover, .scc-rs-reviews-section .slick-prev:focus {
      display: none !important;
  }
  .scc-rs-reviews-section .slick-next, .scc-rs-reviews-section .slick-next:hover, .scc-rs-reviews-section .slick-next:focus {
      display: none !important;
  }
  .scc-rs-reviews-section .slick-dots {
      bottom: -50px;
  }
  .scc-rs-reviews-section .slick-dots button:before {
      display: none;
  }
  .scc-rs-reviews-section .slick-dots button {
      height: 12px !important;
      width: 12px !important;
      background: #cdcfff !important;
      border-radius: 20px;
  }
  .scc-rs-reviews-section .slick-dots li {
      padding: 0 !important;
      margin: 0;
  }
  .scc-rs-reviews-section .slick-dots .slick-active button {
      background: #8186f0 !important;
      border-radius: 20px;
  }
  }
  @media only screen and (max-width: 989px) {
  .scc-rs-page-width {
      padding: 0 30px;
  }
  }
  @media only screen and (max-width: 749px) {
  .scc-rs-reviews-section {
      padding: 5rem 0 6rem;
  }
  .scc-rs-review-slider .slick-track {
      gap: 0px;
  }
  .scc-rs-review-card {
      width: 72vw;
      margin: 0 7px;
  }
  .scc-rs-product__text.inline-richtext {
      font-size: 11px!important;
  }
  .scc-rs-reviews-stars-image .stars img {
      width: 166px;
  }
  .scc-rs-review-card h3 {
      font-size: 14px;
      line-height: 24px;
      margin: 24px 0 15px;
  }
  .scc-rs-review-card p {
      font-size: 14px;
  }
  .scc-rs-author {
      font-size: 14px;
      line-height: 24px;
  }
  .scc-rs-review-card {
      padding: 39px 18px 94px;
  }
  .scc-rs-review-card .stars img {
      width: 116px;
  }
  .scc-rs-author {
      bottom: 25px;
  }
  .scc-rs-review-card {
      padding: 39px 18px 72px;
  }
  }
  </style>

  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css">

  <section class="scc-rs-reviews-section" id="id-{{ section.id }}">
    <div class="scc-rs-page-width">
      <div class="scc-rs-reviews-stars-image">
        {% if section.settings.review_star != blank %}
          <div class="scc-rs-stars scc-rs-main-star-img">
            <img src="{{ section.settings.review_star | img_url:'master' }}">
          </div>
        {% endif %}
      </div>
      <h2 class="scc-rs-main-heading">{{ section.settings.title }}</h2>
      <p class="scc-rs-main-desc">{{ section.settings.subtitle }}</p>
      <div class="scc-rs-review-carousel-wrapper">
        <div class="scc-rs-review-slider">
          {% for block in section.blocks %}
            <div class="scc-rs-review-card">
              {% if block.settings.review_star_img != blank %}
                <div class="scc-rs-stars">
                  <img src="{{ block.settings.review_star_img | img_url:'master' }}">
                </div>
              {% endif %}
              <h3>{{ block.settings.review_title }}</h3>
              <p>{{ block.settings.review_text }}</p>
              <div class="scc-rs-author">{{ block.settings.author_name }}</div>
            </div>
          {% endfor %}
        </div>
      </div>
    </div>
  </section>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
  <script>
    $('.scc-rs-review-slider').slick({
      dots: false,
      arrows: true,
      infinite: true,
      speed: 300,
      slidesToShow: 3,
      slidesToScroll: 1,
      responsive: [
        {
          breakpoint: 1024,
          settings: {
            slidesToShow: 2,
            slidesToScroll: 1,
            infinite: true,
            dots: true
          }
        },
        {
          breakpoint: 750,
          settings: {
            slidesToShow: 2,
            slidesToScroll: 1,
            variableWidth: true
          }
        },
        {
          breakpoint: 480,
          settings: {
            slidesToShow: 1,
            slidesToScroll: 1,
            dots: true,
            variableWidth: true
          }
        }
      ]
    });
  </script>

{% schema %}
{
  "name": "Customer Reviews Section",
  "settings": [
    {
      "type": "color",
      "id": "bg_colr",
      "label": "Background color"
    },
    {
      "type": "image_picker",
      "id": "review_star",
      "label": "Image"
    },
    {
      "type": "range",
      "id": "img_size",
      "min": 12,
      "max": 100,
      "step": 1,
      "unit": "%",
      "label": "Image size",
      "default": 50
    },
    {
      "type": "text",
      "id": "title",
      "label": "Section Title",
      "default": "Customer Testimonials"
    },
    {
      "type": "text",
      "id": "subtitle",
      "label": "Section Subtitle",
      "default": "Hear What Our Happy Customers Have to Say"
    },
    {
      "type": "color",
      "id": "heading_color",
      "label": "Heading Color",
      "default": "#111053"
    },
    {
      "type": "color",
      "id": "subheading_color",
      "label": "Subheading Color",
      "default": "#111053"
    },
    {
      "type": "color",
      "id": "card_heading_color",
      "label": "Card Heading Color",
      "default": "#111053"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Card Text Color",
      "default": "#111053"
    },
    {
      "type": "color",
      "id": "author_color",
      "label": "Card Author Color",
      "default": "#111053"
    },
    {
      "type": "color",
      "id": "card_bg_color",
      "label": "Card Background Color",
      "default": "#FFFFFF"
    },
    {
      "type": "color",
      "id": "card_border_color",
      "label": "Card Border Color",
      "default": "#000000"
    },
    {
      "type": "range",
      "id": "card_border_radius",
      "min": 0,
      "max": 50,
      "step": 1,
      "unit": "px",
      "label": "Card Border Radius",
      "default": 20
    },    
    {
      "type": "image_picker",
      "id": "left_arrow",
      "label": "Left arrow"
    },
    {
      "type": "image_picker",
      "id": "right_arrow",
      "label": "Right arrow"
    },
    {
      "type":"header",
      "content":"Section Padding"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 50,
      "step": 1,
      "unit": "px",
      "label": "Padding Top",
      "default": 16
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 50,
      "step": 1,
      "unit": "px",
      "label": "Padding Bottom",
      "default": 16
    }
  ],
  "blocks": [
    {
      "type": "review",
      "name": "Review",
      "settings": [
        {
          "type": "image_picker",
          "id": "review_star_img",
          "label": "Image"
        },
        {
          "type": "text",
          "id": "review_title",
          "label": "Review Title",
          "default": "Love these product!"
        },
        {
          "type": "textarea",
          "id": "review_text",
          "label": "Review Text",
          "default": "This product has completely changed my life for the better. The quality and customer service are unmatched! It's worth every penny and I highly recommend it to everyone."
        },
        {
          "type": "text",
          "id": "author_name",
          "label": "Author Name",
          "default": "--Dayaa Rabah."
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Customer Reviews Section",
      "category": "Custom Sections",
      "blocks": [
        {
          "type": "review"
        },
        {
          "type": "review"
        },
        {
          "type": "review"
        }
      ]
    }
  ]
}
{% endschema %}

Comments

  1. AnonymousJanuary 25, 2025 at 8:33 PM

    it only shows 3 reviews, is there anyway you could add some more?

    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