Insert rolling marquee on my Homepage (Debut theme)

Store Design
1

Hi!

I am looking at inserting a rolling marquee on my homepage but I can’t seem to do it.

This is the code for it!

Where should I insert this?

Thanks :slightly_smiling_face:

2

@mrfarmersg

which position you will add rolling marque on home page. please send screenshot I can help you.

Thanks!

3

Over here, below the first section!

Screenshot 2021-02-17 at 1.16.23 PM.png
Screenshot 2021-02-17 at 1.16.23 PM.png2644×1156 186 KB

Is there a Shopify app that allows me to add this?

Thanks!

1 Like
4

@mrfarmersg

Please share your website URL and password if any. I will check and provide a solution here.

Thanks!

5

https://mr-farmer-sg.myshopify.com/

blowee

6

@mrfarmersg

Edit your Sections/collection.liquid file.

find code

after add this code

{% if template.name == 'index' %}
  
 {% endif %}

Add code assets/theme.scss.liquid Or assets/timber.scss.liquid bottom of the file.

#shopify-section-featured-collections .GeneratedMarquee {
font-family:sans-serif;
font-size:3em;
line-height:1.3em;
color:#23402A;
padding:0.1em;
}

Hope this will work for you.

Thanks!

7

Hey,

Thanks! How do you edit the size of the text? Changing the font value doesn’t work for me. Do I change “em” to “px”?

8

@mrfarmersg

yes you can change “em” to “px” edit your CSS file and change font size in following CSS class

#shopify-section-featured-collections .GeneratedMarquee {
font-family:sans-serif;
font-size:25px;
line-height:1.3em;
color:#23402A;
padding:0.1em;
}

Hope this will work for you.

Thanks!

1 Like
9

Hi there,

Is there a solution for this with Prestige Theme?

10

Hi dmwwebartisan

I was wondering if you could help me I use debut theme and am looking to use the marquee effect on my rich text section.

Can you provide the code and sections I need to put it in for it to work?

Thanks

11

You can do it:

Create a new section marquee and paste below code.

You can add marquee section to any page.


  
      {%- if section.settings.link != blank -%}
        
      {%- endif -%}
          

            {%- for block in section.blocks -%}
            {{ block.settings.new_text | escape }}
            {%- endfor -%}
            {%- for block in section.blocks -%}
              {{ block.settings.new_text | escape }}
            {%- endfor -%}
            {%- for block in section.blocks -%}
              {{ block.settings.new_text | escape }}
            {%- endfor -%}
            {%- for block in section.blocks -%}
              {{ block.settings.new_text | escape }}
            {%- endfor -%}
            {%- for block in section.blocks -%}
              {{ block.settings.new_text | escape }}
            {%- endfor -%}
            {%- for block in section.blocks -%}
              {{ block.settings.new_text | escape }}
            {%- endfor -%}
            {%- for block in section.blocks -%}
              {{ block.settings.new_text | escape }}
            {%- endfor -%}
            {%- for block in section.blocks -%}
              {{ block.settings.new_text | escape }}
            {%- endfor -%}
            {%- for block in section.blocks -%}
              {{ block.settings.new_text | escape }}
            {%- endfor -%}
            {%- for block in section.blocks -%}
              {{ block.settings.new_text | escape }}
            {%- endfor -%}
            {%- if section.settings.link != blank -%}
              {% render 'icon-arrow' %}
            {%- endif -%}
          

          {%- if section.settings.link != blank -%}
        
    {%- endif -%}
  

{% schema %}
{
  "name": "Marquee Text",
  "settings": [
    {
      "type": "color",
      "id": "colorBackground",
      "label": "Background color",
      "default": "#000"
    },
    {
      "type": "color",
      "id": "colorText",
      "label": "Text color",
      "default": "#fff"
    },
    {
      "type": "url",
      "id": "link",
      "label": "Link"
    },
    {
      "type": "range",
      "id": "marquee_height",
      "min": 24,
      "max": 200,
      "step": 2,
      "default": 46,
      "label": "Marquee height"
    },
    {
      "type": "range",
      "id": "font_size",
      "min": 8,
      "max": 100,
      "step": 2,
      "default": 24,
      "label": "Font size"
    }
  ],
    "blocks": [
    {
      "type": "text",
      "name": "Text",
      "limit": 20,
      "settings": [
         {
          "type": "text",
          "id": "new_text",
          "default": "Welcome to store",
          "label": "Text"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Marquee",
      "blocks": [
        {
          "type": "text"
        },
        {
          "type": "text"
        },
        {
          "type": "text"
        }
      ]
    }
  ]
}
{% endschema %}