Skip to main content
All CollectionsBack-in-StockCustomization
How to customize the button?
How to customize the button?

Learn how to change the Button text, Background color, Text Color, Border color, Border radius, and Border size of your button.

Zara avatar
Written by Zara
Updated over a month ago

The Back-in-Stock Widget customization page in Notify Me! allows you to tailor the appearance of the "Notify Me!" button across different pages of your Shopify store. This customization helps the widget integrate seamlessly with your store’s design and enhances the user experience by allowing flexibility in how and where the button appears.

Where to Find the Customization Section

To begin customizing the "Notify Me!" button for your store, follow these steps:

  1. Log in to Your Shopify Admin:

    • Navigate to your Shopify store’s dashboard.

  2. Go to the Notify Me! App:

    • In the sidebar, under the Apps section, click on Notify Me! to open the app.

  3. Access the Widget Customization Section:

    • Once in the Notify Me! dashboard, look for the Back-in-Stock settings. Under this section, you’ll find the option to customize the widget by clicking on Customize appearance in the sidebar.

  4. Customization Panel:

    • You will now be on the customization page, where you can adjust the button’s appearance and placement across different pages of your store.

Widget Customization Overview

  1. Widget Placement:

    • Product Pages: Display the "Notify Me!" button on individual product pages, allowing customers to subscribe for back-in-stock notifications when an item is sold out.

    • Collection Pages: Enable the button on collection pages, so customers can subscribe without having to click into the product details.

    • Home Page: You can place the "Notify Me!" button on your store’s homepage, offering customers an easy way to subscribe to updates right from the first page they see.

  2. Button Status:

    • Easily toggle the button’s visibility on each page type (Product Page, Collection Page, or Home Page) by switching the button status ON or OFF, depending on whether you want the widget to appear.

  3. Button Label:

    • Customize the text on the button to match your store’s branding. The default label is "Notify me," but you can change it to something else that suits your tone (e.g., “Get Notified” or “Be the First to Know”).

Styling the Button

You have two primary options to style the button in a way that fits your store’s design:

  1. Smart Match with Theme (Recommended):

    • Automatically match the button’s style to your Shopify theme. This option adjusts the colors, font, and size of the button to fit seamlessly with the rest of your store’s design.

  2. Custom Style:

    • For greater control, you can select the Custom Style option and adjust the following:

      • Button Text Color: Set the color of the text on the button.

      • Button Background Color: Choose a background color to make the button stand out or blend with your store’s color scheme.

      • Button Border Color: Customize the border color for additional styling control.

      • Button Border Radius: Adjust the roundness of the button’s corners by changing the border radius.

      • Button Border Thickness: Control how thick or thin the border should be.

      • Custom CSS: For advanced customization, add your own CSS code to fine-tune the widget’s design, including animations or hover effects.

Live Preview

  • Live View: As you make changes to the button's placement, label, and style, the real-time preview (Live View) shows you how the widget will look on your store. This feature helps you ensure that the widget blends perfectly with your theme before you publish the changes.

Advanced Customization Options

For merchants needing more advanced customization, such as specific animations or custom widget placements, Notify Me! offers advanced widget customization services. You can request assistance by clicking the Request Advanced Customizations link at the bottom of the customization page. Our support team can help you with:

  • Advanced CSS adjustments

  • Adding hover effects

  • Implementing custom animations

  • Custom placement of the widget on product, collection, or home pages

By using these customization options, you can create a fully branded and engaging back-in-stock notification experience, ensuring that your "Notify Me!" button complements your store’s overall design and provides an intuitive experience for your customers.

Did this answer your question?