Dr Free Gift & BOGO

Menu
Get started free. Install Now!
Get started free. Install Now!

Tutorials

How to Add and Customize a Floating Popup Gift Icon on Your Shopify Store to Promote Available Free Gifts

Tutorials

How-To-Add-And-Customize-A-Floating-Gift-Popup-On-My-Shopify-Store
APP SETUP
Menu
Menu
Menu
Menu
Menu
Menu
Menu
Menu
Table of Contents

Overview

Enabling the Feature

Float Type Selection​

Best Practices

Implementation Tips​

Conclusion​

A floating gift icon can significantly enhance your store’s user experience by elegantly informing customers about available gift promotions. This guide will walk you through enabling and customizing this Dr Free Gift, BOGO Buy X Get Y feature to match your store’s design and requirements.

Overview

The floating gift icon or text appears as a persistent element on your store pages, catching customers’ attention and encouraging them to interact to learn more about available gift opportunities. When customers interact with this element, they can view detailed information about qualifying for free gifts.

Enabling the Feature

  1. Navigate to your store’s admin panel
  2. Access the Popup Widgets section
  3. Select the “Floating Icon or Text” tab
  4. Toggle the “Floating Icon/Text Enabled” switch to the ON position

Float Type Selection

You can choose between two distinct display modes, each with its own set of customization options:

  • Floating Gift: Displays an icon-based interface
  • Floating Text: Shows a customizable text-based interface

Floating Gift Options

When using the Floating Gift mode, you can customize:

  1. Gift Icon
    • Click the “Change Icon” button to select a different icon
    • Use Bounce Effect On-load for attention-grabbing animation
    • Display a circle around the gift icon for better visibility
    • Customize the circle’s background color
    • Set the close button (X) color
  2. Position
    • Choose from various positions including Left-middle and Right-middle
    • Position changes affect the live store only, not the preview

Floating Text Options

When using the Floating Text mode, you have access to these customization options:

  1. Text Content
    • Enter custom text (e.g., “Get Free Gifts”)
    • Customize text appearance and layout
  2. Text Styling
    • Text Color: Choose any color for your text
    • Text Font Size: Adjust between 10px and 25px using the slider
    • Star Color: Customize the color of any star elements
    • Background Color: Set the background color for the text container
  3. Spacing and Layout
    • Vertical Text Padding: Adjust line height from 0px to 25px
    • Horizontal Text/Stars Padding: Set padding from 0px to 25px
    • Position On Shop: Select where the text appears (e.g., Left-middle)

Best Practices

For Floating Gift Mode

  1. Choose an icon that matches your store’s aesthetic
  2. Ensure the icon is easily recognizable
  3. Consider using seasonal variations for special promotions
  4. Test the bounce effect for optimal attention-grabbing

For Floating Text Mode

  1. Keep text concise and action-oriented
  2. Ensure text size is readable (recommended: 14-16px)
  3. Maintain sufficient contrast between text and background
  4. Test padding settings for clean layout
  5. Consider mobile display when setting text length

Implementation Tips

  1. Choose your Float Type based on your store’s design aesthetic:
    • Use Floating Gift for a more visual approach
    • Use Floating Text for a more minimal, traditional look
  2. Test your settings thoroughly:
    • Check appearance across different devices
    • Verify readability and contrast
    • Ensure positioning doesn’t interfere with other elements
    • Test interaction on both desktop and mobile
  3. Consider your target audience:
    • Older customers might prefer larger text sizes
    • Mobile users benefit from concise messaging
    • International stores should consider text length in different languages

Conclusion

Whether you choose the Floating Gift or Floating Text option, taking time to properly configure your settings will ensure an effective and professional-looking promotion tool. Remember to regularly review and update your configuration based on customer interaction and feedback.

The floating element is just one part of your gift promotion strategy. Combine it with other promotional elements like progress bars and targeted messaging for maximum impact. Regular testing and refinement of your settings will help create the most effective promotion for your store.