Hi, I am trying to add a second announcement bar. I saw someone else has asked a similar question but they were advised to install an app. I would like to avoid that if I can as I’m trying to keep my adds as simple as possible so my store doesn’t slow down. Is there simple HTML/CSS I can add?
Hey, @Netherlands16
I’m not formally trained in code to provide you with an exact solution to code in additional announcement bar banners into your theme without an app. However, I’m confident one of our Shopify experts would be able to accomplish this at a reasonable price.
If there is anything else I can help you with, please let me know.
Hi Dirk, I felt like this was probably a relatively simple code question so I don’t want to have to pay for a consultation just for an announcement banner. I see on other questions the Shopify responders offer simple code solutions. Is my question to complicated for that? I really just want html/css advice.
1 Like
can you please share your header section code so i will check and let you know
Hello Ketan, this is what I pulled from the header.liquid section of my page’s code. I hope it is what you need. If it is not I will go back and look again.
{%- liquid
assign align_search_left = false
assign align_search_center = false
if section.settings.logo_location == ‘toolbar’ and section.settings.header_layout == ‘center’ and section.settings.search_bar contains “input”
assign align_search_left = true
elsif section.settings.logo_location != ‘toolbar’ and section.settings.search_bar contains “input”
assign align_search_left = true
endif
if section.settings.logo_location == ‘toolbar’ and section.settings.header_layout == ‘left’ and section.settings.search_bar contains “input”
assign align_search_center = true
endif
if search
assign search_terms = search.terms | escape
endif
-%}
{%- style -%}
{%- if section.settings.logo != blank -%}
.logo img {
width: {{ section.settings.mobile_logo_width }}px;
}
@media (min-width: 768px) {
.logo img {
width: {{ section.settings.logo_width }}px;
}
}
{%- endif -%}
{%- if section.settings.sticky_header -%}
.section-header {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 99999;
}
{%- endif -%}
{%- endstyle-%}
{% if template == ‘gift_card’ %}
{% comment %} Gift card template logo {% endcomment %}
{% if section.settings.logo != blank %}
{% capture img_size %}{{ section.settings.logo_width | times: 2 }}x{% endcapture %}
![{{ section.settings.logo.alt | escape }}]()
{% endcapture %}
{% if section.settings.compact_logo %}
{% endif %}
{% else %}
{{ shop.name }}
{% endif %}
{% capture search_form %}
{%- assign show_search_suggestions = false -%}
{%- if section.settings.search_suggestions_title != blank or section.settings.search_suggestions_menu != blank -%}
{%- assign show_search_suggestions = true -%}
{%- endif -%}
data-live-search=“{{ settings.enable_live_search }}”
data-live-search-price=“{{ settings.live_search_show_price }}”
data-live-search-vendor=“{{ settings.live_search_show_vendor }}”
data-live-search-meta=“{{ settings.live_search_search_meta }}”
data-show-sold-out-label=“{{ settings.label_soldout_show }}”
data-show-sale-label=“{{ settings.label_sale_show }}”>
{% if section.settings.search_type_dropdown and shop.types %}
{% endif %}
{% render 'svg-search' %}
{% endcapture %}
{%- assign featured_links = section.settings.nav_featured_link | split: ', ' -%}
{% endif %}
{%- if section.settings.header_layout == ‘left’ -%}
{%- if section.settings.logo_location == ‘toolbar’ -%}
{{ logo_html }}
{%- else -%}
{{ logo_html }}
{%- endif -%}
{%- endif -%}
{% if align_search_left %}
{{ search_form }}
{% endif %}
{% if section.settings.header_layout == ‘center’ %}
{% if section.settings.logo_location == 'toolbar' %}
{% endif %}
{{ logo_html }}
{%- else -%}
{{ logo_html }}
{%- endif -%}
{% if align_search_center %}
{{ search_form }}
{% endif %}
{% assign show_search_icon = false %}
{% if section.settings.search_bar != "none" %}
{% if section.settings.search_bar != "input" %}
{% assign show_search_icon = true %}
{% endif %}
{% endif %}
{% if section.settings.search_bar == “icon” %}
{% render 'svg-search' %}
{{ search_form }}
{% elsif show_search_icon %}
{% render 'svg-search' %}
{{ search_form }}
{% endif %}
{% if shop.customer_accounts_enabled %}
{% render ‘svg-account’ %}
{% endif %}
{% if cart.item_count > 0 %}
{{ cart.item_count }}
{% endif %}
{% if section.settings.search_bar == “input” %}
{{ search_form }}
{% endif %}
{% if section.settings.logo_location == "inbetween" %}
{{ logo_html }}
{% endif %}
{% unless section.settings.menu_linklist == blank %}
{% render ‘main-navigation’, logo_html: logo_html, featured_links: featured_links %}
{% endunless %}
{% schema %}
{
“name”: “Header”,
“class”: “section-header”,
“settings”: [
{
“type”: “header”,
“content”: “Layout”
},
{
“type”: “checkbox”,
“id”: “sticky_header”,
“label”: “Enable sticky header”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “social_links_mob”,
“label”: “Show social media links on mobile”,
“default”: true,
“info”: “The setting for social media links on desktop can be found in the Announcement Bar settings.”
},
{
“type”: “header”,
“content”: “Logo”
},
{
“type”: “image_picker”,
“id”: “logo”,
“label”: “Desktop logo”,
“info”: “300 x 200px recommended”
},
{
“type”: “image_picker”,
“id”: “compact_logo”,
“label”: “Mobile logo”
},
{
“type”: “range”,
“id”: “logo_width”,
“min”: 50,
“max”: 250,
“step”: 5,
“label”: “Desktop logo width”,
“default”: 140,
“unit”: “px”
},
{
“type”: “range”,
“id”: “mobile_logo_width”,
“min”: 30,
“max”: 170,
“step”: 5,
“label”: “Mobile logo width”,
“default”: 85,
“unit”: “px”
},
{
“type”: “select”,
“id”: “logo_location”,
“label”: “Logo location”,
“options”: [{
“value”: “toolbar”,
“label”: “Toolbar”
},
{
“value”: “links”,
“label”: “Menu links”
}
],
“default”: “toolbar”
},
{
“type”: “select”,
“id”: “header_layout”,
“label”: “Logo alignment”,
“options”: [{
“value”: “center”,
“label”: “Center”
},
{
“value”: “left”,
“label”: “Left”
}
],
“default”: “left”
},
{
“type”: “header”,
“content”: “Navigation”
},
{
“type”: “link_list”,
“id”: “menu_linklist”,
“label”: “Menu”,
“default”: “main-menu”,
“info”: “To create a mega menu, ensure every link within your menu has child links Learn more”
},
{
“type”: “select”,
“id”: “mobile_parent_text_tap”,
“label”: “On mobile, tapping the link text of menu items with sub menus will”,
“options”: [{
“value”: “page”,
“label”: “Go to the page”
},
{
“value”: “drilldown”,
“label”: “Open the sub menu”
}
],
“default”: “drilldown”
},
{
“type”: “select”,
“id”: “nav_alignment”,
“label”: “Menu links alignment”,
“options”: [{
“value”: “center”,
“label”: “Center”
},
{
“value”: “left”,
“label”: “Left”
}
],
“default”: “left”
},
{
“type”: “range”,
“id”: “nav_col_limit_int”,
“min”: 3,
“max”: 14,
“step”: 1,
“label”: “Maximum number of links per column”,
“info”: “Does not apply to full-width dropdown”,
“default”: 8
},
{
“type”: “text”,
“id”: “nav_featured_link”,
“label”: “Featured link”,
“info”: “Use a different color to highlight this link”,
“default”: “Sale”
},
{
“type”: “header”,
“content”: “Toolbar options”
},
{
“type”: “select”,
“id”: “cart_icon”,
“label”: “Cart icon”,
“options”: [
{
“value”: “basket2”,
“label”: “Basket”
},
{
“value”: “cart”,
“label”: “Shopping cart”
}
],
“default”: “basket2”
},
{
“type”: “header”,
“content”: “Search”
},
{
“type”: “select”,
“id”: “search_bar”,
“label”: “Search appearance”,
“options”: [{
“value”: “icon”,
“label”: “Icon”
},
{
“value”: “input”,
“label”: “Search box”
},
{
“value”: “input_desktop”,
“label”: “Icon on mobile, search box on desktop”
},
{
“value”: “none”,
“label”: “None”
}
],
“default”: “input”
},
{
“type”: “checkbox”,
“id”: “search_text_box_large”,
“label”: “Enlarge search box on desktop”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “search_type_dropdown”,
“label”: “Show product type dropdown”,
“info”: “This will show all the product types (you cannot exclude particular ones). If enabled, you should also add the Product Type filter to your search page within the navigation page.”,
“default”: true
}
],
“blocks”: [{
“type”: “menu_promotion”,
“name”: “Menu promotion”,
“settings”: [{
“type”: “paragraph”,
“content”: “Menu promotions are shown in dropdown menus. They are not visible in the mobile menu.”
},
{
“type”: “text”,
“id”: “dropdown_link_title”,
“label”: “Dropdown link title”,
“info”: “Enter a dropdown menu item title to display the menu promotion on, e.g. ‘Shop’. Learn more”
},
{
“type”: “image_picker”,
“id”: “image”,
“label”: “Image”
},
{
“type”: “text”,
“id”: “text”,
“label”: “Text”
},
{
“type”: “url”,
“id”: “link_url”,
“label”: “Link”
}
]
}]
}
{% endschema %}
Hello Ketan, did you have an idea of how I can make the banner?
Hi @Netherlands16 - you’re correct, this is a fairly simple issue to solve. If your theme is on the online store 2.0 solution it’d be even faster.
A good developer would do this in 15-30 minutes, so in my opinion, it may be better to find someone to do it than waste too much time trying to do it yourself. In this case, a consultation may also turn out to be more expensive than simply paying a seasoned expert to do it quickly.