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]

Updated: 12/17/2020 | By: Magenest | Support Portal: http://servicedesk.izysync.com/servicedesk/customer/portal/147

• Create/Edit one or multiple promo bars.
• Set the promo bar for the mobile view.
• Create/Edit Call-to-Action button for promo bars.
• Display promo bars on any page.
• Design promo bars easily with many options.
• Design button for promo bar.
• Put button to 1 of 3 positions on promo bar.
• Put 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.

 In order to create a Call-to-Action button, click on Add New Button on the top right.

 On the Edit Button page

• 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 on Add New Bar button. 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.

 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 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.
  
  

• 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).

• 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.

 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. Mobile promo bar style will be applied if the screen width is less than breakpoint value
• Bar Height: Adjust the tool to set the mobile bar height (30px - 150px).
• Background Image Setting: use the adjust tool to set for the the background image.
  
• Text Size (px): Enter the size of the slider text. 
• Text vertical alignment: The slider content alignment on the promo bar (0px - 50px).
• Button Position: Change the button alignment on the bar.
  
  
  
  
  

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

 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.

 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.

 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.  

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.

 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.

 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

• Bar position: Page Top

• Bar position: Page Footer Container

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.

• When you click on the Promobar ID link, you'll be redirected to the Edit Bar page.

• When you click on the See details link, you'll be redirected to the Report 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

• 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.