Add Popup Banner

Popup

The Popup module is a multi-purpose and multi-language modal window that can display promotional messages or any other content (images, text, videos, HTML, etc.) over any page in your store. You can also display a Newsletter module in the popup as well as optional Call to Action buttons.

We’ve added support for 2 buttons which can be used for YES / NO situations (for example if you need to block access to your site for underage visitors, etc.)

The Popup module can be assigned to any page. For example, it can be used as a landing page for a certain category or product by creating custom layouts for those pages and a custom popup module for each layout.

 

To create a Popup module access it and click on the Create New button.

 

  • 1 Module Name – This is the module name that will appear on the Add to Layout page.
  • 2 Content Dimensions – The first field is the Width which represents the popup’s width. The Height refers to the content area (excluding the header, newsletter or footer – these have their own height options which add to the total height of the entire popup).
  • 3 Background Settings – Color or image background options for the module.
  • 4 Close Button - The close button can be disabled in cases where the user must agree to your terms in order to enter your site. Without a close button the user will have to click on your custom button to enter the site. You can create 1 or 2 custom buttons for YES / NO (minimum age requirements) situations, etc.
  • 5 Content Padding - This will add some padding to the content area.
  • 6 Content Overflow – If you just want to display a banner image in your popup turn this OFF so the image fills the content area. Otherwise if you need to display more content (text, images, videos, etc.) that will need a scrollbar, turn this option ON so one will be generated if your content is larger than the height from the Content Dimentions option.
  • 7 Content – This is where you add your custom, multi-language content.
  • 8 Header – The header is optional and can be used as a main message or title. Leave empty the Title field to not display the header element.
  • 9 Newsletter – You can include a Newsletter module in your popup. Just create a separate Newsletter module and import it into the popup.
  • 10 Footer – The footer acts as the container for the “Don’t Show Again Notice” and optional buttons. The footer is disabled if no buttons are created and the “Don’t Show Again Notice” status is OFF.
  • 11 Buttons – Optional buttons which can be used as call to action and point to any other page, or for minimum age “YES / NO” or “I AGREE” situations. For such case leave the “YES” button’s link on Custom and the Url field empty – a button with an empty link will close the popup and enter the site. The NO button can be assigned any link away from the site. In this case you might want to disable the close button (x) from the Close Button option so the user will have to click on the YES button.
  • 12 Don’t Show Again – This offers your visitors the option to not show the popup again when they revisit your site. You can reset the cookie at any time from the Reset Cookie option and the popup will show again.

Contact Form


2 New Options

    • 1 Contact Form – Turns the Popup module into a Contact Form modal window that can be opened from any button or link. Uses the same contact from from the Contact Us page.
    • 2 Generate Custom URL – If you need to open a popup module from a regular html link (in a CMS Block or information page, description box, etc.) turn this option ON and copy the generated code. In your html link paste the url in the href like so:

<a href="javascript:flipkart.openPopup('250')"> ... </a>

Buttons & Links
Since flipkart version 2.3 the Popup module can be opened from any button or link in addition to having it show up on page load.
The flipkart Link System now includes the option to choose a Popup module as a link, as seen in the image below.

For custom HTML links that are created outside the flipkart Link System, in CMS Blocks, information pages, etc. you can generate a custom URL and paste it in your link element’s href. See number 2 in the section above Contact Form.