# Sticky bar element

## Overview

The **Sticky Bar** is a specialized product display element that remains fixed on your store's screen as customers scroll. It's perfect for showcasing product details, variant options, and quick checkout features while keeping them constantly accessible. This element is ideal for product pages where you want to increase conversions by reducing friction in the purchasing process. In addition, you can also drag and drop and replace other components on the sticky bar to achieve different uses.

A Sticky Bar  typically displays:

* Product image (thumbnail)
* Product title
* Price and compare-at price
* Variant swatches (color, size, etc.)
* Quantity selector
* "Add to cart" button

## Use Cases

* **Product Pages**: Keep key product information visible while customers scroll through descriptions or reviews
* **High-Traffic Products**: Improve conversion rates by making purchase options always accessible
* **Mobile Optimization**: Especially valuable on mobile where content can be far from "Add to cart" buttons
* **Multi-Variant Products**: Let customers change variants without scrolling back to the top

## How to add Sticky Bar to your page

{% stepper %}
{% step %}

#### Step 1: Open the Page Editor

* Go to your PageFly > Pages
* Go to edit an existing page or create a new one.
  {% endstep %}

{% step %}

### Step 2: Add the Sticky Bar element

* In the **Elements panel** on the left, navigate to **Shopify Elements** → **Product**
* Look for the **Sticky Bar** element
* Drag and drop it onto your page

<figure><img src="https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2FYfqMGhQeMOJvBFD7Sb94%2FAdobe%20Express%20-%20Screen%20Recording%202026-03-18%20at%2010.30.32.gif?alt=media&#x26;token=572e00f5-582f-432b-b581-cb1f828206f1" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

#### Step 3: Customize Your Sticky Bar (Optional)

Once added, you can customize or replace every element inside it:

* Click to select child elements (product image, title, price, buttons)
* Edit text, colors, spacing, and styling in the **Inspector panel**
* See real-time changes in the editor
  {% endstep %}
  {% endstepper %}

## Configuration Options

### Position (Top or Bottom)

**What it does**: Controls whether the Sticky Bar appears at the top or bottom of the screen while scrolling.

**How to access**:

1. Select the Sticky Bar section in the editor
2. Open the **Inspector panel** on the right
3. Under the **General** tab, find **Position**

<figure><img src="https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2FvMhiQn8sF6wkOEBeKkNk%2Fsticky-bar-position.gif?alt=media&#x26;token=0b1f7a06-5e4e-402c-b535-1e074697a813" alt=""><figcaption></figcaption></figure>

**Options**:

* **Bottom** (default) — Bar sticks to the bottom of the screen
* **Top** — Bar sticks to the top of the screen

**When to use**:

* **Bottom**: Best for most use cases; follows natural scrolling flow
* **Top**: Useful if you have fixed navigation bars at the top and want to avoid overlap

### Display Settings

#### Always Show vs. Show When Scrolling

**What it does**: Controls when the Sticky Bar becomes visible.

**How to access**:

1. Select the Sticky Bar
2. In the **Inspector panel**, find **Display When**

**Options**:

**Always display** (default)

* The Sticky Bar is visible immediately on page load
* Best for maximum visibility and conversion focus

<figure><img src="https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2F6IeLCpzRZfk8FwOexufI%2Fsticky-bar-always-display.gif?alt=media&#x26;token=cf00f402-ea8e-4055-9635-ef493e4712ee" alt=""><figcaption></figcaption></figure>

**Display when scrolling through a section**

* The Sticky Bar only appears after the customer scrolls past a specific section
* Useful to avoid visual clutter on top-of-page hero sections
* Once the selected "Trigger Section" scrolls out of view, the Sticky Bar appears
* When the trigger section comes back into view, the Sticky Bar hides

<figure><img src="https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2FaiCeORabTixPFTzFjhc8%2Fsticky-bar-when-to-display.gif?alt=media&#x26;token=c0d4d07e-37f4-4e67-818f-2ad5bd6f63a7" alt=""><figcaption></figcaption></figure>

