> For the complete documentation index, see [llms.txt](https://help.inspiredtheme.com/articles/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.inspiredtheme.com/articles/sections/theme-sections/floating-bar.md).

# 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.

***

{% hint style="warning" %}
**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](/articles/general-information/license-key-and-plans.md)
{% endhint %}

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:

{% hint style="info" %}
**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.**
  {% endhint %}

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**.