Attrac Announcement Bar – How to Use with PageFly

1. About Attrac Announcement Bar Banner appClick to copy

1.1. What is Attrac Bar Banner?Click to copy

Attrac Announcement Bar Banner can help you add eye-catching and effective banners to your store that engage your customers and generate more conversions.

In this article, you will learn how to add eye-catching and effective banners to your Shopify store using the Attrac Announcement Bar Banner app and PageFly.

1.2. Access Attract Bar BannerClick to copy

Important: To use this element, you must first install the Attrac Announcement Bar Banner app in your Shopify store and configure all of its options. Once you have done that, you can return to PageFly and use the element on any of your PageFly pages.


  • PageFly only works with Bar banner type
  • One element can be used multiple times on a page
  • These elements can work on all page types
  • These elements only work on the live page.

1.3. How to Use Attrac Announcement Bar Banner ElementsClick to copy

Step 1: Go to Add third party elements in the left toolbar > Click on the Manage Integrations button.

Step 2: In the Integrations popup page, you can search “Attrac Announcement Bar Banner” on the search bar and then Enable it.

Step 3: Choose the element you want then drag and drop it to the editor page

1.4. Attrac Announcement Bar Banner VariationsClick to copy

PageFly supports 5 elements from the Attrac Announcement Bar Banner app. These elements are divided into 3 categories:

  • Upsell & Cross sell
    • Countdown Timer Banner: Display announcements and offers with a countdown timer

  • Email Marketing
    • Email Signup Bar: Display an expandable/collapsible email signup form

  • Push notification
    • Announcement Banner: Display announcements, offers and special events
    • Free Shipping Banner: Display a free shipping offer with updated cart goals
    • Multi Announcements Banner: Display rotating multiple message types on the same bar

2. App ConfigurationClick to copy

2.1. Elements configurationsClick to copy

After dragging an element onto the page, click on the element. Then, go to the General tab. Here, you can see the Add code placeholder field.

To get these elements to work, you need to add the embed code after configuration in the Attrac Announcement Bar Banner app.

You can check more information about the Styling tab here.

Then remember to Save & Publish the page, you can check these elements in liveview.

2.2. Attrac Announcement Bar Banner configurationsClick to copy

2.2.1. Enable app in App embedsClick to copy

Before configuring, please follow these steps to enable Attrac Announcement Bar Banner app in the App embeds of the theme:

  • Access Online store > Theme > Current Theme > Customize
  • Click the 3rd icon on the left hand which is the App embeds settings modal
  • Search for “Attrac Announcement Bar” in search box
  • Enable the app and hit Save button

2.2.2. Choose Banner TypeClick to copy

After that, go to the Attrac Announcement Bar Banner app. In the Dashboard, click the Create Campaign button to start building.

You can create a bar or embed banner, whichever suits your needs.


  • PageFly only works with Bar banner type
  • The Email Signup Bar is only displayed as a bar banner.

2.2.3. ConfigureClick to copy

Click on an element to start customizing it.

Each element has different settings, but the main settings are similar. You can customize the text content, text typography, text color, background color, and bar position. Please access Attrac Announcement Bar Banner app Help center to learn more about the configuration for each element.

You can see the changes you make in real time in the sticky bar on the settings modal.

Note: PageFly only works with the Custom position.

2.2.4. Copy code and use it on PageFlyClick to copy

After you have finished customizing the element, click the Copy button next to the code under the Bar position settings section. Remember to hit the Save button to show it on liveview.

Once you have copied the code, go back to the PageFly editor and paste it into the code placeholder field in the General tab. Then, click Save & Publish to apply the changes to the live page.

3. Key TakeawaysClick to copy

Attrac Bar banner is the way to create attractive announcement bar, banners and pop-ups, which are very important to give customers a heads up on brand campaigns campaign. It includes lots of important features, including: rotating multi-announcements, urgency countdown timers, free shipping promotions and email capture forms.

4. Frequently Asked QuestionsClick to copy

4.1. OverviewClick to copy

When was Attrac Bar Banner App Created?2018
How Much is Attrac Bar Banner?From $6.99/ month
Can I use Attrac App on PageFly Editor?Yes

4.2. What is Attrac Bar Banner?Click to copy

Attrac Bar Banner is a high-converting announcement bars, banners with  email signup forms to engage customers and grow sales, which help improve conversion rate.

4.3. What Are Included in Attrac Bar Plans?Click to copy

1,500 impressions/mo, Unlimited contacts, 100 new contacts/ month, Announcements, free shipping, countdown, and email signup campaigns and Integrations.

4.4. Who are currently in partnership with Attrac Bar App?Click to copy

Mailchimp, klaviyo, Omnisend

Thank you for your feedback!

Could not find the answer
to your question?

Chat with us