How does the Sticky Buy Me Widget work in the Buy Me app?

Status

Make sure the Buy Me app status (on the Dashboard page) is enabled to display the Sticky Buy Me Widget on the product pages.

If you wish to disable the widget for a specific device, simply uncheck the Desktop Enabled and/or Mobile Enabled checkboxes. Don’t forget to click the Save button after making any changes.

Choose Design

This option allows app users to select readymade templates for the Sticky Buy Me Widget, with separate templates available for Desktop and Mobile.

From the Desktop list, users can choose a template for the Sticky Buy Me Widget displayed on the product page. The app offers multiple pre-designed templates, and users can simply select their preferred one. Additionally, users have the flexibility to remove optional elements such as Product Image, Product Title, Product Price, Product Compare Price, Variant Selector, Quantity Selector, Review Stars, and Social Media Sharing Icons. All other settings will be applied from the Sticky Buy Me Widget settings page.

Similarly, from the Mobile list, users can choose a template for the Sticky Buy Me Widget displayed on the product page. The app provides various pre-made designs, and users can pick the one that best suits their store. Like the desktop version, users can also remove optional elements. All remaining settings will be managed through the Sticky Buy Me Widget settings page.

Others (Optional)

Additional Features and Actions

Buy/Add To Cart Button Click Action: This option allows you to control what happens when a customer clicks the Buy/Add To Cart button. The app offers the following choices:

Automatic: Seamlessly adds the product to the cart. Depending on your theme, the customer may stay on the same page or be redirected to the cart page.
Reload & Stay on Product Page: Adds the product to the cart and reloads the page for a smooth shopping experience.
Redirect to Cart Page: Adds the product to the cart and immediately takes the customer to the Cart page for a faster checkout process.
Skip Cart & Go Directly to Checkout: Bypasses the Cart page and takes customers straight to Shopify’s native Checkout page, reducing cart abandonment.

Note: If you're using a third-party payment gateway instead of Shopify’s native checkout, choose the Redirect to cart page option. If you have any doubts, contact us via in-app chat or email.

Review Stars: Enabling this option will display star ratings in the Sticky Buy Me Widget, based on customer reviews from your selected review app. You must select an appropriate review app from the provided list. If your app is missing, contact us via chat or email, and we will include it.

Display Product Name with Variant Name: If enabled, this setting will show both the product name and the selected variant name in the Sticky Buy Me Widget.

Enable Instant Load: When enabled, the Sticky Buy Me Widget will appear as soon as the product page loads in the customer’s browser. This is useful if the default Add To Cart button is positioned too low on the page, requiring customers to scroll. If you’re unsure whether this setting is right for your theme, contact us for guidance.

Desktop Visibility: This setting allows you to customize what product details appear in the Sticky Buy Me Widget on the desktop. You can choose to display:
Product Image
Product Title
Product Price
Product Compare Price

Enable the options that are most relevant to your store.

Mobile Visibility: Similar to Desktop Visibility, this setting lets you customize product details shown in the Sticky Buy Me Widget on mobile devices. You can choose to display:
Product Image
Product Title
Product Price
Product Compare Price

Select the details that best suit your mobile shopping experience.

Positions (Optional)

The Position settings in the Sticky Buy Me Widget allow you to control where the widget appears on your store's pages. By adjusting these settings, you can ensure the widget is placed optimally without overlapping important elements or affecting the user experience. You can set the position for both Desktop and Mobile separately, making it easier to customize based on different screen sizes.

Widget Position: Choose whether the Sticky Buy Me Widget appears at the top or bottom of the page. This setting can be configured separately for Desktop and Mobile.
Widget Vertical Position: Adjust the widget's vertical placement in pixels to display it at a precise location on the page.
Widget z-index Position: Modify the widget's z-index value to ensure it appears above other elements, preventing overlap with banners or third-party apps.

Make sure to click the Save button after making any changes to apply the new settings.

Additional Colors (Optional)

The Additional Colors settings allow you to personalize the appearance of the Sticky Buy Me Widget by overriding your Shopify theme's default colors. By default, the widget inherits colors from your Shopify theme.

Product Name: Change the color of the product name displayed in the Sticky Buy Me Widget to match your store’s branding and design preferences.
Price: Change the color of the product price displayed in the Sticky Buy Me Widget to match your store’s branding and design preferences.
Compare Price: Change the color of the product’s compare price displayed in the Sticky Buy Me Widget to match your store’s branding and design preferences.
Buy Me Widget Background Color: Change the background color of the Sticky Buy Me Widget to match your store’s branding and design preferences.

