A user seeks to add custom icons to each line of scrolling/marquee text in their Shopify store using the Costica theme. The theme’s built-in icon options are limited to a predefined icon pack.
Solutions Offered:
marquee.liquid file to enable custom icon/image uploads per text entry.Implementation:
After the user shares their theme code, a developer provides updated code that adds:
icon_image field for uploading custom imagesIssue Encountered:
The initial code modification creates duplicate text lines—one set with icons and one without. The developer provides a corrected version that consolidates the logic into a single loop, eliminating the duplication.
The discussion remains technical, focused on Liquid template customization for Shopify themes.
I want to add an icon for each text in my scrolling text section. I’m using a theme named ‘Costica’ and although there is an option to add icons, it only allows to choose from the icon pack they provide. How can I add different custom icons to each of these text lines?
My store url: alvrah.myshopify.com
Here’s the section I’m talking about: https://ibb.co/zH5pz71k
Hi @growsta_co 
custom icons settings per entry is an advanced theme customization.
Feasible to maybe do a CSS bandaid but that can break every time the section is updated/removed/added but there’s no inspectable url.
If emoji are the icons the simplest workaround is, if the theme allows it, disable the current icons or select a non-visible icon then add the emoji directly to the text.
If you need this customization then contact me for services.
Contact info in forum signature below 
.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.
Hi @growsta_co in the theme editor you can find a section named something like text-scroll, you can share the file here i will update that to allow to add custom icon/image.
Hi @growsta_co ,
Please go to Actions > Edit code > Sections > marquee.liquid file and send me the whole code. I will check and add option for you
{%- liquid
assign sst = section.settings
if section.settings.ss_bg_enable
assign bg = " bg"
endif
if section.settings.class_section != blank
assign class_section = section.settings.class_section | prepend: ’ ’
endif
assign class = ‘distance’ | append: bg | append: ’ ’ | append: section.settings.background_position | append: class_section
if section.settings.background_size == ‘full’
assign bg_class_full = class | prepend: ’ ’
else
assign bg_class_contain = class | prepend: ’ ’
endif
-%}
{% style %}
{% render ‘nov-section-style’ %}
#shopify-section-{{ section.id }} .block-scroll {
animation-duration: {{ sst.time }}s;
–spacing: {{ sst.spacing | divided_by: 10.0 }}rem;
}
#shopify-section-{{ section.id }} .block-scroll__item {
color: var(–color-text);
font-size: {{ sst.t_s | divided_by: 10.0 }}rem;
line-height: {{ sst.t_lh }};
letter-spacing: {{ sst.t_lt }}px;
text-transform: {{ sst.t_tt }};
}
@media(max-width: 991px) {
#shopify-section-{{ section.id }} .block-scroll__item {
font-size: {{ sst.t_s_md | divided_by: 10.0 }}rem;
}
}
{% endstyle %}
New Offers on the COVID-19. This Weekend only to Get 50% Flate
" } ] } ], "presets": [ { "name": "Vinova Text Scroll", "category": "Text", "blocks": [ { "type": "item" }, { "type": "item" }, { "type": "item" } ] } ] } {% endschema %}Hi @growsta_co ,
Please change all code:
{%- liquid
assign sst = section.settings
if section.settings.ss_bg_enable
assign bg = " bg"
endif
if section.settings.class_section != blank
assign class_section = section.settings.class_section | prepend: ' '
endif
assign class = 'distance' | append: bg | append: ' ' | append: section.settings.background_position | append: class_section
if section.settings.background_size == 'full'
assign bg_class_full = class | prepend: ' '
else
assign bg_class_contain = class | prepend: ' '
endif
-%}
{% style %}
{% render 'nov-section-style' %}
#shopify-section-{{ section.id }} .block-scroll {
animation-duration: {{ sst.time }}s;
--spacing: {{ sst.spacing | divided_by: 10.0 }}rem;
}
#shopify-section-{{ section.id }} .block-scroll__item {
color: var(--color-text);
font-size: {{ sst.t_s | divided_by: 10.0 }}rem;
line-height: {{ sst.t_lh }};
letter-spacing: {{ sst.t_lt }}px;
text-transform: {{ sst.t_tt }};
}
@media(max-width: 991px) {
#shopify-section-{{ section.id }} .block-scroll__item {
font-size: {{ sst.t_s_md | divided_by: 10.0 }}rem;
}
}
{% endstyle %}
{% if section.blocks.size > 0 %}
{% for block in section.blocks %}
{% assign bst = block.settings %}
{% if bst.icon !=blank %}{% endif %}{{ bst.title }}
{% endfor %}
{% for block in section.blocks %}
{% assign bst = block.settings %}
{% if bst.icon_image != blank %}
{{
bst.icon_image
| image_url: width: bst.icon_image.width
| image_tag: width: 100, height: 80
}}
{% elsif bst.icon !=blank %}
{% endif %}{{ bst.title }}
{% endfor %}
{% endif %}
{% schema %}
{
"name": "Vinova Text Scroll",
"settings": [
{
"type": "range",
"id": "time",
"min": 5,
"max": 60,
"step": 1,
"unit": "s",
"label": "Slide run time",
"default": 10
},
{
"type": "range",
"id": "spacing",
"min": 0,
"max": 100,
"step": 5,
"unit": "px",
"label": "Spacing",
"default": 30
},
{
"type": "header",
"content": "Style Item"
},
{
"type": "range",
"id": "t_s",
"min": 10,
"max": 50,
"step": 1,
"label": "Text size",
"default": 13
},
{
"type": "range",
"id": "t_s_md",
"min": 10,
"max": 50,
"step": 1,
"label": "Text size tablet",
"default": 13,
"info": "Breakpoint 991px ↓"
},
{
"type": "select",
"id": "ff",
"label": "Font family",
"default": "f_df",
"options": [
{"value": "f_df","label": "Body font"},
{"value": "f_pr","label": "Heading font"}
]
},
{
"type": "select",
"id": "t_fw",
"label": "Text font weight",
"default": "font-400",
"options": [
{"value": "font-300","label": "Light"},
{"value": "font-400","label": "Regular"},
{"value": "font-500","label": "Medium"},
{"value": "font-600","label": "SemiBold"},
{"value": "font-700","label": "Bold"},
{"value": "font-800","label": "ExtraBold"},
{"value": "font-900","label": "Black"}
]
},
{
"type": "select",
"id": "t_tt",
"label": "Text transform",
"default": "none",
"options": [
{ "value": "capitalize", "label": "Capitalize" },
{ "value": "uppercase", "label": "Uppercase" },
{ "value": "none", "label": "None" }
]
},
{
"type": "text",
"id": "t_lh",
"label": "Text line height",
"default": "1.5"
},
{
"type": "text",
"id": "t_lt",
"label": "Text letter spacing",
"default": "0"
},
{
"type": "checkbox",
"id": "show_dot",
"label": "Show dots",
"default": true
},
{
"type": "header",
"content": "Section Style"
},
{
"type": "checkbox",
"id": "animate",
"label": "Show animated",
"default": true
},
{
"type": "select",
"id": "container",
"label": "Container",
"default": "container",
"options": [
{"value": "container", "label": "Container"},
{"value": "container-fluid", "label": "Container fluid"},
{"value": "container-full", "label": "Container full width"}
]
},
{
"type": "color_scheme",
"id": "color_section",
"label": "Color section",
"default": "background-1"
},
{
"type": "text",
"id": "class_section",
"label": "Class"
},
{
"type": "header",
"content": "Section Background"
},
{
"type": "checkbox",
"id": "ss_bg_enable",
"label": "Enable"
},
{
"type": "color",
"id": "background_color",
"label": "Background colors",
"default": "#ffffff"
},
{
"type": "image_picker",
"id": "background_image",
"label": "Background image"
},
{
"type": "range",
"id": "background_corner",
"min": 0,
"max": 50,
"step": 1,
"label": "Corner background",
"unit": "px",
"default": 0
},
{
"type": "select",
"id": "background_img_size",
"label": "Background image size",
"default": "cover",
"options": [
{ "value": "auto", "label": "Auto" },
{ "value": "cover", "label": "Cover" },
{ "value": "contain", "label": "Contain" }
]
},
{
"type": "checkbox",
"id": "enable_background_img_size_custom",
"label": "Enable background image size custom"
},
{
"type": "number",
"id": "background_img_size_custom",
"label": "Background image size custom",
"info": "Replace base background size, unit %"
},
{
"type": "select",
"id": "background_img_position",
"label": "Background image position",
"default": "center center",
"options": [
{ "value": "top left", "label": "Top left" },
{ "value": "top center", "label": "Top center" },
{ "value": "top right", "label": "Top right" },
{ "value": "center left", "label": "Center left" },
{ "value": "center center", "label": "Center middle" },
{ "value": "center right", "label": "Center right" },
{ "value": "bottom left", "label": "Bottom left" },
{ "value": "bottom center", "label": "Bottom center" },
{ "value": "bottom right", "label": "Bottom right" }
]
},
{
"type": "select",
"id": "background_position",
"label": "Background position",
"default": "bg-center",
"options": [
{ "value": "bg-top", "label": "Top" },
{ "value": "bg-center", "label": "Center" },
{ "value": "bg-bottom", "label": "Bottom" }
]
},
{
"type": "select",
"id": "background_size",
"label": "Background size",
"default": "full",
"options": [
{ "value": "full", "label": "Full" },
{ "value": "contain", "label": "Contain"}
]
},
{
"type": "range",
"id": "height_background_xxl",
"min": 10,
"max": 100,
"step": 1,
"label": "Height background",
"default": 100,
"unit": "%",
"info": "Breakpoint 1441px ↑"
},
{
"type": "range",
"id": "height_background_xl",
"min": 10,
"max": 100,
"step": 1,
"label": "Height background",
"default": 100,
"unit": "%",
"info": "Breakpoint 1200px ↑"
},
{
"type": "range",
"id": "height_background_lg",
"min": 10,
"max": 100,
"step": 1,
"label": "Height background",
"default": 100,
"unit": "%",
"info": "Breakpoint 992px ↑"
},
{
"type": "range",
"id": "height_background_md",
"min": 10,
"max": 100,
"step": 1,
"label": "Height background",
"default": 100,
"unit": "%",
"info": "Breakpoint 768px ↑"
},
{
"type": "range",
"id": "height_background_sm",
"min": 10,
"max": 100,
"step": 1,
"label": "Height background",
"default": 100,
"unit": "%",
"info": "Breakpoint 576px ↑"
},
{
"type": "range",
"id": "height_background_xs",
"min": 10,
"max": 100,
"step": 1,
"label": "Height background",
"default": 100,
"unit": "%",
"info": "Breakpoint 575px ↓"
},
{
"type": "header",
"content": "Spacing Top (px)"
},
{
"type": "number",
"id": "distance_top_xl",
"label": "Large laptop",
"default": 30,
"info": "Breakpoint 1200px"
},
{
"type": "number",
"id": "distance_top_lg",
"label": "Laptop",
"default": 30,
"info": "Breakpoint 992px"
},
{
"type": "number",
"id": "distance_top_md",
"label": "Tablet",
"default": 30,
"info": "Breakpoint 768px"
},
{
"type": "number",
"id": "distance_top_sm",
"label": "Mobile",
"default": 30
},
{
"type": "header",
"content": "Spacing Bottom (px)"
},
{
"type": "number",
"id": "distance_bottom_xl",
"label": "Large laptop",
"default": 30,
"info": "Breakpoint 1200px"
},
{
"type": "number",
"id": "distance_bottom_lg",
"label": "Laptop",
"default": 30,
"info": "Breakpoint 992px"
},
{
"type": "number",
"id": "distance_bottom_md",
"label": "Tablet",
"default": 30,
"info": "Breakpoint 768px"
},
{
"type": "number",
"id": "distance_bottom_sm",
"label": "Mobile",
"default": 30
}
],
"blocks": [
{
"type": "item",
"name": "Item",
"settings": [
{
"type": "text",
"id": "icon",
"label": "Icon text",
"default": "zmdi zmdi-flash",
"info": "[Get the icon here](https:\/\/zavoloklom.github.io\/material-design-iconic-font\/icons.html)"
},
{
"type": "image_picker",
"id": "icon_image",
"label": "Icon image",
"info": "Leave blank if you want to use icon text"
},
{
"type": "richtext",
"id": "title",
"label": "Item text",
"default": "
New Offers on the COVID-19. This Weekend only to Get 50% Flate
"
}
]
}
],
"presets": [
{
"name": "Vinova Text Scroll",
"category": "Text",
"blocks": [
{
"type": "item"
},
{
"type": "item"
},
{
"type": "item"
}
]
}
]
}
{% endschema %}
For some reason, it’s creating a duplicate for every text line without the icon, I have 5 lines with all same text and icons but it created 5 more text lines without icons and it’s displaying first when the section appears. Why’s it happening?
Hi @growsta_co ,
Please change all code:
{%- liquid
assign sst = section.settings
if section.settings.ss_bg_enable
assign bg = " bg"
endif
if section.settings.class_section != blank
assign class_section = section.settings.class_section | prepend: ' '
endif
assign class = 'distance' | append: bg | append: ' ' | append: section.settings.background_position | append: class_section
if section.settings.background_size == 'full'
assign bg_class_full = class | prepend: ' '
else
assign bg_class_contain = class | prepend: ' '
endif
-%}
{% style %}
{% render 'nov-section-style' %}
#shopify-section-{{ section.id }} .block-scroll {
animation-duration: {{ sst.time }}s;
--spacing: {{ sst.spacing | divided_by: 10.0 }}rem;
}
#shopify-section-{{ section.id }} .block-scroll__item {
color: var(--color-text);
font-size: {{ sst.t_s | divided_by: 10.0 }}rem;
line-height: {{ sst.t_lh }};
letter-spacing: {{ sst.t_lt }}px;
text-transform: {{ sst.t_tt }};
}
@media(max-width: 991px) {
#shopify-section-{{ section.id }} .block-scroll__item {
font-size: {{ sst.t_s_md | divided_by: 10.0 }}rem;
}
}
{% endstyle %}
{% if section.blocks.size > 0 %}
{% for block in section.blocks %}
{% assign bst = block.settings %}
{% if bst.icon_image != blank %}
{{
bst.icon_image
| image_url: width: bst.icon_image.width
| image_tag: width: 100, height: 80
}}
{% elsif bst.icon !=blank %}
{% endif %}{{ bst.title }}
{% endfor %}
{% for block in section.blocks %}
{% assign bst = block.settings %}
{% if bst.icon_image != blank %}
{{
bst.icon_image
| image_url: width: bst.icon_image.width
| image_tag: width: 100, height: 80
}}
{% elsif bst.icon !=blank %}
{% endif %}{{ bst.title }}
{% endfor %}
{% endif %}
{% schema %}
{
"name": "Vinova Text Scroll",
"settings": [
{
"type": "range",
"id": "time",
"min": 5,
"max": 60,
"step": 1,
"unit": "s",
"label": "Slide run time",
"default": 10
},
{
"type": "range",
"id": "spacing",
"min": 0,
"max": 100,
"step": 5,
"unit": "px",
"label": "Spacing",
"default": 30
},
{
"type": "header",
"content": "Style Item"
},
{
"type": "range",
"id": "t_s",
"min": 10,
"max": 50,
"step": 1,
"label": "Text size",
"default": 13
},
{
"type": "range",
"id": "t_s_md",
"min": 10,
"max": 50,
"step": 1,
"label": "Text size tablet",
"default": 13,
"info": "Breakpoint 991px ↓"
},
{
"type": "select",
"id": "ff",
"label": "Font family",
"default": "f_df",
"options": [
{"value": "f_df","label": "Body font"},
{"value": "f_pr","label": "Heading font"}
]
},
{
"type": "select",
"id": "t_fw",
"label": "Text font weight",
"default": "font-400",
"options": [
{"value": "font-300","label": "Light"},
{"value": "font-400","label": "Regular"},
{"value": "font-500","label": "Medium"},
{"value": "font-600","label": "SemiBold"},
{"value": "font-700","label": "Bold"},
{"value": "font-800","label": "ExtraBold"},
{"value": "font-900","label": "Black"}
]
},
{
"type": "select",
"id": "t_tt",
"label": "Text transform",
"default": "none",
"options": [
{ "value": "capitalize", "label": "Capitalize" },
{ "value": "uppercase", "label": "Uppercase" },
{ "value": "none", "label": "None" }
]
},
{
"type": "text",
"id": "t_lh",
"label": "Text line height",
"default": "1.5"
},
{
"type": "text",
"id": "t_lt",
"label": "Text letter spacing",
"default": "0"
},
{
"type": "checkbox",
"id": "show_dot",
"label": "Show dots",
"default": true
},
{
"type": "header",
"content": "Section Style"
},
{
"type": "checkbox",
"id": "animate",
"label": "Show animated",
"default": true
},
{
"type": "select",
"id": "container",
"label": "Container",
"default": "container",
"options": [
{"value": "container", "label": "Container"},
{"value": "container-fluid", "label": "Container fluid"},
{"value": "container-full", "label": "Container full width"}
]
},
{
"type": "color_scheme",
"id": "color_section",
"label": "Color section",
"default": "background-1"
},
{
"type": "text",
"id": "class_section",
"label": "Class"
},
{
"type": "header",
"content": "Section Background"
},
{
"type": "checkbox",
"id": "ss_bg_enable",
"label": "Enable"
},
{
"type": "color",
"id": "background_color",
"label": "Background colors",
"default": "#ffffff"
},
{
"type": "image_picker",
"id": "background_image",
"label": "Background image"
},
{
"type": "range",
"id": "background_corner",
"min": 0,
"max": 50,
"step": 1,
"label": "Corner background",
"unit": "px",
"default": 0
},
{
"type": "select",
"id": "background_img_size",
"label": "Background image size",
"default": "cover",
"options": [
{ "value": "auto", "label": "Auto" },
{ "value": "cover", "label": "Cover" },
{ "value": "contain", "label": "Contain" }
]
},
{
"type": "checkbox",
"id": "enable_background_img_size_custom",
"label": "Enable background image size custom"
},
{
"type": "number",
"id": "background_img_size_custom",
"label": "Background image size custom",
"info": "Replace base background size, unit %"
},
{
"type": "select",
"id": "background_img_position",
"label": "Background image position",
"default": "center center",
"options": [
{ "value": "top left", "label": "Top left" },
{ "value": "top center", "label": "Top center" },
{ "value": "top right", "label": "Top right" },
{ "value": "center left", "label": "Center left" },
{ "value": "center center", "label": "Center middle" },
{ "value": "center right", "label": "Center right" },
{ "value": "bottom left", "label": "Bottom left" },
{ "value": "bottom center", "label": "Bottom center" },
{ "value": "bottom right", "label": "Bottom right" }
]
},
{
"type": "select",
"id": "background_position",
"label": "Background position",
"default": "bg-center",
"options": [
{ "value": "bg-top", "label": "Top" },
{ "value": "bg-center", "label": "Center" },
{ "value": "bg-bottom", "label": "Bottom" }
]
},
{
"type": "select",
"id": "background_size",
"label": "Background size",
"default": "full",
"options": [
{ "value": "full", "label": "Full" },
{ "value": "contain", "label": "Contain"}
]
},
{
"type": "range",
"id": "height_background_xxl",
"min": 10,
"max": 100,
"step": 1,
"label": "Height background",
"default": 100,
"unit": "%",
"info": "Breakpoint 1441px ↑"
},
{
"type": "range",
"id": "height_background_xl",
"min": 10,
"max": 100,
"step": 1,
"label": "Height background",
"default": 100,
"unit": "%",
"info": "Breakpoint 1200px ↑"
},
{
"type": "range",
"id": "height_background_lg",
"min": 10,
"max": 100,
"step": 1,
"label": "Height background",
"default": 100,
"unit": "%",
"info": "Breakpoint 992px ↑"
},
{
"type": "range",
"id": "height_background_md",
"min": 10,
"max": 100,
"step": 1,
"label": "Height background",
"default": 100,
"unit": "%",
"info": "Breakpoint 768px ↑"
},
{
"type": "range",
"id": "height_background_sm",
"min": 10,
"max": 100,
"step": 1,
"label": "Height background",
"default": 100,
"unit": "%",
"info": "Breakpoint 576px ↑"
},
{
"type": "range",
"id": "height_background_xs",
"min": 10,
"max": 100,
"step": 1,
"label": "Height background",
"default": 100,
"unit": "%",
"info": "Breakpoint 575px ↓"
},
{
"type": "header",
"content": "Spacing Top (px)"
},
{
"type": "number",
"id": "distance_top_xl",
"label": "Large laptop",
"default": 30,
"info": "Breakpoint 1200px"
},
{
"type": "number",
"id": "distance_top_lg",
"label": "Laptop",
"default": 30,
"info": "Breakpoint 992px"
},
{
"type": "number",
"id": "distance_top_md",
"label": "Tablet",
"default": 30,
"info": "Breakpoint 768px"
},
{
"type": "number",
"id": "distance_top_sm",
"label": "Mobile",
"default": 30
},
{
"type": "header",
"content": "Spacing Bottom (px)"
},
{
"type": "number",
"id": "distance_bottom_xl",
"label": "Large laptop",
"default": 30,
"info": "Breakpoint 1200px"
},
{
"type": "number",
"id": "distance_bottom_lg",
"label": "Laptop",
"default": 30,
"info": "Breakpoint 992px"
},
{
"type": "number",
"id": "distance_bottom_md",
"label": "Tablet",
"default": 30,
"info": "Breakpoint 768px"
},
{
"type": "number",
"id": "distance_bottom_sm",
"label": "Mobile",
"default": 30
}
],
"blocks": [
{
"type": "item",
"name": "Item",
"settings": [
{
"type": "text",
"id": "icon",
"label": "Icon text",
"default": "zmdi zmdi-flash",
"info": "[Get the icon here](https:\/\/zavoloklom.github.io\/material-design-iconic-font\/icons.html)"
},
{
"type": "image_picker",
"id": "icon_image",
"label": "Icon image",
"info": "Leave blank if you want to use icon text"
},
{
"type": "richtext",
"id": "title",
"label": "Item text",
"default": "
New Offers on the COVID-19. This Weekend only to Get 50% Flate
"
}
]
}
],
"presets": [
{
"name": "Vinova Text Scroll",
"category": "Text",
"blocks": [
{
"type": "item"
},
{
"type": "item"
},
{
"type": "item"
}
]
}
]
}
{% endschema %}