Videos and Webinars

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 set up the 3dBoost functions in your store.

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

4. 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 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 popup will appear only on templates you select from the "Choose Templates..." drop-down menu. You may select multiple templates if/as needed.

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

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 enter the path in the "Select Image" field. Otherwise, you may click 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.
    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 button.

  • Button Text
    And here's where you will enter the actual text displayed on the button.

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.

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.

  • 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 occurred.
    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 after that.
    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 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 their 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 visitors referred from Google, enter "google" into the provided field.
    This can be helpful in helping you create targeted popup messages for first-time visitors coming from a specific location, like affiliations and other marketing channels.

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

5. 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 Campaign Settings, Upsell Content, and Trigger Settings sections described in this article. Edit your campaign as needed and click Save at the top right to commit changes.