How can I add a customizable scrolling text section?

s1nghhhhh
Tourist
13 0 1

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

Replies 3 (3)

theycallmemakka
Shopify Partner
1528 344 369

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

 

 

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

BSS-Commerce
Shopify Expert
3477 462 523

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

view (94).png

- Add new section "bss-section"

view (95).pngview (96).png

- 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" 

view (97).png

- After save successfully, go to Customize theme

view (98).png

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

view (99).png

 

- Select "Add Message" and enter the message you want.view (100).png

- Tick "Show" to display

view - 2024-01-03T174720.660.png

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 !

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

Rahul_dhiman
Shopify Expert
107 20 36

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

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here