About Attrac App![Copy Click to copy](https://help-cdn.pagefly.io/wp-content/themes/manual/images/icons/link.svg)
What is Attrac App?![Copy Click to copy](https://help-cdn.pagefly.io/wp-content/themes/manual/images/icons/link.svg)
Attrac Announcement Bar Banner app (Attrac Bar Banner) can help you add eye-catching and effective banners to your store that engage your customers and generate more conversions.
Install Attrac App![Copy Click to copy](https://help-cdn.pagefly.io/wp-content/themes/manual/images/icons/link.svg)
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.
- Install Attrac App
- Install PageFly
In page editor, follow these steps to access Attrac Announcement Bar Banner element:
- Step 1: In the PageFly editor, click “Add third-party element” on the left menu
- Step 2: Click “Manage integrations” or the gear icon on top
- Step 3: Search for “Attrac Announcement Bar Banner” and enable it
- Step 4: Click “Close” and the element will appear in the “Add third-party element” menu
- 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.
From PageFly![Copy Click to copy](https://help-cdn.pagefly.io/wp-content/themes/manual/images/icons/link.svg)
Before starting to set up for the Attrac App element, you will need to add this element onto your page canvas:
- Step 1: Click “Add third party element” on the left menu bar
- Step 2: Look for “AppHero – Attrac …” elements
- Step 3: Click on the element to see its variant
- Step 4: Drag and drop the variant onto the page canvas
After adding the element, you can adjust for it by clicking on the element.
- From the “General” tab, there is a widget configuration giving you a short explanation of the Attrac app, its link to the app listing, and the Code box for each variant..
- For styling options like margins, borders, and effects, go to the “Styling” tab. You can find more details about the available options here.
PageFly supports 3 elements (along with its variants) 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
From Attrac Announcement Bar App![Copy Click to copy](https://help-cdn.pagefly.io/wp-content/themes/manual/images/icons/link.svg)
Before using the Attrac Announcement Bar element in PageFly, you’ll need to create and configure your announcement in the Attrac app. Here’s how:
Go to your Shopify admin, then navigate to Online Store > Theme > Current theme > Customize > App embeds. Search for “Attrac” and activate it.
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.
Configure
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.
Copy code and use it on PageFly
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.
Frequently Asked Questions![Copy Click to copy](https://help-cdn.pagefly.io/wp-content/themes/manual/images/icons/link.svg)
What Are Included in Attrac Bar Plans?![Copy Click to copy](https://help-cdn.pagefly.io/wp-content/themes/manual/images/icons/link.svg)
1,500 impressions/mo, Unlimited contacts, 100 new contacts/ month, Announcements, free shipping, countdown, and email signup campaigns and Integrations.