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

Advanced Marquee Text / Scrolling Text in Shopify

Advanced Marquee Text in Shopify

 Are you looking to add dynamic and eye-catching text effects to your Shopify store? Marquee text is a fantastic way to grab attention and highlight important information. While basic marquee text is a great start, why settle for basic when you can elevate your store's design with advanced marquee text effects?

In this guide, we'll show you how to implement advanced marquee text effects in your Shopify store using custom code. Not only will your text scroll smoothly across the screen, but it will also feature enhancements like color transitions, text transformations, and more.



Before diving into the customization, let's understand the key components of the code:

Customizable Styling: The provided CSS allows you to adjust various aspects of the marquee text, including font size, colors, and padding.

Dynamic Text Content: You can add multiple blocks of text in the Shopify editor, and each block will become a part of the scrolling marquee.

Animation Effects: The animation is controlled through keyframes, enabling smooth scrolling either from left to right or right to left.


Customization Options:

Background and Font Color: Tailor the background and font colors to match your store's branding.

Scrolling Speed: Adjust the scroll time to control how fast or slow the text moves across the screen.

Font Size: Fine-tune the font size to ensure optimal readability on different devices.

Pause on Hover: Choose whether the text pauses when a user hovers over it, adding interactivity to the marquee.

Scroll Direction: Select whether the text moves from left to right or right to left, depending on your preference.

Padding: Customize the padding to ensure the marquee text fits seamlessly within your store's layout.

Implementation

To implement this advanced marquee text effect in your Shopify store:

Access Theme Code: Navigate to your Shopify admin dashboard and access your theme code editor.

Insert Custom Code: Add the provided HTML, CSS, and Liquid code to the appropriate theme files. Ensure to replace any existing marquee text code with the new advanced version.

Customize Settings: Within the Shopify editor, customize the marquee text settings using the intuitive interface provided.

Preview and Publish: Preview your changes to ensure everything looks as expected. Once satisfied, publish your theme to make the advanced marquee text live on your store.

Here is the Full code:

<style>
#id-{{ section.id }}.marquee-text-wrapper {
  --space: 2rem;
  display: grid;
  align-content: center;
  overflow: hidden;
  gap: var(--space);
  width: 100%;
  font-size: 1.5rem;
  line-height: 1.5;
  padding-top:{{ section.settings.padding_top}}px;
  padding-bottom:{{ section.settings.padding_bottom }}px;
  background-color: {{ section.settings.bg_color }};
}

#id-{{ section.id }} .marquee {
  --duration: 10s;
  --gap: var(--space);
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: var(--gap);
}

#id-{{ section.id }} .marquee__group {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: var(--gap);
  min-width: 100%;
  animation: scroll var(--duration) linear infinite;
}
#id-{{ section.id }} .marquee__group p{
  margin-top: 0;
  margin-bottom: 0;
}
#id-{{ section.id }} .marquee__group p {
  color: {{ section.settings.font_color }};
  font-size: {{ section.settings.font_size}}px;
}

#id-{{ section.id }} .marquee--borders {
  padding-block: 0.75rem;
}

#id-{{ section.id }} .marquee--reverse .marquee__group {
  animation-direction: reverse;
  animation-delay: calc(var(--duration) / -2);
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(calc(-100% - var(--gap)));
  }
}
#id-{{ section.id }} .marquee:hover .marquee__group {
  animation-play-state: {{ section.settings.pause_text }};
}
@media (max-width: 600px) {
#id-{{ section.id }}.marquee-text-wrapper {
  padding-top:{{ section.settings.m_padding_top}}px;
  padding-bottom:{{ section.settings.m_padding_bottom }}px;
}
}


</style>
<section class="marquee-text-wrapper" id=id-{{ section.id }}>
<div class="marquee marquee--borders {{ section.settings.scroll_text_move }}" style="--duration: {{ section.settings.scroll_time }}s">
  <div class="marquee__group">
        {% for block in section.blocks %}
            <p>{{ block.settings.text }}</p>
        {% endfor %}
  </div>

  <div class="marquee__group">
        {% for block in section.blocks %}
            <p>{{ block.settings.text }}</p>
        {% endfor %}
  </div>
