How do I add an icon between the texts on the marquee texts Shopify Dawn theme?

Store Design
, ,

Topic summary

A user is customizing a marquee text section in Shopify’s Dawn theme and wants to add icons (images) between scrolling text items. They provided their current code and shared a reference image showing their desired outcome: text with small icon dividers between each marquee item.

Current limitation: The existing code only allows text input for each marquee block, with no option to add images as dividers.

Proposed solutions:

  • One suggestion was to use an announcement bar app (Annify), but the user rejected this as it would position the marquee at the top of the page rather than below their banner.
  • Another user (Dan-From-Ryviu) provided updated code that adds image upload functionality to each marquee block, including:
    • An image_picker field for uploading images
    • An image_width range control (20-400px) to adjust image size

Current status: The discussion appears resolved with the code solution provided. The user now has the ability to upload images within their marquee blocks and control their dimensions, allowing them to achieve the icon-separated marquee effect they wanted.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

Here’s my current 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 %}
2

Hi @maers

Can you be more specific about your issue
share the image of the place you want to edit
and your store link

3

maers_0-1738509612067.png
maers_0-1738509612067.png1326×140 79 KB

This is what I am trying to achieve.

But currently, I can only do this:

maers_2-1738509652036.png
maers_2-1738509652036.png1392×104 2.59 KB

Here’s my store URL: https://maers.my/

4

Hi @maers

How did you add this part
can you take a picture of the place you added it for me

DaisyVo_0-1738512527954.png
DaisyVo_0-1738512527954.png1882×575 60.8 KB

5

maers_0-1738513609216.png
maers_0-1738513609216.png1198×163 21 KB

Every single divider between the marquee texts.

6

Hi @maers ,


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

I have sent you an email, kindly check your inbox or spam please! :grin:

8

Hi @maers

No, I mean did you add the block to the theme customize, or add the code to the theme code

DaisyVo_0-1738546752067.png
DaisyVo_0-1738546752067.png1581×783 167 KB

9

Added as theme customize.

maers_0-1738553291146.png

10

Hi @maers

I checked Dawn theme but there is no block named marquee like the picture you sent
are you using an app or something else
can you take a bigger, wider picture so I can have a more general view

11

This is what it activates in the customization, it doesn’t have a way to add the icons in between.

Screenshot 2025-02-03 143825.png
Screenshot 2025-02-03 143825.png293×931 29.1 KB

Screenshot 2025-02-03 143831.png
Screenshot 2025-02-03 143831.png291×934 25.4 KB

12

Hi @maers

Did you try to copy the icon you want and paste it next to ‘Lastest restock’ in your marque?

13

It is actually an image, this is what I wanted:

Reference.png
Reference.png1326×140 79 KB

The icon is actually an image:

https://cdn.shopify.com/s/files/1/0900/3470/0652/files/Icon.png?v=1738568835

Icon.png

14

It only allows me to add as an emoji, which is not what I’m looking for unfortunately. ?

15

So, you will need to use an announcement bar app to do that. You can try Annify app for free

16

Hm, that doesn’t sound right… Because I have a banner that I am in the process of making, and the LATEST RESTOCK marquee thing is going to be below it. The announcement bar will just make it hang on the top.

17

Hi @maers

You can try to update your cod to this so you can upload image to marquee 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"
        },
        {
          "type": "image_picker",
          "label": "Add image",
          "id": "image",
        },
        {
          "type": "range",
          "id": "image_width",
          "min": 20,
          "max": 400,
          "step": 5,
          "unit": "px",
          "label": "Image width",
          "default": 100
        },
      ]
    }
  ],
  "presets":[
    {
      "name":"Marquee Text",
      "blocks": [
        {
          "type": "block"
        },
        {
          "type": "block"
        },
        {
          "type": "block"
        },
        {
          "type": "block"
        },
        {
          "type": "block"
        }
      ]
    }
  ]
}
{% endschema %}

Screenshot 2025-02-03 at 15.28.47.png
Screenshot 2025-02-03 at 15.28.47.png3604×1124 226 KB

1 Like