How to use Quicky—Announcement Bar Banner with PageFly

About Quicky Announcement Bar BannerClick to copy

What Is Quicky Announcement Bar Banner AppClick to copy

Quicky Announcement Bar Banner app helps you create promotion banners with easy set up and flexible customization.

With the Quicky Announcement Bar Banner app, you can:

  • Go beyond basic announcements with a variety of banner types, including a cookies bar, sales motivation bar, free shipping bar, countdown timer bar, etc.
  • Tailor the appearance and content of your banners to match your brand aesthetic.
  • Schedule banners to appear during specific times and track their performance.

Install Quicky Announcement Bar BannerClick to copy

Before using this element in PageFly, you have to install the Quicky Announcement Bar Banner app to your store, and configure all options in the app.

Install Quicky—Trending Bars & Banners

Install PageFly

How To Access Quicky Announcement Bar BannerClick to copy

In the page editor, follow these steps to access Quicky Announcement Bar Banner element:

  • Step 1: In the PageFly editor, click “Third-party elements” on the left menu
  • Step 2: Click “Manage integrations” or the icon on top
  • Step 3: You just need to type “Quicky”, the Quicky Announcement Bar Banner will show and, then click “Activate” button
  • Step 4: Click “Done” and the element will appear in the “Third-party elements” menu

access Quicky Announcement Bar Banner element

The element comes with ten variants which are:

  • Multi Announcement Bar
  • Countdown Bar
  • Coupon Bar
  • Email Signup Bar
  • Free Shipping Bar
  • Sale Motivation Bar
  • Cookie Consent Bar
  • Action Bar
  • Stop War Bar
  • Announcement Bar

How To Configure Quicky Announcement Bar Banner ElementClick to copy

Important note:
  • One element can be used multiple times on a page.
  • The elements can be used on all page types.
  • The elements can be used anywhere on the page.
  • All styling and configuration must be done in the Quicky Announcement Bar Banner app.

From PageFlyClick to copy

Step 1: Add Quicky Announcement Bar Banner ElementClick to copy

Before starting to set up the Quicky Announcement Bar Banner element, you will need to add this element onto your page canvas:

  • Step 1: Click “Third party elements” on the left menu bar
  • Step 2: Look for “Quicky Announcement Bar Banner” element
  • Step 3: Click on the element to see its variant
  • Step 4: Drag and drop the variant onto the page canvas

Step 2: Configure Quicky Announcement Bar Banner ElementClick to copy

After adding the element, you can adjust it by clicking on the element.

  • From the General tab, head to the Content tab > Click on the dropdown button > Choose the banner type created in the Quicky Announcement Bar Banner app.

configure Quicky Announcement Bar Banner element

  • For styling options like margins, borders, and effects, go to the “Styling” tab. You can find more details about the available options here.

From Quicky Announcement Bar Banner AppClick to copy

Before using the Quicky Announcement Bar Banner element in PageFly, you’ll need to create and configure your announcement in the Quicky Announcement Bar Banner app. Here’s how:

Step 1: Activate “Quicky Announcement Bar Banner” In The Theme CustomizeClick to copy

Go to your Shopify admin, then navigate to Online Store > Theme > Current theme > Customize > App embeds. Search for “Quicky Announcement Bar Banner” and activate it.

activate “Quicky Announcement Bar Banner” in the theme customize

Step 2: Create A New BannerClick to copy

On the app dashboard, click “Create banner” button > Choose the banner style you want to create on the dropdown menu.

Action BarClick to copy

By default, you can add a Product and URL from your Shopify to a call-to-action button. You can also add a collection, message, phone, email, etc by clicking Banner content item, then scroll down to Action target.

Click on the check box to Open in a new tab.

In addition, you can change the text for the Message and Button.

Stop War BarClick to copy

Stop War Bar

You can change the text for the message and button by applying text on the text box. You can also enable Open link in a new tab for the button.

Announcement BarClick to copy

Announcement Bar

You can change the URL of the banner to either All products, Collection, Products, Pages, Blogs,  Policies, or Custom URL.

You can also change the banner message by adding text to the blank box.

Coupon BarClick to copy

You can choose the discount types or create a new one. You can also change the text for the Message, Button, and Code labels.

Countdown BarClick to copy

You can customize all the details for the countdown bar from the Timer, Message, and Button.

Email Signup BarClick to copy

You can change the content for the Message, Button, Email field placeholder, Name field placeholder, and Thank you message by adding text on the text field.

You can also choose the “Hide name field”.

Tips & Best PracticesClick to copy

We strongly recommend using the Shopify App Block Element for Quicky integration. Available for Shopify theme OS 2.0, this feature simplifies adding Quicky functionality to your PageFly pages or sections. It offers greater flexibility, easier updates, and an improved user experience. While limited to one per page, the App Block is a valuable tool to enhance your store’s capabilities. For detailed setup guidance, refer to our App Block article. This simple change can substantially improve your Quicky integration and overall store performance.

Frequently Asked QuestionsClick to copy

1. Can I customize the appearance of the Quicky Announcement Bar Banner Bars?

Yes, you can fully customize the colors, fonts, text, buttons, and other aspects of the bars to match your store’s branding.

2. Where can I display the Quicky Announcement Bar Banner Bars on PageFly pages?

You can choose to display the announcement bars on all page types, everywhere on page, and across your entire store.

Thank you for your feedback!

Could not find the answer
to your question?

Chat with us
Great news! PageFly Help Center is now available in Japanese 🇯🇵. Explore now by switching the language in the Header section ☝️