Knowledgebase: Add-Ons

How Do I Use 3dBoost?


3dBoost allows you to create dynamic (and responsive) popup modal windows on any particular page or group of pages in your store. These popup modals can then contain promotions or any other type of marketing message that can be useful to your shoppers.

The following instructions will help you understand and setup the 3dBoost functions in your store.

3dBoost is available as an add-on directly from our App store. please click here for pricing and purchase information

Shortly after purchasing 3dBoost for your store, you will receive a notification that it has been installed onto your site. Once you receive this information, proceed with the following steps:

  1. Log into your Shift4Shop Online Store Manager
  2. Using the left hand navigation menu, go to "Modules"
  3. Locate and click on the 3dBoost Icon to expand the module

At this point, you will see two buttons: "View All" and "+Add New" respectively. View all will be used to edit any popups you create. However, for the purposes of this article, we'll assume you haven't set any up yet. To proceed:

  1. Click on the "+Add New" button

When creating your 3dBoost popup, you will see a page with three separate sections. These are:

  • Campaign Settings
    These settings will be the starting point and where you will configure how and where the popup will display.
  • Upsell Content
    Here, you will configure what the popup will contain
  • Trigger Settings
    And finally, this section is where you will control when the popup will display.

Each of these three sections will contain a +/- icon at the top right of it to expand or contract the section as needed. Up next, we'll describe each section in more detail.

Campaign Settings

You will have the following options at the top of the Campaign Settings section:

  • Campaign Name
    This is simply the name of the popup for your own reference. It will assist you in locating the popup easier if there are ever subsequent edits that need to be made to it
  • Display Type
    Use this drop down menu to control how the popup modal will appear to your customers. Options include a simple fade in or more dramatic effects such as swinging into view.

Below these options, you will see a section labeled "Where would you like your campaign to display?" This portion of the Campaign Settings area will let you control where the popup will display on your store. Your options here are:

  • All Pages
    If this option is selected, the popup will appear on each and every page of the site.
  • Specific Templates
    If this option is selected, the the popup will appear only on templates you select from the "Choose Templates..." drop down menu. You may select multiple templates if/as needed

If selecting Product, Category, and/or Extra Pages in the "Specific Templates" setting, the popup will appear on all products, categories, and/or Extra Pages of your store.

Also note that - for Extra Pages - the effect will only apply to user created Extra Pages. Site content Extra Pages linked to *asp pages (i.e. blog.asp, crm.asp, home.asp) or Extra Pages using database feeds i.e.(Terms and Conditions) will need to use the "Specific URLs" option described below.

  • Specific URLs
    If this option is selected, then the popup will appear only on specific URLs of your store. Multiple URLs can be specfied by separating each with a comma.

You do not need to specify your domain in the URL, but be sure to write the URLs to include the beginning forward slash.

For example, "/[path to page]"

Lastly, at the bottom of the Campaign Settings section you will have the following options that will let you fine-tune how the popup effect will display on the page. These options are:

  • Position
    Here, you can specify the position of the popup on the page.
    (i.e. center, top left, bottom right, etc)
  • Background Effects
    This drop down will allow you to select the type of overlay that will appear behind the popup modal. Your options here are:
    • Black Overlay
      The popup will appear with a dark, semi-translucent background behind it.
    • White Overlay
      The popup will appear with a white, semi-translucent background behind it.
    • Transparent
      The popup will appear with no background effect behind it.
    • Blurred Overlay
      The popup will appear with a blurry and semi-translucent background behind it.
  • Dimensions
    If using either the Custom Text or iframe options (see next section) the dimensions entered here will control the width and height of the popup box.

Upsell Content

This next portion of the page will let you specify what will appear inside the popup modal window. This can be either a static image, custom text of your choosing, or content provided via an iFrame. Let's go over each of these in more detail.

Image Embed
This option will allow you to specify an image that will appear in the popup. It contains the following sub-sections:

  • Select Image
    If you've already uploaded the image to your store, then simply enter the path in the "Select Image" field. Otherwise, you may click on the "Browse" button to locate an image on your computer and upload it to the store.
  • Call to Action
    Enter a URL to any page that you would like the viewer to be taken to when they click on the popup image. If using a URL from your store, you do not need to include your full domain, but you will need to add the beginning forward slash to the page. For example "/[path to page]"

Custom Text
Rather than using an image, this Upsell Content option will allow you to create custom text that will display in the popup. This type of display can be very useful in directing users to specials occurring in your store. The popup will consist of a Headline announcing the special, Content text describing the special, and a button directing the viewer to the page with the special. Your settings here are:

  • Customize the Colors
    Create your own color scheme for the following aspects of the popup:
    • Background Color
      The main background color of the popup
    • Text Color
      The color of the Headline and Content Text of the popup
    • Button Color
      The background color of the button on the popup
    • Button Text Color
      The text color used for text within the button
  • Choose a Preset Color Scheme
    Rather than creating your own color scheme, you may also select one of these eight, pre-created color schemes for your popup

