I’ve used the AI assistant but it can’t quite seem to figure it out to try and remove the html coding on the top bar above my social media links. Need help please!
Of course Sidekick can’t help you, because you have a third party theme, and a third party page builder, it’s beyond its scope.
Did you try to undo whatever you did that put it there? Or look in the main theme file near the <body tag? Or revert to a theme version that doesn’t have it?
You need to share at least a preview link to this theme.
Otherwise its a guessing game.
It happened with an update to the theme file, before it wasn’t there
Do I remove all the rows highlighted in red?
You can always try and undo. 
These are:
- CSS rule to shift down your menu (it aligns with icons without this rule)
- Javascript code to set
Storevariable, but this does not seem to be used…
So I’d try to remove the 2 lines which has ```, 21 and 29 in the screenshot.
Also – adding something like below to the “Custom CSS” should help aligning social icons with text.
.top-bar .footer__heading {
margin-bottom: -2px;
}
I was hoping removing line 21 and 29 would work but it didn’t unfortunately
Now there is also line 55 and 61.
Looks like the residuals of the update process which went not as expected. And if it is, then other files may be affected also.
I’d try to run the update process again – I have no touched their updater app in years, but I hope they do keep the original theme intact and create an updated copy.
It sounds like the top bar is displaying the HTML as text instead of rendering it.
Go to Online Store → Themes → Edit code and check the file that controls your top bar (usually header.liquid or announcement-bar.liquid). Most often, this happens because the content is being escaped (for example using | escape) or added to a plain text field instead of a rich text/HTML field.
Remove any escaping filter or move the code into the correct section, and it should render properly. If you share the exact code showing above the social links, I can point you to the exact line to adjust.
I’m just looking at the edit code, I have one that says “announcement-bar.liquid”
{% comment %}
** Announcement bar - static **
{% endcomment %}
{% liquid
assign id = section.id
assign icon = section.settings.icon_label | downcase
assign size = section.settings.size
assign text_color = section.settings.text_color
assign show_close_icon = section.settings.show_close_icon
Is the color set to transparent?
assign text_alpha = text_color | color_extract: ‘alpha’
%}
{% comment %} Section specific CSS {% endcomment %}
{% capture section_css -%}
.announcement-bar {
background-color: {{ section.settings.background }};
}
.announcement-bar__icon {
fill: {{ text_color }};
}
.announcement-bar__close {
fill: {{ text_color }};
background-color: {{ text_color | color_modify: ‘alpha’, 0.1 }};
}
.announcement-bar__close:hover {
background-color: {{ text_color | color_modify: ‘alpha’, 0.2 }};
}
.message-header {
color: {% if text_alpha != 0 %}{{ text_color }}{% else %}{{ settings.regular_color }}{% endif %};
}
{%- endcapture -%}
{% style %}
{%
render ‘css-loop’,
css: section_css,
id: id,
%}
{%
render ‘css-loop’,
css: section.settings.custom_css,
id: id,
%}
{% endstyle %}
{% capture announcement %}
{% if section.settings.icon_label != blank %}
{%
render 'icon',
name: icon,
%}
{% endif %}
{% endcapture %}
<div class="announcement-bar__text text-align-{{ section.settings.alignment }}">
{% if section.settings.text != blank %}
<div class="is-hidden-mobile-only">
{{- section.settings.text -}}
</div>
{% endif %}
<div class="is-hidden-desktop-only">
{% if section.settings.mobile_text != blank %}
{{- section.settings.mobile_text -}}
{% else %}
{{- section.settings.text -}}
{% endif %}
</div>
<p class="buttons">
{% if section.settings.button_label != blank %}
{%
render 'button',
label: section.settings.button_label,
href: section.settings.link,
type: "link",
style: section.settings.button_style,
%}
{% endif %}
</p>
</div>
</div>
{% if show_close_icon %}
<button
class="
close
announcement-bar__close
js-close-announcement
"
aria-label="close"
>
{%
render 'icon',
name: 'x',
%}
</button>
{% endif %}
</div>
</div>
</div>
<div
class="announcement-bar__shadow"
id="announcement-bar__shadow"
aria-visible="false"
>
</div>
{% if section.settings.homepage_only %}
{% if template.name == ‘index’ %}
{{ announcement }}
{% endif %}
{% else %}
{{ announcement }}
{% endif %}
{% comment %}Javascript{% endcomment %}
{% schema %}
{
“name”: “Announcement”,
“class”: “announcement-container jsAnnouncementBar”,
“settings”: [
{
“type”: “checkbox”,
“id”: “homepage_only”,
“label”: “Show on home page only”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “enable_sticky”,
“label”: “Enable sticky on scroll”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “show_close_icon”,
“label”: “Show close icon”,
“default”: true
},
{
“type”: “header”,
“content”: “Text”
},
{
“type”: “text”,
“id”: “icon_label”,
“label”: “Icon”,
“placeholder”: “Enter icon name”,
“info”: “Icon list”,
“default”: “tag”
},
{
“type”: “richtext”,
“id”: “text”,
“label”: “Text”,
“default”: “
Draw attention to promos + sales!
”},
{
“type”: “richtext”,
“id”: “mobile_text”,
“label”: “Text (mobile)”,
“info”: “Optional. Use this input to show alternate text on mobile.”
},
{
“type”: “select”,
“id”: “alignment”,
“label”: “Text alignment”,
“options”: [
{
“value”: “start”,
“label”: “Left”
},
{
“value”: “center”,
“label”: “Center”
}
],
“default”: “center”
},
{
“type”: “select”,
“id”: “size”,
“label”: “Base size”,
“options”: [
{
“value”: “small”,
“label”: “Small”
},
{
“value”: “regular”,
“label”: “Regular”
},
{
“value”: “large”,
“label”: “Large”
}
],
“default”: “regular”
},
{
“type”: “header”,
“content”: “Button”
},
{
“type”: “text”,
“id”: “button_label”,
“label”: “Button label”
},
{
“type”: “url”,
“id”: “link”,
“label”: “Button link”
},
{
“type”: “select”,
“id”: “button_style”,
“label”: “Button style”,
“options”: [
{
“value”: “button–primary”,
“label”: “Primary”
},
{
“value”: “button–secondary”,
“label”: “Secondary”
},
{
“value”: “button–link-style”,
“label”: “Link style”
}
],
“default”: “button–primary”
},
{
“type”: “header”,
“content”: “Colors”
},
{
“type”: “color”,
“id”: “background”,
“label”: “Background”,
“default”: “#000000”
},
{
“type”: “color”,
“id”: “text_color”,
“label”: “Text”,
“default”: “#FFFFFF”
},
{
“type”: “header”,
“content”: “Layout”
},
{
“type”: “select”,
“id”: “width”,
“label”: “Width”,
“default”: “wide”,
“options”: [
{
“value”: “standard”,
“label”: “Standard”
},
{
“value”: “wide”,
“label”: “Wide”
}
]
},
{
“type”: “header”,
“content”: “Advanced”,
“info”: “Learn more”
},
{
“type”: “text”,
“id”: “css_class”,
“label”: “CSS Class”
},
{
“type”: “textarea”,
“id”: “custom_css”,
“label”: “Custom CSS”
}
]
}
{% endschema %}
Sorry not sure if it worked to paste the code but let me know what’s easiest for you
You should use the </> button to paste code, otherwise it would be mangled by the forum engine.
You still have this code I mentioned in the reply above.
Based on the output, it’s not in your announcement bar, rather between <head> and </head>
Theme code editor has a “global search” function which you can use to find the broken code.
It’s hard to pinpoint the location from the outside since Flex is a paid theme.
Ok, I tried a couple things but this is so foreign to me. Any chance I could get you access to have a look for me?
Hey @mrs_mccann
It’s not in your announcement bar file, it’s in the theme.liquid
Open that file and just search for the word “html”. You’ll find it. Happy to help if you’re still struggling to remove it.
Best,
Moeed
Amazing! Got it, thanks for the help!