Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Created: 04/12/2018 | By: Magenest | Support Portal: http://servicedesk.izysync.com/servicedesk/customer/portal/147

Table of Contents

...

Highlight Features

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

System Requirements

 Your store should be running on Magento 2 version 2.1.x.; 2.2.x; 2.3.x


...

Configuration

Promo Bar extension allows the customer to create the promotion bar on the frontend 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 promotion bar.

Create Call-to-Action Buttons

(plus) In Magento 2 back end, you will see the Magenest Promo Bars icon on the left menu bar. Go to Magenest Promo Bars > Manage Buttons.

...

  • Button Settings: Adjust each field on the adjustment tool to set the button shape and text alignment.
  • Background color for button: Select the background color for the button.
  • Hover Color for Button: Set the background color for the button when being hovered.
  • Then set for the button border on Border Style, Border Width, Background Color for Border and Hover Color for Border.
  • View the layout of the new button after each change on the live preview section then click Save when complete.

Setup a new

...

Promo Bar

(plus) Go to Magenest Promo Bars > Manage Bars. To create a promotion 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.
  • Bar Position: configure the position for the new bar.

 

(plus) Desktop Bar Setting

  • Status: Choose Enable to activate the promotion promo bar on the frontend.

  • Bar Title: enter the bar name which displays in Magento backend for management purposes.

  • Bar Height: Adjust the tool to set the promotion promo bar height (0px - 150px).
  • Background Image: Upload the background image for the promotion promo bar. Then use the adjust tool on Background Image Setting field to set for the background image.

...

  • Sliders: Create the slider 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 promotion bar. In case you use the background image, this field is unnecessary and vice versa.
  • Text Vertical Alignment: The slider content alignment on the promotion promo bar (0px - 50px).

 

 

  • Type Button: Assign the button created in Magenest Promo Bar > Manage Button to this promotion a button on the drop-down list to the promo bar.
  • Position Button: Change the button alignment on the bar.
  • Button URL: Insert the redirect URL when customers click on the CTA button.
  • Show button close: choose Yes to display the icon (error) to close the bar.
  • Display with delay after page load (seconds): Set the time to display the promotion 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.

(plus) 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 promotion bar style will be applied if the screen width is less than breakpoint value



(plus) Bar Position

  • Design Theme: The current website's theme.
  • Assign to Store Views: Choose the store you want to display the promotion promo 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 promo bar or All pages.
  • Container: Choose the position on the page where you want to put the promotion promo bar.
  • Sticky: Make the promotion promo bar sticky when the user scrolls down on the page (Yes to Enable/ No to Disable).

(warning) Note: We recommended that you should not set 2 promotion promo bars sticky on the same site. It might cause errors.

...

Save the configuration then clear cache in System > Cache Management.

 


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.

...