After creating or selecting your color scheme, the next sections will let you tailor your popup message as needed.

  • Headline Text
    This will be the headline of your popup message
  • Font Size
    The size of the headline text
  • Paragraph (Content Text)
    Here's where you'll enter your content text for the popup.
    Note that you can enable WYSIWYG mode (the </> button at the top right of the field) to format your content text.
  • Button URL
    This is where you will specify the Call to Action URL that will be used when the viewer clicks on the popup's button.
  • Button Text
    And here's where you will enter the actual text displayed on the button.

Additional Information
When using the Custom Text option, be aware that the dimensions setting (described in the Campaign Settings) will directly correlate to the size of the popup window.

However, keep in mind that - if the amount of text used surpasses the height - the popup will expand (in height) to accomodate the extra text. Therefore, you may need to adjust the width of the popup to your liking.

iFrame Embed
The final Upsell Content type will allow you to embed the popup content in the form of an iFrame. This can be useful if you'd like to embed a YouTube video or some other form of dynamic content on the popup.

When selecting the iFrame Embed option, the page will provide you with a simple open text box where you can specify your iframe coding. Just be sure to encapsulate your iframe coding in the proper <iframe> and </iframe> tags to have the function work correctly. Also, be aware that the iframe option will also use the dimensions (described in the Campaign Settings) for its display.

To embed a YouTube video, locate the video that you'd like to use for the popup, and click on its "Share" link (look under the video's title). Once there, click on the "Embed" option to retrieve the embed iframe code that can be used on your 3dBoost popup.

Note that, if the YouTube iframe code contains size parameters, they will be overwritten by the "Dimensions" entered in the Campaign Settings section of 3dBoost.

Trigger Settings

The final third of the 3dBoost setup page will contain your trigger settings. These checkbox settings will let you determine when the popup will appear when your visitor lands on the popup's page. Your settings here are the following:

  • Mouse Tracking
    The popup will trigger if the visitor's mouse leaves the frame of the page.
    Useful for creating "Wait, don't go!" types of notifications.

In order for the mouse tracking option to properly trigger, you will also need to use the "Popup Timer" setting (see below) in conjunction with it. Typically a 500 millisecond delay will suffice for the trigger.

Also note: if the site visitor triggers the popup, and then clicks on the "X" to close the popup, they will no longer see the popup when leaving the frame again.

  • Popup Timer
    The popup will appear after a specified length of time (in milliseconds) passes.
    Enter the millisecond length in the provided field below this option after marking the checkbox.
  • Min Page Count
    The popup will appear after a specific number of page views has occured.
    For example, if the specified Page Count number is 10, the popup will appear on the 11th viewing.
    Enter the number in the provided field below this option after marking the checkbox.
  • Views Counter
    The popup will stop appearing after the specified number of views.
    For example, if the Views Counter is set to 10, the popup will cease appearing upon the 11th viewing and thereafter.
    Enter the number in the provided field below this option after marking the checkbox.
  • Start & End Dates
    Enter a range of dates for the popup to appear during.
    Any time before or after the specified date ranges, the popup will not appear.
    Enter the date ranges below this option after marking the checkbox.
  • Order Amount Between
    Enter an order amount range that the shopper must have in their cart for the popup to appear.
    For example, if set for a minimum of $200 and a maximum of $800, the popup will appear to shoppers when they have this amount in thier cart.
    After marking the checkbox, you will see the sections to enter your min and max amount for the ranges.
  • Referer Contains
    The popup will appear when the (first time) visitor is referred to your page from a specific location.
    For example, for first time visitor referred from Google, enter "google" into the provided field.
    This c an be helpful in helping you create targetted popup messages for first time visitors coming from a specific location like affiliations and other marketing channels.

The above trigger settings can be marked individually, or combined to achieve different results.

After configuring all of your 3dBoost Settings, remember to click "Save" at the top right of the page to commit your changes.

Editing Existing 3dBoost Campaigns

Occasionally, you may need to edit an already created 3dBoost Campaign. To do so, you will follow the same basic steps outlined at the start of this article, but with a slight variance.

  1. Log into your Shift4Shop Online Store Manager
  2. Using the left hand navigation menu, go to "Modules"
  3. Locate and click on the 3dBoost Icon to expand the module
  4. Click on the "View All" button

Once here, you will see your created 3dBoost Campaigns listed.

  1. Locate the 3dBoost Campaign that you'd like to edit and click on its Action Wheel to edit it.

You will then see the same Capaign Settings, Upsell Content, and Trigger Settings sectins described in this article. Edit your campaign as needed and click "Save" at the top right to commit your changes.

You can use these editing steps to delete a 3dBoost Capmpaign as well. Simply select "Delete" from the action wheel.

Comments (0)
Help Desk Software by Kayako fusion