Make sure to click the Save button after making any changes to apply your custom colors.

Buy/Add To Cart Button (Optional)

This setting allows you to personalize the Buy/Add To Cart button within the Sticky Buy Me Widget. Additionally, you can modify the text, colors, and animations to better match your brand and improve user engagement.

Buy Button Text: Customize the default "Add to Cart" text with more compelling phrases like "Buy Now" or "Get It Today" to drive higher conversions.
Sold Out Button Text: Personalize the button text for out-of-stock products to provide clear messaging and keep customers engaged.
Button Text Colors: Adjust the button text color to seamlessly match your store’s branding and enhance visual appeal.
Button Back Colors: Customize the button’s background color to create a cohesive and professional store design.
Button Animation: Add subtle animations to make the button stand out and capture customer attention.
Button Click Animation: Enhance user experience with engaging click animations that reinforce action and interaction.

After making changes, click the Save button to apply your custom settings.

Variants (Optional)

By default, the Sticky Buy Me Widget displays product variants. However, you can enable or customize variant settings separately for Desktop and Mobile to match your store’s needs.

Enable Variants: Choose whether to display product variants within the Sticky Buy Me Widget.
Show Variant Labels: Display labels like Size, Color, Material, etc., to help customers easily identify their choices.
Customize Appearance: Modify label color, text color, background color, and border styling (including border thickness and radius) for a more polished look.

These settings help improve the shopping experience by making variant selection more intuitive within the Sticky Buy Me Widget. Remember to save your changes after customization.

Quantity Box (Optional)

By default, the Quantity Box is not displayed in the Sticky Buy Me Widget, even if it's available on your store’s product page. However, you can enable it based on your preference.

Enable for Desktop and Mobile: Display the Quantity Box on both devices for a seamless shopping experience.
Enable for Desktop Only: Keep it visible only for desktop users while keeping the mobile view clean.
Enable for Mobile Only: Optimize the mobile shopping experience by displaying the Quantity Box only on mobile devices.

These settings allow you to control how customers select quantities, making the purchasing process smoother. Don’t forget to save your changes!

Show Discount Badge

Highlight discounts on your products with a Discount Badge to attract customer attention and encourage more purchases.

Discount Badge Desktop Enabled: Enable this option to display the discount badge on the Sticky Buy Me Widget for desktop users.
Discount Badge Mobile Enabled: Enable this option to show the discount badge on mobile devices, ensuring a consistent shopping experience across all platforms.

Customize the look of your discount badge to match your store’s branding and style.

Style (Percentage or Text): Choose whether to display the discount as a percentage (e.g., 20% OFF) or as an amount (e.g., $200 OFF).
Template: Allows you to set the text want to display in the badge. While {{ discount }} variable will display the discount in either percentage or in the amount.
Text Color: Pick a color for the discount text to ensure visibility and contrast.
Background Color: Choose a background color for the badge to make it stand out on the Sticky Buy Me Widget.

These customization options allow you to create an eye-catching discount badge that enhances conversions while maintaining a visually appealing storefront. Remember to save your changes!

Social Media Sharing (Optional)

Boost your store’s visibility with Social Media Sharing, which is enabled by default. This feature allows customers to share products directly on their favorite social media platforms, helping you gain free referral traffic effortlessly.

Customization Options:

Enable/Disable on Desktop & Mobile: You can choose to display or hide social media sharing icons separately for desktop and mobile.
Select Social Media Icons: Pick which social media platforms you want to offer for sharing.
Customize Icon Colors: Adjust the colors of the social media icons to match your store’s branding.

Encourage customers to share their favorite products and expand your reach with built-in social sharing. Make changes as needed and don’t forget to save!

Custom CSS (Optional)

This section is an optional and advanced feature designed for merchants with developers or knowledge of CSS. In most cases, you won’t need to modify anything here, as the Sticky Buy Me widget and other elements are optimized for a seamless experience.

However, if you require extensive customization for the Sticky Buy Me widget, Sticky Buy Me Cart, Quick Buy Me Widget on Product Listing Pages, or URL-Based Listing, you can apply custom CSS styles here. Simply add the necessary CSS classes to achieve the desired look and feel for your store.

Note: Modifying CSS without expertise may affect the widget’s display and functionality. Proceed with caution or consult a developer.

Updated on: 20/03/2025