**Example**: You have a product details section at the top of your product page. Set the Sticky Bar to display when "Scroll through a section" and select the product details section as the trigger. The Sticky Bar remains hidden while customers view the product details, then appears as they scroll down.

#### Select a trigger section (when "Scroll through a section" is selected)

<figure><img src="https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2FHZpfCdsdcDUww5hUCKSa%2Fsticky-bar-when-display.gif?alt=media&#x26;token=5b20979e-26d7-4f94-865d-1c4669cca596" alt=""><figcaption></figcaption></figure>

**What it does**: Specifies which section will trigger the Sticky Bar to appear.

**How to access**:

1. Select **"Show When Scrolling"** from the **Display When** dropdown
2. A new dropdown appears labeled **Select Section**
3. Click to open the list of available sections

**How to choose a trigger section**:

* The dropdown lists all sections on your page *except* Sticky Bars
* Select the section you want to use as the trigger point
* Once customers scroll past this section, the Sticky Bar becomes visible

{% hint style="warning" %}
**Important**: The trigger feature only works on live published pages. In the editor, the Sticky Bar may display differently for preview purposes.
{% endhint %}

### Advanced settings (More settings)

Click the **More Settings** button to access additional configuration options

<figure><img src="https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2F1Mvc6px7dj684Jh8fV5l%2Fsticky-bar-more-setting.gif?alt=media&#x26;token=b61ebe74-105b-467a-b959-9b14b7f2dd76" alt=""><figcaption></figcaption></figure>

#### Top/Bottom offset

**What it does**: Adds spacing between the edge of the screen and the Sticky Bar.

**How to use**:

* For **Top** position: Adjusts distance from the top of the screen
* For **Bottom** position: Adjusts distance from the bottom of the screen

**Range**: 0 to 200 pixels\
**Default**: 0px

**Example**: If your site has a fixed header that's 50px tall, set the **Top Offset** to 50px when using **Top position** to prevent overlap.

**How to adjust**:

1. Click **More Settings**
2. Find the **Top Offset** or **Bottom Offset** slider
3. Drag the slider or enter a value manually

#### Z-Index

**What it does**: Controls the Sticky Bar's layering relative to other fixed elements on the page.

**Range**: 1 to 9,999\
**Default**: 100

**When to adjust**:

* If the Sticky Bar appears behind other fixed elements (like a sticky header), increase the Z-Index
* Common values:
  * **100** (default): Works for most sites
  * **200+**: If you have other fixed overlays
  * **999**: If multiple fixed elements need careful layering

**Example**: Your store has a fixed navigation header with Z-Index 50. The Sticky Bar's default Z-Index (100) is automatically higher, so it will appear on top.

## Customizing Sticky Bar Content

The Sticky Bar includes several child elements that you can customize independently:

### Product Image

* Shows a thumbnail of the product
* **Customization options**: Size, border-radius, spacing
* **Desktop view**: Displayed on the left (if layout allows)
* **Mobile view**: Often hidden due to space constraints

### Product Title

* Displays the product name
* **Customization**: Font size, color, truncation (prevents text wrapping)
* The default template truncates long titles with ellipsis (...)

### Price Display

* Shows current selling price and optional compare-at price
* **Customization**: Formatting, color, position
* The compare-at price typically appears with a strikethrough

### Variant Swatches

* Displays color/size options if your product has variants
* **Customization**: Swatch size, spacing, shape (square/circle)
* Customers can click swatches to change variants without scrolling

### Quantity Selector

* Lets customers adjust how many items to add
* **Customization**: Button styling, input field width
* Includes + and - buttons

### Add to Cart Button

* Primary call-to-action
* **Customization**: Text, color, size, padding
* Clicking this button adds the selected quantity and variant to the cart

## Desktop vs. Mobile Behavior

### Desktop Display

* The Sticky Bar typically shows the product image, title, price, and actions in a single row
* All elements are visible and accessible
* Optimal for wide screen layouts

### Mobile Display

