How can I add a customizable scrolling text section?

[s1nghhhhh]

How can I add a similar scrolling text section? I want the exact same customisation options, fonts, colors, etc. I am adding a video of it below for reference

[theycallmemakka]

Hi @s1nghhhhh ,

The scrolling marque effect can be done by customizing the theme files or by adding a third party app. As this requires writing code for your specific site which requires few developmenet time, I cannot provide the solution here. But if you are looking for someone to do this for you, you can contact me.  

You can review the snippet i created which uses similar marquee  below:

Site: https://custom-dawn-mangit.myshopify.com/

Password: 1

[Rami95]

Hi Makka, 

This is great, but how do we add this to our Dawn theme? 

Best, 

[__10]

So here is a complete video and code which you can adjust as per your requirements

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

[BSS-Commerce]

Hi @s1nghhhhh 

Please follow the instructions below and watch my video tutorial to be able to do it more accurately.

Link: https://www.loom.com/share/41d76e0e12fc4e3aa71560b27b1ea90b?sid=32ad4c02-11ed-43e9-8f57-af1ae720d94a

Steps:

- Theme -> Edit code

- Add new section "bss-section"

- Replace everything in the bss-section.liquid file with the following code:

{%- if  section.blocks.size > 0 and section.settings.show_marquee_bar -%}
<div class="bss-marquee-bar bss-messages">
  <marquee width="100%" scrollamount="{{ section.settings.speed }}" direction="{{ section.settings.direction }}" {% if section.settings.pause_on_hover %}onmouseover="this.stop();" onmouseout="this.start();"{% endif %}>
  {%- for block in section.blocks -%}
  <div class="bss-message" style="background:{{block.settings.colorBackground}};color:{{block.settings.colorText}};">{{block.settings.message}}</div>
  {%- endfor -%}
  </marquee>
</div>
<style>
.bss-marquee-bar.bss-messages{    
  position: relative;
  overflow: hidden;
  display: flex;
}
.bss-marquee-bar .bss-message{
  text-align:center;    
  padding:2px 7%;
  display: inline-block;
}
</style>
{%- endif -%}
 
{% schema %}
{
  "name": "BSS Section",
  "settings": [
    {
      "type": "checkbox",
      "id": "show_marquee_bar",
      "label": "Show"
    },
    {
      "type": "select",
      "id": "direction",
      "options": [
        {
          "value": "left",
          "label": "Right to Left"
        },
        {
          "value": "right",
          "label": "Left to Right"
        }
      ],
      "default": "right",
      "label": "Direction"
    },
    {
      "type": "checkbox",
      "id": "pause_on_hover",
      "label": "Pause on hover"
    },    
    {
      "type": "text",
      "id": "speed",
      "label": "Speed",
      "default": "15"
    }
],
"blocks": [
    {
      "type": "header",
      "name": "Message",
      "settings": [
          {
            "id": "message",
            "type": "textarea",
           "label": "Message"
          },
          {
            "type": "color",
            "id": "colorBackground",
            "label": "Background color",
            "default": "#ffffff"
          },
          {
            "type": "color",
            "id": "colorText",
            "label": "Text color",
            "default": "#000"
          }
      ]
    }
  ],
  "presets": [
    {
      "name": "BSS Section"
    }
  ]
}
{% endschema %}

- Click " Save" 

- After save successfully, go to Customize theme

- You "Add section" scroll down to find and select "BSS Section

- Select "Add Message" and enter the message you want.

- Tick "Show" to display

You can drag it to the desired position and there are some other settings you can try, in the video tutorial I also have a demo.

Hope it helps @s1nghhhhh !

[Backdaddy]

How do you increase text size or change background color for the section itself not the background of the text box

[itspriyanka]

Hi @BSS-Commerce Thank your for the section code. It works really well. I have 2 questions, if you can help:

• How can we ensure the marquee keeps running continuously? Right now there is a break till the last message is completely gone from the screen. 
• Is it possible to add images in between the messages?
• Can we reduce the spacing between the messages?

Let me know.

Thanks in advance,

Priyanka

[Rahul_dhiman]

Hello S1nghhhhh,

So here is a complete video and code which you can adjust as per your requirements

And the code for this would be 

{%- assign id = '#shopify-section-' | append: section.id -%}

{% style %}
 {{id}} .marquee {
    position: relative;
    width: 100vw;
    max-width: 100%;
    height: 200px;
    overflow-x: hidden;
  }
 {{id}} .marquee-content {
      display: flex;
      gap: 8rem;
  }
  {{id}} .track {
    position: absolute;
    white-space: nowrap;
    font-size:6rem;
    will-change: transform;
    animation: marquee 38s linear infinite;
  }

  @keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }

    {{id}} .marquee .track:hover {
      animation-play-state: paused;
    }
{% endstyle %}

<div class="marquee">
  <div class="track">
    <div class="marquee-content">
      {% for i in (1..5) %}
        {% for block in section.blocks %}
          <span class="marquee-gap" style="color:{{ block.settings.color }}">{{ block.settings.text }}</span>
        {% endfor %}
      {% endfor %}
    </div>
  </div>
</div>

{% schema %}
  {
  "name": "Marquee Full Width",
  "settings": [],
  "blocks": [
    {
      "type": "ScrollingText",
      "name": "Scrolling Text",
      "limit": 4,
      "settings": [
        {
          "type": "text",
          "id": "text",
          "default": "Title",
          "label": "Scrolling Text"
        },
        {
          "type": "color",
          "id": "color",
          "default": "#000000",
          "label": "Text Color"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Marquee Full Width"
    }
  ]
}
{% endschema %}

If you need more of such free codes you can check 
prowebcoder.com

[Backdaddy]

How can i change the color of the font, background color and font type ?

[visualess]

Hi,

I have added this to my site and it works fine but how do I change it to have a black background with white text?

[eckseede]

Hello! Does this only work for Dawn or can it work for other themes as well? I'd like something like this for Trade, but it doesn't show up when I follow the same steps.