Widget Design

Customize the Back-in-Stock widget button, subscription modal, and form states to match your brand.

The Back-in-Stock widget is fully customizable from the Galantis dashboard. Every visual element — the subscription button, the modal that opens when a customer taps it, the form colors, and the states shown after submission — is controlled through Back-in-Stock → Settings and applied to your storefront immediately when saved.

One configuration applies across your entire storefront.

What these settings control

• Button position, type, color, font, and label text
• Modal headline and font
• Form background and state colors (default, success, error)
• Font sizing and spacing

How to access

1. Open Back-in-Stock Settings

   In the Galantis dashboard, go to Back-in-Stock → Settings.

2. Adjust appearance settings

   Configure the options described below.

3. Save

   Changes are applied to your storefront immediately after saving — no redeployment needed.

Settings

Button

Button position: Controls where the subscription button appears on the product page.

• Right — Bottom-right corner. Default and works for most themes.
• Left — Bottom-left corner. Use when your theme places other fixed elements at the bottom-right.
• Custom — Precise placement using CSS offset values. Use when neither default position fits your theme layout.

---

Button type: Determines the visual style of the button.

• Pre-designed — Uses Galantis’s built-in button design. Optimized for visibility and mobile tap targets.
• Custom — Fully custom button design for stores with strict brand guidelines.

---

Button background color: The fill color of the subscription button. Enter a hex value. We recommend using your primary brand color or a high-contrast accent color that stands out against your product page background.

---

Button font: The typeface used for the button label text. Enter a font family name. The font must be loaded by your Shopify theme — the widget inherits fonts available on the page.

---

Button text: The CTA label displayed on the button. Keep this direct and action-oriented. Common values:

• Notify me when available
• Alert me when back
• Get notified

---

Button font size and spacing: Controls the size of the button label text and the internal padding of the button. Adjusting these is useful when your theme’s layout makes the default button feel disproportionate.

Test button sizing on mobile. Back-in-Stock subscriptions are most commonly submitted from mobile devices — a button that looks right on desktop may have a tap target that is too small on a phone screen.

Modal

The modal is the overlay that opens when a customer taps the subscription button. It contains the headline text, the WhatsApp number input field, and the submit button.

---

Headline text: The primary message shown at the top of the subscription modal. This is the customer’s first prompt after tapping the button — it should confirm what they are signing up for and set expectations.

Effective headline examples:

• Get notified on WhatsApp when this is back in stock
• We'll message you on WhatsApp the moment it's available
• Leave your number and we'll let you know

---

Headline font: The typeface used for the modal headline. Enter a font family name consistent with your store’s typography.

---

Form background color: The background color of the subscription modal. Use your store’s background color or a neutral that keeps the form legible. Avoid colors that reduce contrast against the input field and submit button.

The modal appears on top of your product page content. A form background color that closely matches your page background can make the modal feel like it did not open — use a slightly offset shade or a subtle border to ensure the modal is visually distinct from the page behind it.

Form States

The widget displays distinct visual states after the customer interacts with the form. Each state has its own background color to communicate the outcome clearly.

---

Success background color: Shown after a customer successfully submits their WhatsApp number. The success state confirms the subscription was recorded and sets the expectation that they will receive a WhatsApp message when the product is back.

Use a color that communicates a positive outcome — green or your brand’s success color. Ensure sufficient contrast for the confirmation text displayed over it.

---

Error background color: Shown when a submission fails — for example, when an invalid phone number format is entered or a network error occurs.

Use a color that signals an issue without being alarming — a muted red or amber works well.

Best practices

• Match button color to your brand’s primary CTA color. The Back-in-Stock button competes visually with Add to Cart — using a secondary color that is clearly distinct from your main CTA reduces the chance of customer confusion while still being visible.
• Keep the headline text specific. “Get notified” is weaker than “We’ll message you on WhatsApp when this is back.” Customers who understand exactly what they are subscribing to convert at higher rates and are less likely to report the notification as unexpected.
• Test all three form states before launch. Verify the success state, the error state, and the default state each display as intended on both desktop and mobile. A success state that uses your error color creates customer confusion.
• Revisit widget design after theme updates. Shopify theme updates can shift layout elements that interact with the widget button position. Check the widget placement after any theme update that affects product page layout.
• Use Custom button type only when necessary. Pre-designed buttons are optimized for mobile tap targets and accessibility contrast. Custom buttons require manual testing to ensure they meet the same standards.

Related guides

• Widget Installation — Installing the widget and verifying it on your storefront
• Subscription Lifecycle — What happens after a customer submits the form