announcement banner showing in back end but not front end

announcement banner showing in back end but not front end

Agnesathletica
Visitor
1 0 0

Hi Shopify Community,

 

Im about to launch my new business in 10 minutes.

The announcement banner keeps showing in the back end but not the front end. Can somebody please help? 

 

Thanks

Replies 12 (12)

webwondersco
Shopify Partner
1200 171 174

@Agnesathletica hope you are doing well.

 

Could you please share your store URL?

Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
- a small Coffee Tip would be greatly appreciated. :)..! Instagram
ramo2200
New Member
9 0 0

I got same problem, please help

webwondersco
Shopify Partner
1200 171 174

@ramo2200 could you please share your store URL?  and also share the screenshot of issue for a better understanding

Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
- a small Coffee Tip would be greatly appreciated. :)..! Instagram
ramo2200
New Member
9 0 0

Skærmbillede 2024-02-12 kl. 10.10.55.pngSkærmbillede 2024-02-12 kl. 10.10.16.pnge950db-3.myshopify.com

webwondersco
Shopify Partner
1200 171 174

@ramo2200 From the front end side am not able to see any code related to the announcement bar.

 

am able to see your theme code if possible?

Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
- a small Coffee Tip would be greatly appreciated. :)..! Instagram
ramo2200
New Member
9 0 0

Do you want to see theme code of annoucment bar?

ramo2200
New Member
9 0 0

{{ 'component-slideshow.css' | asset_url | stylesheet_tag }}
{{ 'component-slider.css' | asset_url | stylesheet_tag }}

{%- liquid
assign social_icons = true
if settings.social_facebook_link == blank and settings.social_instagram_link == blank and settings.social_youtube_link == blank and settings.social_tiktok_link == blank and settings.social_twitter_link == blank and settings.social_pinterest_link == blank and settings.social_snapchat_link == blank and settings.social_tumblr_link == blank and settings.social_vimeo_link == blank
assign social_icons = false
endif
if section.settings.enable_country_selector or section.settings.enable_language_selector
assign language_country_selector = true
endif
if section.blocks.size > 0
assign announcement_bar = true
endif
-%}

{% if social_icons %}
{{ 'component-list-social.css' | asset_url | stylesheet_tag }}
{% endif %}

