Can I change the floating popup icon in my Shopify store?
APP SETUP
CREATE FREE GIFTS
HOW TO'S
PROMOTE YOUR FREE GIFT
GIFT INVENTORY
GIFT FRAUD
FAQS
TROUBLESHOOTING
Yes, you can easily customize the floating popup icon in your store to match your brand aesthetics and promotional needs. This guide will walk you through the process of changing and customizing the Dr Free Gift, BOGO Buy X Get Y floating gift icon that appears on your store pages.
Accessing Icon Settings
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
To modify your floating popup icon, follow these steps:
- Navigate to your app’s admin panel
- Access the “Popup Widgets” section
- Select the “Floating Icon or Text” tab
- Ensure “Floating Icon/Text Enabled” is switched ON
- Ensure “Float Type,” is “Floating Gift”
- Click “Change Icon” button
Changing the Icon
Clicking the “Change Icon” button in the configuration panel opens a selection window with multiple icon options:
Pre-designed Icon Options
The icon selector provides two sets of icons:
- Icons optimized for white backgrounds (top section)
- Icons optimized for non-white backgrounds (bottom section, gray background)
These icons include:
- Various gift box designs in different colors (red, blue, green, yellow, purple)
- Minimalist outline gift icons
- Patterned gift boxes (e.g., polka dots)
- Both modern and traditional gift box styles
Custom Icon Upload
If none of the pre-designed icons match your needs, you can provide your own custom icon by entering a URL in the field at the bottom of the icon selection window. When using a custom icon, ensure it meets these technical requirements:
- The URL must use HTTPS protocol for security
- The image URL must end with one of these file extensions: .jpg, .jpeg, .png, or .gif. The system validates this using strict pattern matching. For example:
- Keep the file size small (ideally under 50KB) to ensure fast loading times
- Recommended dimensions: 64×64 pixels for optimal display
- Use image compression tools to optimize file size while maintaining quality
- Consider using PNG format for icons with transparency or GIF for simple animations
Additional Icon Customization
After selecting your icon, you can further customize its appearance with these options:
Animation
- Toggle “Use Bounce Effect On-load” to add an attention-grabbing animation when the page loads
Visual Enhancement
- Enable “Display A Circle Around The Gift Icon” to add a circular background
- Customize the “Gift Icon Circle Background Color” to match your store’s color scheme
- Adjust the “Gift Icon Close (X) Color” for the dismissal button
Positioning
- Set the icon position using the “Position On Shop” dropdown
- Choose from options like Left-middle and Right-middle
- Note: Position changes will only be visible on the live store, not in the preview
Best Practices for Icon Selection
When choosing and customizing your floating popup icon:
- Consider your background: Select an icon that provides good contrast with your store’s background color
- Match your branding: Choose colors that complement your store’s color scheme
- Test visibility: Ensure the icon is easily noticeable without being intrusive
- Check mobile appearance: Verify the icon looks good on both desktop and mobile devices
- Consider seasonal changes: Plan for icon updates during different seasons or promotional periods
Troubleshooting
If your icon isn’t displaying correctly:
- Verify that “Floating Icon/Text Enabled” is switched ON
- Check that “Float Type” is set to “Floating Gift”
- Clear your browser cache and refresh the page
- For custom icons, ensure the URL is accessible and the image format is supported
Conclusion
The floating popup icon serves as a vital touchpoint between your store and its customers, drawing attention to your gift promotions in a subtle yet effective way. By carefully selecting and customizing your icon, you create a more engaging shopping experience that encourages customer interaction with your gift programs. Whether you choose from the pre-designed options or implement your own custom icon, remember that the key to success lies in finding the right balance between visibility and user experience.