How to adjust the position of the floating gift widget

If the floating gift widget overlaps with other elements on your store (such as a chat button, sticky cart, or cookie banner), you can easily move it left or right on desktop or mobile.

To do this, click edit for any offer, then navigate to Content & Style → Gift Widget.

Click [change position] and choose where you want the widget to appear on the desktop or mobile.

If you need to adjust it further, you can move it up, down, left, or right using a small CSS adjustment in your theme.

This guide shows you how to reposition the widget to a custom position.

Step 1: Open your Shopify theme code

1. In your Shopify admin, go to Online Store → Themes
2. Click ••• (three dots) on your active theme
3. Click Edit code

Step 2: Open your main CSS file

Open one of the main stylesheet files. Depending on your theme, this is usually one of the following:

• assets/base.css      
• assets/theme.css      
• assets/styles.css      

Scroll to the bottom of the file.

Step 3: Add the custom CSS

Paste the following code at the end of the file:

/* Floating widget */
.ahlGiftWdgIcnHldAll {
bottom: 40px !important;
top: auto !important;
}

/* Notification popup */
.ahlGiftWdgCntHld {
bottom: 110px !important;
top: auto !important;
}

Then click Save.

The code includes two parts: the first repositions the floating widget (.ahlGiftWdgIcnHldAll), and the second repositions the notification popup (.ahlGiftWdgCntHld), so it follows the floating widget.

The notification popup is 90px above the floating widget, so when you set the bottom value for the floating widget, just add 90px to that number, as shown in this example.

Adjusting the Vertical Position (Up / Down)

The bottom   value controls how far the widget sits from the bottom of the screen.

Examples:

Example:

/* Floating widget */
.ahlGiftWdgIcnHldAll {
bottom: 120px !important;
top: auto !important;
}

/* Notification popup */
.ahlGiftWdgCntHld {
bottom: 210px !important;
top: auto !important;
}

Moving the Widget Left or Right

You can also adjust how far the widget sits from the side of the screen.

Move the widget further from the right edge

Increase the right   value:

/* Floating widget */
.ahlGiftWdgIcnHldAll {
right: 40px !important;
}

/* Notification popup */
.ahlGiftWdgCntHld {
right: 40px !important;
}

Examples:

Move the widget to the left side of the screen

You can place the widget on the left side instead of the right.

/* Floating widget */
.ahlGiftWdgIcnHldAll {
left: 40px !important;
right: auto !important;
}

/* Notification popup */
.ahlGiftWdgCntHld {
left: 40px !important;
right: auto !important;
}

Examples:

Mobile-specific adjustment (optional)

If you want a different position on mobile devices, use this version:

/* Desktop */
@media (min-width: 750px) {
.ahlGiftWdgIcnHldAll {
bottom: 120px !important;
top: auto !important;
}
.ahlGiftWdgCntHld {
bottom: 210px !important;
top: auto !important;
}
}

/* Mobile */
@media (max-width: 749px) {
.ahlGiftWdgIcnHldAll {
bottom: 90px !important;
top: auto !important;
}
.ahlGiftWdgCntHld {
bottom: 180px !important;
top: auto !important;
}
}

You can also use the code above to apply the change to desktop or mobile only. For example, if you want the change to affect only desktop, just add the /* Desktop */ part.