Floating bar

Pin a slim vertical bar to the side of the screen with your social media icons, a button and a discount offer that opens in a popup.

---

Pro feature. This section requires a Pro or Max License key. Without one, it's hidden on your live store and shows a 🔒 Pro notice in the theme editor. Learn about plans and License keys

The Floating bar is a slim vertical bar pinned to the middle of the left or right edge of the screen. It can hold your social media icons, a button, and a discount label that opens a popup with a discount code and recommended products.

The bar slides in once a shopper scrolls down the page, and hides again when they scroll back to the top. It lives in the Overlay group, so it can appear on every page.

1. Our guide to set up a Floating bar section:

Steps:

• In the theme editor, click Add section in the Overlay group at the bottom of the sidebar.

• Locate Floating bar.

• To see it in the preview, scroll down the page. By default it only shows on the home page and on desktop.

• Click Save.

The section is added with a Discount block.

2. Section settings

• General

  • Position: The side of the screen the bar sits on: Left / Right.

  • Device: Show on all devices / Only show on desktop / Only show on mobile.

  • Show on homepage only: When on, the bar only appears on your home page. Turn it off to show it on every page.

• Button

  • Button label: Text shown on the bar. Leave it blank to hide it.

  • Button link: Where the button goes. Without a link, the label shows as plain text.

• Colors

  • Color scheme: The bar's colors: Accent 1 / Accent 2 / Accent 3 / Background 1 / Background 2 / Background 3 / Inverse.

  • Show background: Fills the bar with the color scheme's background. When off, the bar is transparent and only its icons and text show.

• Corner radius

  • Corner radius: Rounds the corners of the bar and the discount popup, 0–40px.

The social media icons come from Theme settings > Social media. They appear automatically when at least one social link is filled in.

3. Block settings

Discount block

You can add one Discount block. Its Label appears on the bar; clicking it opens the discount popup. On mobile, the popup slides up from the bottom of the screen. Shoppers close it with the close button, by clicking outside it, or with the Esc key.

• Label: The text on the bar that opens the popup, such as "SPECIAL OFFER".

• Image: A background image for the offer panel of the popup.

• Image overlay opacity: Darkens the image so text stays readable, 0–100%.

• Content

  • Subheading, Heading and Description: The offer text.

  • Heading size: 15–80px.

  • Discount code: The code shown in the popup, with a Copy code button.

• Recommended Products

  • Heading: Title above the products.

  • Products: Products to show beside the offer. Up to 3 are shown.

• Product card

  • Font size scale: Size of the product titles, 100–200%.

  • Content alignment: Left / Center.

  • Image ratio: Adapt to image / Portrait / Square / Arch.

  • Show second image on hover, Add image padding, Show image border, Show vendor, Show product rating and Enable quick add button: Turn these product card features on or off.

• Colors

  • Heading and Text: Colors of the offer text.

  • Button label and Button background: Colors of the Copy code button.

4. Tips

• The popup only displays the Discount code. Create the same code in Shopify admin > Discounts so it works at checkout.

• Keep the Label and Button label short. They are shown vertically on the bar.

• To test the bar on inner pages, turn off Show on homepage only.