* The layout often adapts to fit smaller screens
* **Product Image**: Usually hidden to save space
* **Product Details & Actions**: Stacked vertically or shown in a responsive flex layout
* **Width**: Stretches full-screen width with appropriate padding
* The "Add to Cart" button often expands to full width for easy tapping

**Responsive Design**: You can customize the Sticky Bar differently for mobile vs. desktop using device-specific styling. See the **Responsive Design** section in the Inspector panel.

## Tips & Best Practices

1. Don't Block Essential Navigation
   * If your site has a fixed header (logo, menu), avoid positioning the Sticky Bar directly below it
   * Use the **Top/Bottom Offset** to maintain proper spacing
2. Keep It Concise
   * The Sticky Bar is meant for quick reference, not detailed information
   * Let customers scroll to your main product section for full descriptions and reviews
3. Test Trigger Sections
   * If using "Display when scrolling through a section", test on your live published page to verify the trigger works correctly
   * The trigger feature doesn't preview accurately in the editor
4. Mobile-First Approach
   * Since mobile screens are smaller, consider hiding non-essential elements (like product image) on mobile
   * Ensure the "Add to Cart" button is large enough to tap easily on touchscreens
5. Use Consistent Styling
   * Match your Sticky Bar's color scheme, fonts, and spacing to your main product section
   * This creates a cohesive shopping experience
6. Avoid Z-Index Conflicts
   * If multiple elements seem to overlap, check their Z-Index values
   * Use the Z-Index setting to layer elements properly
7. Monitor Performance
   * Sticky Bar uses passive scroll listeners, so it won't significantly impact page performance
   * Test on lower-end devices to ensure smooth scrolling

## Frequently Asked Questions

<details>

<summary>Q: Can I use multiple Sticky Bars on one page?</summary>

A: Technically yes, but it's not recommended. Multiple sticky bars will overlap and confuse customers. Stick to one Sticky Bar per page.

</details>

<details>

<summary>Q: Why isn't the trigger section working?</summary>

A: The trigger feature only works on published/live pages, not in the editor. Publish your page and test it in a new browser tab. The Sticky Bar may appear in a hidden state in the editor for preview purposes.

</details>

<details>

<summary>Q: Can I hide the product image on mobile?</summary>

A: Yes! Use device-specific styling. Select the product image element, then in the \*\*Inspector\*\*, hide it for mobile screens under the \*\*Mobile\*\* styling tab.

</details>

<details>

<summary>Q: Will the Sticky Bar slow down my site?</summary>

A: No, the Sticky Bar uses efficient scroll listeners and doesn't add significant performance overhead. It's optimized for fast rendering.

</details>

<details>

<summary>Q: What's the difference between "Always display" and "Scroll through a section "?</summary>

A: - \*\*Always Show\*\*: Sticky Bar is visible from page load - \*\*Show When Scrolling\*\*: Sticky Bar appears only after customer scrolls past a trigger section (useful for hiding it behind hero images)

</details>

<details>

<summary>Q: Can I change the Sticky Bar's position from bottom to top?</summary>

A: Yes! Select the Sticky Bar, open the \*\*Inspector\*\*, and change the \*\*Position\*\* setting from "Bottom" to "Top". The offset will automatically adjust.

</details>

<details>

<summary>Q: Can I customize text colors or button styling?</summary>

A: Absolutely. Every element inside the Sticky Bar can be customized: 1. Click to select the element (title, button, etc.) 2. Use the \*\*Inspector panel\*\* to change colors, fonts, sizing 3. Use the \*\*Styling\*\* tab for advanced CSS-like customizations

</details>

<details>

<summary>Q: Does the Sticky Bar work on mobile?</summary>

A: Yes, it's fully responsive. However, on mobile devices, some elements (like the product image) may be hidden by default due to space constraints. You can customize which elements show on mobile.

</details>

<details>

<summary>Q: What happens to the Sticky Bar on checkout pages?</summary>

A: The Sticky Bar is typically used on product pages only. If you add it to other page types, it will work the same way but may not be necessary.

</details>