MARQUEE ANNOUNCEMENT BAR FOR SENSE THEME

vgodenir
Tourist
6 0 0

Hello. Could anyone help me get the marquee effect for sense theme? Ive tried multiple codes and dont want to pay for another app. Thanks!

https://grace-and-glamour-sk.myshopify.com/

password: home

 

This is my code currently for announcement-bar.liquid

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

Replies 2 (2)

websensepro
Shopify Partner
1014 139 147

Hello Vgodenir,

To implement a marquee announcement bar in the Shopify Sense theme without using an additional app,

you'll need to modify the theme's code.

 

Here's a step-by-step guide to help you achieve this:

  • Backup Theme Files: Before making any changes, it's essential to back up your theme files. This ensures you can revert to the original version if needed.

  • Locate the Header Section: In your Shopify admin, go to Online Store > Themes. Click on the "Actions" dropdown menu next to your Sense theme and select "Edit code." Look for the header section files (header. liquid)  where you want to add the marquee announcement bar.
  • Add HTML Markup:  Within the appropriate header section file (likely header.liquid), add the HTML markup for the marquee announcement bar

 

  • Here's an example of HTML code for a simple marquee:

 

<div class="marquee">
  <marquee behavior="scroll" direction="left">Your announcement text goes here!</marquee>
</div>

 

 

Style with CSS: Next, you'll need to style the marquee to match your theme's design.

Add the following CSS code (Base.CSS  file at the bottom)

 

 

.marquee {
  overflow: hidden;
  white-space: nowrap;
}

.marquee marquee {
  font-size: 16px; /* Adjust font size as needed */
  color: #fff; /* Adjust text color */
  padding: 10px; /* Adjust padding as needed */
}
​

 

Save Changes.

I hope this is helpful for you.

 

 

 

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here
vgodenir
Tourist
6 0 0

where within the header.liquid does it go?

  • Add HTML Markup:  Within the appropriate header section file (likely header.liquid), add the HTML markup for the marquee announcement bar