Announcement Bar

A banner-like storytelling element often used for urgent messages.

Footer -> Announcement bar

The theme comes with the Announcement bar feature to promote sales or free shipping, new product or options, give a discount code etc.

The Announcement bar can be placed in any place in the Footer section

Note! The Announcement bar layout settings work on desktop and mobile. Therefore, make sure they match the look and feel of your store in both modes.


Layout

If you want to add space above a section, use the Top spacing setting from the drop-down menu. The available options are:

  • Small

  • Medium

  • Normal

  • None

Each of these options controls the vertical spacing above content sections differently.

How it works:

  • For each option (Small, Medium, Normal), you can specify exact pixel values separately for desktop and mobile devices.

  • These pixel values are adjusted under:

    Theme settings -> Layout -> Section top spacing

  • If you select None, all top spacing is removed, meaning no extra space appears above the section.

Home Page Top Spacing

  • The Home page top spacing setting applies only to the home page.

  • It allows you to remove or customize the spacing at the top specifically for that page.

  • You can set it to None to remove top spacing here, independent of other pages.

Width Settings

  • You can choose the content width style from:

    • Default

    • Boxed

    • Wide

  • The Wide option expands the content width on screens that are 1440 pixels wide or more, making use of large desktop monitors to show more content horizontally.

Announcement Section Settings

  • Text alignment relative to icon can be set to:

    • Top: aligns text at the top edge of the icon

    • Center: aligns text vertically centered next to the icon

  • Heading size for desktop and mobile can be chosen from:

    • Extra

    • Large

    • Medium

    • Small

    • Extra small

  • Icon width controls the size of the icon in pixels or relative units.

  • Underline on hover toggles whether the heading or link gets underlined when hovered by the mouse.

  • Control navigation methods separately for:

    • Desktop navigation

    • Mobile navigation

  • Options for navigation buttons include:

    • Disable (no navigation shown)

    • Dots (small dots indicating slides)

    • Arrows (next/previous arrows)

    • Dots and arrows (both combined)

  • Enable autoplay to automatically switch slides.

  • Set the slide change interval from 2 to 40 seconds.

Note: Slide switching does not update inside the theme editor interface. After configuring, you should manually test navigation using arrows on the live site.

Dividing Line

  • You can enable or disable showing a dividing line between sections.

Background Settings

For backgrounds, you have several options:

  • Hide (no background)

  • Color (single color background)

  • Gradient (smooth fade between two or more colors)

  • Image (use a background image)

Color and Style Customization

You can customize the colors of the following elements separately:

  • Lines (like borders or dividing lines)

  • Announcement section text and icons

  • Headings and heading link hover state

  • Description text

  • Buttons and button hover states

  • Background on normal and hover states, including gradients and borders

  • Shadows for elements and shadows on hover effects

  • Slider arrows and dots appearance

  • Media button styling

Last updated