Skip to main content
All CollectionsPreorder
Customizing the Style of Pre-order Buttons
Customizing the Style of Pre-order Buttons

Learn how to customize the style of your pre-order button to match your store's theme and enhance the visual appeal of your widgets.

Zara avatar
Written by Zara
Updated over 4 months ago

Where to Find Style Customization:

  1. Navigate to the Pre-order Tab:

    • From your Shopify admin dashboard, go to Apps.

    • Select Notify! Back in Stock | Pre-order.

    • Click on the Pre-order tab.

  2. Accessing Customization Settings:

    • In the Pre-order functionality section, click on Customize appearance.

    • Click on Style to open the style customization options.


Customizing the Widget Style:

You have two main options for customizing the widget style: The default is Smart Matched with Your Theme and Custom Style.

  1. Smart Matched with Your Theme (Suggested):

    • This option automatically matches the style of the pre-order button with your store's existing theme.

    • You can add extra CSS code for further customization if needed.

    • Extra CSS Code: Use this field to enter custom CSS code to apply additional styling to the pre-order button.

  2. Custom Style:

    • This option allows you to manually customize various aspects of the pre-order button's appearance.

    • Badge Text Color: Set the color of the text on the pre-order badge.

    • Badge Background Color: Choose the background color of the pre-order badge.

    • Badge Border Radius: Adjust the border radius of the pre-order badge for rounded corners.

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

    • Button Background Color: Choose the background color of the pre-order button.

    • Button Border Color: Set the color of the border around the pre-order button.

    • Button Border Radius: Adjust the border radius of the pre-order button for rounded corners.

    • Button Border Size: Set the thickness of the border around the pre-order button.

    • Extra CSS Code: Use this field to enter custom CSS code for additional styling.


Advanced Customizations:

  • CSS Customization: For advanced customizations, you can request the technical support team to add custom CSS codes. This allows you to add animations, hover effects, and other advanced styling options to your pre-order widgets.

  • Requesting Advanced Customizations: Click on the Request advanced customizations link at the bottom of the customization settings to contact the support team for further assistance.


FAQs:

  1. How do I enable the pre-order button on specific pages?

    • Use the toggle button in the customization settings to enable or disable the pre-order button on product, collection, and home pages.

  2. Can I customize the text on the pre-order button?

    • Yes, you can edit the button label in the customization settings to display your preferred text.

  3. How do I match the pre-order button style with my theme?

    • Use the "Smart Matched with Your Theme" option to automatically match the button’s appearance with your store’s theme.

  4. What if I need advanced customizations for my pre-order button?

    • You can request advanced customizations by clicking the Request advanced customizations link to get assistance from the technical support team.


How to Use This Information:

  1. Regularly Update:

    • Regularly check and update the pre-order button settings to ensure they align with your store’s theme and marketing strategies.

  2. Enhance User Experience:

    • Customize the pre-order buttons to provide a seamless and engaging experience for your customers across different pages.

  3. Leverage Advanced Customizations:

    • Utilize advanced customizations to add unique styling and functionality to your pre-order buttons, making them stand out and attract more pre-orders.

Did this answer your question?