<div
class="utility-bar color-{{ section.settings.color_scheme }} gradient{% if section.settings.show_line_separator and section.blocks.size > 0 %} utility-bar--bottom-border{% elsif section.settings.show_line_separator and section.settings.show_social and social_icons%} utility-bar--bottom-border-social-only{% endif %}{% if section.settings.enable_country_selector or section.settings.enable_language_selector %} header-localization{% endif %}"
{{ block.shopify_attributes }}
>
<div class="page-width utility-bar__grid{% if announcement_bar and language_country_selector or section.settings.show_social and social_icons %} utility-bar__grid--3-col{% elsif language_country_selector or section.settings.show_social and social_icons %} utility-bar__grid--2-col{% endif %}">
{%- if section.settings.show_social and social_icons -%}
{%- render 'social-icons' -%}
{%- endif -%}
{%- if section.blocks.size == 1 -%}
<div
class="announcement-bar{% if section.settings.show_social %} announcement-bar--one-announcement{% endif %}"
role="region"
aria-label="{{ 'sections.header.announcement' | t }}"
{{ block.shopify_attributes }}
>
{%- if section.blocks.first.settings.text != blank -%}
{%- if section.blocks.first.settings.link != blank -%}
<a
href="{{ section.blocks.first.settings.link }}"
class="announcement-bar__link link link--text focus-inset animate-arrow"
>
{%- endif -%}
<p class="announcement-bar__message h5">
<span>{{ section.blocks.first.settings.text | escape }}</span>
{%- if section.blocks.first.settings.link != blank -%}
{% render 'icon-arrow' %}
{%- endif -%}
</p>
{%- if section.blocks.first.settings.link != blank -%}
</a>
{%- endif -%}
{%- endif -%}
</div>
{%- elsif section.blocks.size > 1 -%}
<slideshow-component
class="announcement-bar"
role="region"
aria-roledescription="{{ 'sections.announcements.carousel' | t }}"
aria-label="{{ 'sections.announcements.announcement_bar' | t }}"
>
<div class="announcement-bar-slider slider-buttons">
<button
type="button"
class="slider-button slider-button--prev"
name="previous"
aria-label="{{ 'sections.announcements.previous_announcement' | t }}"
aria-controls="Slider-{{ section.id }}"
>
{% render 'icon-caret' %}
</button>
<div
class="grid grid--1-col slider slider--everywhere"
id="Slider-{{ section.id }}"
aria-live="polite"
aria-atomic="true"
data-autoplay="{{ section.settings.auto_rotate }}"
data-speed="{{ section.settings.change_slides_speed }}"
>
{%- for block in section.blocks -%}
<div
class="slideshow__slide slider__slide grid__item grid--1-col"
id="Slide-{{ section.id }}-{{ forloop.index }}"
{{ block.shopify_attributes }}
role="group"
aria-roledescription="{{ 'sections.announcements.announcement' | t }}"
aria-label="{{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}"
tabindex="-1"
>
<div
class="announcement-bar__announcement"
role="region"
aria-label="{{ 'sections.header.announcement' | t }}"
{{ block.shopify_attributes }}
>
{%- if block.settings.text != blank -%}
{%- if block.settings.link != blank -%}
<a
href="{{ block.settings.link }}"
class="announcement-bar__link link link--text focus-inset animate-arrow"
>
{%- endif -%}
<p class="announcement-bar__message h5">
<span>{{ block.settings.text | escape }}</span>
{%- if block.settings.link != blank -%}
{% render 'icon-arrow' %}
{%- endif -%}
</p>
{%- if block.settings.link != blank -%}
</a>
{%- endif -%}
{%- endif -%}
</div>
</div>
{%- endfor -%}
</div>
<button
type="button"
class="slider-button slider-button--next"
name="next"
aria-label="{{ 'sections.announcements.next_announcement' | t }}"
aria-controls="Slider-{{ section.id }}"
>
{% render 'icon-caret' %}
</button>
</div>
</slideshow-component>
{%- if request.design_mode -%}
<script src="{{ 'theme-editor.js' | asset_url }}" defer="defer"></script>
<style>
/* theme editor power preview fix */
.announcement-bar-slider .slider__slide[aria-hidden='true'] {
visibility: hidden;
}
</style>
{%- endif -%}
{%- endif -%}
<div class="localization-wrapper">
{%- if section.settings.enable_country_selector and localization.available_countries.size > 1 -%}
<noscript class="small-hide medium-hide">
{%- form 'localization', id: 'AnnouncementCountryMobileFormNoScript', class: 'localization-form' -%}
<div class="localization-form__select">
<h2 class="visually-hidden" id="AnnouncementCountryMobileLabelNoScript">
{{ 'localization.country_label' | t }}
</h2>
<select
class="localization-selector link"
name="country_code"
aria-labelledby="AnnouncementCountryMobileLabelNoScript"
>
{%- for country in localization.available_countries -%}
<option
value="{{ country.iso_code }}"
{%- if country.iso_code == localization.country.iso_code %}
selected
{% endif %}
>
{{ country.name }} ({{ country.currency.iso_code }}
{{ country.currency.symbol }})
</option>
{%- endfor -%}
</select>
{% render 'icon-caret' %}
</div>
<button class="button button--tertiary">{{ 'localization.update_country' | t }}</button>
{%- endform -%}
</noscript>

<localization-form class="small-hide medium-hide no-js-hidden">
{%- form 'localization', id: 'AnnouncementCountryForm', class: 'localization-form' -%}
<div>
<h2 class="visually-hidden" id="AnnouncementCountryLabel">{{ 'localization.country_label' | t }}</h2>
{%- render 'country-localization', localPosition: 'AnnouncementCountry' -%}
</div>
{%- endform -%}
</localization-form>
{% endif %}

