Skip to main content

Customize the Pre-order Button Style to Match Your Theme

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.

Updated yesterday

How to Access Style Customization

  1. Open the App

    • Go to Shopify Admin > Apps

    • Select Notify! Back in Stock | Pre-order

    • Click on the Pre-order tab

  2. Open Style Settings

    • Scroll to the Pre-order Functionality section

    • Click Customize Appearance

    • Select the Style tab

Customizing the Widget Style

You can choose between:

1. Smart Matched with Your Theme (Recommended)

  • Automatically matches your store’s theme

  • Add extra CSS for further tweaks

  • Extra CSS Code field: Input any custom styles

2. Custom Style

Manually configure button and badge styles:

  • Badge Text Color – Color of text in the badge

  • Badge Background Color – Badge background color

  • Badge Border Radius – Rounded corner settings

  • Button Text Color – Button label color

  • Button Background Color – Button fill color

  • Button Border Color – Border color

  • Button Border Radius – Roundness of button corners

  • Button Border Size – Border thickness

  • Extra CSS Code – Add advanced styles (e.g. animations)

FAQs

Can I choose where the button appears?
Yes, toggle the button on/off for product, collection, or home pages in the settings.

Can I change the button text?
Yes, you can edit the label in the customization settings.

How do I match the button with my theme?
Select Smart Matched with Your Theme for automatic styling.

How do I request custom styling help?
The support team can help add animations, hover effects, and more.

Best Practices

  • Update regularly: Keep styles aligned with promotions and seasonal changes

  • Prioritize UX: Use consistent and appealing visuals to guide users

  • Use advanced styling: Stand out with animations and branding-specific tweaks

Did this answer your question?