</div>
</section>
{% schema %}
{
  "name": "Marquee Text",
  "settings": [
      {
        "type": "color",
        "id": "bg_color",
        "label": "Background Color"
      },
      {
        "type": "color",
        "id": "font_color",
        "label": "Font color",
        "default": "#000000"
      },
      {
        "type": "text",
        "label": "Scroll Time",
        "id": "scroll_time",
        "default": "10"
      },
      {
      "type": "range",
      "id": "font_size",
      "min": 8,
      "max": 50,
      "step": 1,
      "unit": "px",
      "label": "Font size",
      "default": 14
    },
    {
      "type": "select",
      "id": "scroll_text_move",
      "label": "Scroll text move from",
      "options": [
        {
          "value": "marquee-left",
          "label": "Left"
        },
        {
          "value": "marquee--reverse",
          "label": "Right"
        }
      ],
      "default": "marquee-left"
    },
    {
      "type": "select",
      "id": "pause_text",
      "label": "Pause text on mouse hover",
      "options": [
        {
          "value": "paused",
          "label": "Yes"
        },
        {
          "value": "initial",
          "label": "No"
        }
      ],
      "default": "paused"
    },
    {
      "type":"header",
      "content":"Padding for desktop"
    },
    {
      "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
    },
    {
      "type":"header",
      "content":"Padding for mobile"
    },
    {
      "type": "range",
      "id": "m_padding_top",
      "min": 0,
      "max": 50,
      "step": 1,
      "unit": "px",
      "label": "Padding Top",
      "default": 16
    },
    {
      "type": "range",
      "id": "m_padding_bottom",
      "min": 0,
      "max": 50,
      "step": 1,
      "unit": "px",
      "label": "Padding Bottom",
      "default": 16
    }



  ],
  "blocks": [
    {
      "name": "mMarquee text",
      "type": "block",
      "settings": [
        {
          "type": "text",
          "label": "Add Text",
          "id": "text",
          "default":"Marquee"
        }
      ]
    }
  ],
  "presets":[
    {
      "name":"Marquee Text",
      "blocks": [
        {
          "type": "block"
        },
        {
          "type": "block"
        },
        {
          "type": "block"
        },
        {
          "type": "block"
        },
        {
          "type": "block"
        }
      ]
    }
  ]
}
{% endschema %}

Comments

  1. AnonymousFebruary 5, 2024 at 4:48 AM

    thanku so much , i am asia iqbal i followd yod on youtube as biglogo marketing you solved my problem can i contact you when i need your services foe shopify i am a shopify developer often i need help in codin kindly drop your whatapp so i can contact you

    ReplyDelete
    Replies
    1. AnonymousFebruary 5, 2024 at 7:49 AM

      Hi Asia iqbal
      Nice to meet you. 😊

      Please text me on my email id shopifycheatcode@gmail.com.

      Delete
  2. AnonymousFebruary 8, 2024 at 9:47 PM

    Your post added a refreshing perspective to my day! Keep up the great work, looking forward to more!

    ReplyDelete
  3. AnonymousFebruary 8, 2024 at 11:02 PM

    I have received a lot of help by watching your video. The task that someone was doing for money, you have done it for me for free. I am following you. You have truly provided a lot of assistance.thankyou so much

    ReplyDelete
  4. AnonymousMarch 14, 2024 at 3:06 AM

    Hello ! How can I make it responsive for mobile device ? Thank you :)

    ReplyDelete
    Replies
    1. AnonymousMarch 18, 2024 at 7:38 AM

      I think it's responsive for mobile.

      Delete
  5. AnonymousMay 24, 2024 at 2:46 AM

    Every time I visit, I learn something new and exciting. Keep up the fantastic work!

    ReplyDelete
  6. AnonymousJuly 28, 2024 at 2:19 PM

    thank you so much.

    ReplyDelete
  7. AnonymousSeptember 13, 2024 at 5:41 PM

    it dose not let me backspace

    ReplyDelete
    Replies
    1. Shopify CheatCodeSeptember 25, 2024 at 11:53 AM

      I didn't quite understand what you're referring to. Could you please explain it with a screenshot in an email? That will help me assist you better!

      Delete
  8. AnonymousOctober 8, 2024 at 12:18 AM

    hey text is going from left to write but no repeating

    ReplyDelete
  9. dominicaaaaaJune 25, 2025 at 4:17 AM

    Thank you so much! Is it possible to change the font too?

    ReplyDelete
    Replies
    1. Shopify CheatCodeJune 25, 2025 at 9:30 AM

      Yes it is possible.. Please message me on my email id. 😊

      Delete

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