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

1

Step 1: Open the Page Editor

• Go to your PageFly > Pages

• Go to edit an existing page or create a new one.

2

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

3

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

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

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

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

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)

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

Important: The trigger feature only works on live published pages. In the editor, the Sticky Bar may display differently for preview purposes.

Advanced settings (More settings)

Click the More Settings button to access additional configuration options

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

Q: Can I use multiple Sticky Bars on one page?

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

Q: Why isn't the trigger section working?

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.

Q: Can I hide the product image on mobile?

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.

Q: Will the Sticky Bar slow down my site?

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

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

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)

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

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

Q: Can I customize text colors or button styling?

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

Q: Does the Sticky Bar work on mobile?

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.

Q: What happens to the Sticky Bar on checkout pages?

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.