How can I get the marquee effect for Sense theme without using another app?

Store Design
, , , ,
1

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

{%- if section.settings.show_social and social_icons -%} {%- render 'social-icons' -%} {%- endif -%} {%- if section.blocks.size == 1 -%} {%- elsif section.blocks.size > 1 -%}
{% render 'icon-caret' %}
{%- for block in section.blocks -%} {%- endfor -%}
{% render 'icon-caret' %}
{%- if request.design_mode -%} /* theme editor power preview fix */ .announcement-bar-slider .slider__slide[aria-hidden='true'] { visibility: hidden; } {%- endif -%} {%- endif -%}
{%- if section.settings.enable_country_selector and localization.available_countries.size > 1 -%} {%- form 'localization', id: 'AnnouncementCountryMobileFormNoScript', class: 'localization-form' -%}

{{ 'localization.country_label' | t }}

{% render 'icon-caret' %}
{{ 'localization.update_country' | t }} {%- endform -%} {%- form 'localization', id: 'AnnouncementCountryForm', class: 'localization-form' -%}

{{ 'localization.country_label' | t }}

{%- render 'country-localization', localPosition: 'AnnouncementCountry' -%}
{%- endform -%} {% endif %}

{%- if section.settings.enable_language_selector and localization.available_languages.size > 1 -%}

{%- form ‘localization’, id: ‘AnnouncementLanguageMobileFormNoScript’, class: ‘localization-form’ -%}

{{ 'localization.language_label' | t }}

{% render 'icon-caret' %}
{{ 'localization.update_language' | t }} {%- endform -%} {%- form 'localization', id: 'AnnouncementLanguageForm', class: 'localization-form' -%}

{{ 'localization.language_label' | t }}

{%- render 'language-localization', localPosition: 'AnnouncementLanguage' -%}
{%- endform -%} {%- endif -%}

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

2

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:

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.

3

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