Thank you for purchasing our extension. If you have any questions that are beyond the scope of this document, do not hesitate to leave us an email via [email protected]
promo bar to 1 of 4 possible positions on the web page.
Use the WYSIWYG editor to edit the content of the bar.
Set up sticky
...
promo bars.
Duplicate
...
promo bars with ease.
Have a click report to see how effective is your promo bar (NEW)
Admin can schedule active date for a promo bar (NEW)
System Requirements
Your store should be running on Magento 2 version 2.
...
3.x
...
and 2.
...
4.x
Configuration
Promo Bar extension allows the customer to create the promo bar on the front end with the call-to-action button, therefore, there are two main parts in the configuration: create a call-to-action button and set up a promo bar.
Create Call-to-Action Buttons
...
On the Admin sidebar, go to Marketing > Magenest Promo Bars >
...
Buttons.
Image Added
...
In order to create a Call-to-Action button, click on Add New Button on the top right.
Image Removed
...
Image Added
On the Edit Button page
Image Added
Status:
...
Select the status for the new button between Enable and Disable.
Button Title: Enter the title for the button which is shown in the back-end for management.
Content:
...
Enter the call-to-action phrase
...
for the button which is shown on the frontend. Then use the edit tool style the button title (color, font, size, etc).
Text
...
Size (px):
...
Set the size
...
for the text. Since the size in the
...
Content field is limited to 36pt,
...
this Text Size field is added for the unlimited font size (px). In case both font size settings are
...
set up, the value in the
...
Text Size (px)will be taken.
Color for
...
Text:
...
Select the text
...
color in the palette.
Hover Color for Text: set the color of the text when
...
the button
...
is hovered.
Button
...
Settings: Adjust each field on the adjustment tool to set the button shape and text alignment
...
.
Color for Button Background: Select the background color for
...
the button.
Hover
...
Color for
...
Button Background:
...
Set the background color
...
for the button when
...
being hovered.
Then set for the button
...
border on Border Style, Border Width, Color for Button Border and Hover Color for Button Border.
View the layout of the new button after each change on the live preview section then click Save when complete.
Note:If a button is being used in promo bars, it cannot be deleted or disabled.
Setup a new Promo Bar
On the Admin sidebar, go to Marketing > Magenest Promo Bars > Bars. To create a promo bar, click
You can see the preview of the button on the top of the page while editing.
Create Promotion Bar
Go to Magenest Promo Bars > Manage Bars, you can view all the promotion bars that are created.
...
on Add New Bar button.
...
Image Removed
Bar Settings
...
Status: To display/hide the promotion bar
...
Bar title: The promotion bar name shown in Magento back end
...
There are three configuration sections.
Desktop Bar Setting: set the display for the bar on desktop view.
Mobile Bar Setting: set the display for the bar on the mobile view.
Image Added
Desktop Bar Setting
Bar Title: Enter the bar name which is displayed in Magento back end for management purposes.
Bar Height: Adjust the tool to set the promo bar height (30px - 150px).
Background Image
...
: Upload the background image for the
...
Image Removed
...
promo bar. Then use the adjust tool on Background Image Setting field to set for the background image.
Background Image Setting: Adjust the background image accordingly.
Image Added
Sliders: Create the multiple sliders for the promo bar. Click on Add Slider button to add
...
more slider.
...
...
Select one slider then click on Edit button under the Action column. Enter and modify the content for the slider on the Content field.
Text size (px):
...
Enter the size of the slider text. Since the size in the
...
Content filed is limited to 36pt,
...
the Text Size field is added which allows unlimited font size (px)
...
. In case both font size settings are
...
set up, the value in the text size (px) will be taken.
Time life for
...
Each Content (seconds):
...
Set the time to switch
...
the sliders.
Text
...
Color:
...
Set the text
...
color by choosing in the palette.
Background
...
Color: The background color of the
...
promo bar. In case you use the background image, this field is unnecessary and vice versa.
Text
...
Vertical Alignment: The slider content alignment on the
...
promo bar (0px - 50px).
Image Removed
...
Image Added
Button Type: Assign
...
a button on the drop-down list to the promo bar.
Button Position
...
:Change the button alignment on the bar.
Button URL:
...
Insert the redirect URL when customers click on the CTA button.
Show button close
...
(x): choose Yes to display the icon to close the
...
bar.
Display with delay after page load (seconds):
...
Set the time to display the
...
promo bar since the page is opened on the browser.
Auto-hide after (seconds):
...
Set the time to close the bar since the page is opened on the browser.
Sticky Top: If choose Yes, the bar will stay at the top of the screen when users scroll down.
Image Added
Mobile Bar Setting
This section is the configuration for the promo bar on the mobile view.
Use same configuration as desktop: Choose Yes if the configuration for mobile is similar to the desktop configuration. If choose No, set the configuration for the mobile bar setting with some fields below.
Breakpoint: set the breakpoint.
...
Image Removed
Bar Position
Design Theme: The current website's theme
Assign to Store Views: Choose the store you want to display the promotion bar
Sort Order: The order of the promotion bar with other widget in the same container
Page: Choose the specific page you want to display the promotion bar or All pages
Container: Choose the position on the page where you want to put the promotion bar
Sticky: Make the promotion bar sticky to the page (Yes to Enable/ No to Disable)
Image Removed
Save the configuration then clear cache in System > Cache Management.
Mobile promo bar style will be applied if the screen width is less than breakpoint value
Text vertical alignment: The slider content alignment on the promo bar (0px - 50px).
Button Position: Change the button alignment on the bar.
Image Added
Note:
We do not recommend setting 2 sticky promo bars on the same site. It might cause errors.
You can create a cron job to update the button of the promo bar as soon as the button is edited.
Save the configuration then clear cache in System > Cache Management.
Manage Widgets
To manage a promo bar widget, go to Content > Widgets.
On the Widget management page, you can edit the existing widget or add a new one by clicking on the Add Widget button.
On the New Widget page
Setting
Type: Select Promo Bar
Design Theme: Select your design theme.
Then click on Continue
Image Added
Storefront Properties
Widget Title: Enter the name of the widget
Assign to Store Views: Select your desired store view.
Sort Order: Set the priority order for your promo bar on the front end display.
Layout Updates
Display on: Select a page to display the promo bar widget.
Container: Select a position to display the promo bar on the front end.
Image Added
Widget Options
Select Promo Bar: Select a promo bar that you have created.
Schedule Date: Select a time period to keep the promo bar widget activated.
Image Added
Click Save to save the changes. Then go to System > Cache Management to clear the cache.
Manage promo bars
Mass Action
To delete or duplicate bars, go to Magenest Promo Bars > Bars. On Bars page, select bars to delete on the grid, then select Delete or Duplicate on the mass actions drop-down list.
Image Added
Disable a bar
On the admin sidebar, go to Content > Widgets. On the Widgets page, select the widget that contains the promo bar need disabling.
Image Added
On the Widgets Management Page, scroll down to see the Layout Updates section. Click on the trash bin icon to disable the promo bar on the store-front.
Image Added
Click Save to save the changes. Then go to System > Cache Management to clear the cache.
Storefront Display
The Promo Bar display on the front end.
Bar position: Page Header Container
Image Added
Bar position: Page Top
Image Added
Bar position: Page Footer Container
Image Added
Report
Admin can have a report on how many times that users click on the Button of a Promo Bar every day.
On the Admin sidebar, go to Marketing -> Report.
Image Added
When you click on the Promobar ID link, you'll be redirected to the Edit Bar page.
Image Added
When you click on the See detailslink, you'll be redirected to theReport Detail page.
On the Report Detail page.
Button Title: title of the button
Clicks: number of clicks of each promo bar
Date: the day when users click on the button
Image Added
...
Update
When a new update is available, we will provide you with a new package containing our updated extension.
You will have to delete the module directory and repeat the installing steps above.
Flush the config cache. Your store and newly installed module should be working as expected.
Support
We will reply to support requests within 2 business days.
We will offer lifetime free update and 6 months free support for all of our paid products. Support includes answering questions related to our products, bug/error fixing to make sure our products fit well in your site exactly like our demo.
Support DOES NOT include other series such as customizing our products, installation and uninstallation service.
Once again, thank you for purchasing our extension. If you have any questions relating to this extension, please do not hesitate to contact us for support.