{%- if section.settings.enable_language_selector and localization.available_languages.size > 1 -%}
<noscript class="small-hide medium-hide">
{%- form 'localization', id: 'AnnouncementLanguageMobileFormNoScript', class: 'localization-form' -%}
<div class="localization-form__select">
<h2 class="visually-hidden" id="AnnouncementLanguageMobileLabelNoScript">
{{ 'localization.language_label' | t }}
</h2>
<select
class="localization-selector link"
name="locale_code"
aria-labelledby="AnnouncementLanguageMobileLabelNoScript"
>
{%- for language in localization.available_languages -%}
<option
value="{{ language.iso_code }}"
lang="{{ language.iso_code }}"
{%- if language.iso_code == localization.language.iso_code %}
selected
{% endif %}
>
{{ language.endonym_name | capitalize }}
</option>
{%- endfor -%}
</select>
{% render 'icon-caret' %}
</div>
<button class="button button--tertiary">{{ 'localization.update_language' | t }}</button>
{%- endform -%}
</noscript>

<localization-form class="small-hide medium-hide no-js-hidden">
{%- form 'localization', id: 'AnnouncementLanguageForm', class: 'localization-form' -%}
<div>
<h2 class="visually-hidden" id="AnnouncementLanguageLabel">{{ 'localization.language_label' | t }}</h2>
{%- render 'language-localization', localPosition: 'AnnouncementLanguage' -%}
</div>
{%- endform -%}
</localization-form>
{%- endif -%}
</div>
</div>
</div>

{% schema %}
{
"name": "t:sections.announcement-bar.name",
"max_blocks": 12,
"class": "announcement-bar-section",
"enabled_on": {
"groups": ["header"]
},
"settings": [
{
"type": "color_scheme",
"id": "color_scheme",
"label": "t:sections.all.colors.label",
"default": "scheme-4"
},
{
"type": "checkbox",
"id": "show_line_separator",
"default": true,
"label": "t:sections.header.settings.show_line_separator.label"
},
{
"type": "header",
"content": "t:sections.announcement-bar.settings.header__1.content",
"info": "t:sections.announcement-bar.settings.header__1.info"
},
{
"type": "checkbox",
"id": "show_social",
"default": false,
"label": "t:sections.announcement-bar.settings.show_social.label"
},
{
"type": "header",
"content": "t:sections.announcement-bar.settings.header__2.content"
},
{
"type": "checkbox",
"id": "auto_rotate",
"label": "t:sections.announcement-bar.settings.auto_rotate.label",
"default": false
},
{
"type": "range",
"id": "change_slides_speed",
"min": 3,
"max": 10,
"step": 1,
"unit": "s",
"label": "t:sections.announcement-bar.settings.change_slides_speed.label",
"default": 5
},
{
"type": "header",
"content": "t:sections.announcement-bar.settings.header__3.content",
"info": "t:sections.announcement-bar.settings.header__3.info"
},
{
"type": "checkbox",
"id": "enable_country_selector",
"default": false,
"label": "t:sections.announcement-bar.settings.enable_country_selector.label"
},
{
"type": "header",
"content": "t:sections.announcement-bar.settings.header__4.content",
"info": "t:sections.announcement-bar.settings.header__4.info"
},
{
"type": "checkbox",
"id": "enable_language_selector",
"default": false,
"label": "t:sections.announcement-bar.settings.enable_language_selector.label"
}
],
"blocks": [
{
"type": "announcement",
"name": "t:sections.announcement-bar.blocks.announcement.name",
"settings": [
{
"type": "text",
"id": "text",
"default": "Welcome to our store",
"label": "t:sections.announcement-bar.blocks.announcement.settings.text.label"
},
{
"type": "url",
"id": "link",
"label": "t:sections.announcement-bar.blocks.announcement.settings.link.label"
}
]
}
],
"presets": [
{
"name": "t:sections.announcement-bar.presets.name",
"blocks": [
{
"type": "announcement"
}
]
}
]
}
{% endschema %}

webwondersco
Shopify Partner
1200 171 174

@ramo2200 everything looks fine in code.

 Have you added any additional apps for the announcement bar?

 

 

Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
- a small Coffee Tip would be greatly appreciated. :)..! Instagram
ramo2200
New Member
9 0 0

No these are all the apps installedSkærmbillede 2024-02-12 kl. 12.48.59.png

webwondersco
Shopify Partner
1200 171 174

@ramo2200 ohh all looks okay here as well.

 

can ask for your store collaborator access? so can check the theme code or any issues are there related to the announcement?

 

if you are okay then only

Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
- a small Coffee Tip would be greatly appreciated. :)..! Instagram
ramo2200
New Member
9 0 0

can i get mail will do right away, and does the help cost money?

ramo2200
New Member
9 0 0

I got same problem