> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://stoqapp.crisp.help/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Customize "Notify Me" button look, text and position

STOQ provides comprehensive customization options to ensure the 'Notify me' button seamlessly integrates with your store's design. You can customize the button's text, colors, border radius, and position to match your brand identity perfectly. For advanced users, STOQ also offers dev mode with custom CSS capabilities for complete control over the button's appearance.

### Accessing Button Customization Settings

To customize your 'Notify me' button, you'll need to navigate to the button design settings in your STOQ app.

1. Open the STOQ app from your Shopify admin
2. Click **Back in stock alerts** from the left navigation menu
3. Under the Signup Widget section, click **Customize widget button**
4. Select the **Button** tab at the top of the page
5. Click **Button position & style** from the options menu

![](https://storage.crisp.chat/users/helpdesk/website/-/f/6/9/b/f69b1402a211d800/notify-1_advtph.png)

This opens the button customization panel where you can adjust all visual aspects of your 'Notify me' button.

### Customizing Button Appearance

STOQ provides several built-in options to customize how your button looks, allowing you to match it perfectly with your store's theme without any coding knowledge.

###### Button Text

The button text is what customers see on the button itself. You can customize this to match your brand voice or language preferences.

1. In the **Button text** field, enter your desired text
2. Common examples include "Email me when available," "Notify me," "Get notified," or "Alert me"
3. The text field is required—you cannot leave it empty
4. Changes appear in the preview panel on the right side of the screen

| Tip: Keep button text concise and action-oriented. Short phrases like "Notify me" work better on mobile devices where space is limited.

###### Button Colors

STOQ allows you to customize both the text color and background color of your button to match your store's color scheme.

###### **Text Color:**
1. Click the color swatch next to **Text**
2. Use the color picker to select your desired text color
3. You can enter a hex code directly (e.g., #FFFFFF for white)
4. The preview updates in real-time as you adjust colors

###### **Background Color:**
1. Click the color swatch next to **Background**
2. Use the color picker to select your desired background color
3. Enter a hex code for precise color matching
4. Ensure sufficient contrast between text and background for readability

![](https://storage.crisp.chat/users/helpdesk/website/-/f/6/9/b/f69b1402a211d800/notify-2_1fqmfpj.png)

|| Important: Maintain good color contrast between text and background to ensure the button is readable for all customers, including those with visual impairments. Use a contrast checker tool if needed.

###### Border Radius

The border radius controls how rounded the button corners appear, allowing you to match your store's design aesthetic.

1. In the **Border radius** field, enter a value in pixels
2. Use 0 for sharp corners (square button)
3. Use 5-10 for slightly rounded corners (most common)
4. Use 20+ for pill-shaped buttons (fully rounded)
5. The preview shows how the border radius affects the button appearance

###### Saving Your Changes

After making any customization changes, you must save them to apply the updates to your storefront.

1. Click the **Save** button at the bottom of the customization panel
2. Wait for the confirmation message indicating changes were saved
3. Visit your storefront to see the changes in action
4. Use an incognito browser window to avoid seeing cached versions

### Customizing Button Position

The position of your 'Notify me' button on the product page is crucial for customer visibility and user experience. STOQ offers several positioning options to ensure the button appears in the optimal location.

###### Default Position Options

STOQ provides three built-in position options that work with most Shopify themes without requiring any technical setup.

###### **Floating on Right Side:**
* Button appears as a floating element on the right side of the screen
* Remains visible as customers scroll down the page
* Best for stores with minimal sidebar content
* Highly visible but doesn't interfere with product information

###### **Floating on Left Side:**
* Button appears as a floating element on the left side of the screen
* Remains visible during scrolling
* Best for stores with right-side navigation or content
* Alternative to right-side floating for different layouts

###### **Below Sold Out Button:**
* Button appears directly below the "Sold out" or "Add to cart" button
* Integrates naturally with the product purchase area
* Most common and recommended position
* Works automatically with most Shopify themes

![](https://storage.crisp.chat/users/helpdesk/website/-/f/6/9/b/f69b1402a211d800/notify-3_n2ge8h.png)

### Changing Button Position

1. In the **Button position** section, select one of the available options:
* **Below Sold Out button** — places the button under the Sold out/Add to cart button.
* **Floating on the right** or **Floating on the left** — displays it as a floating button on the selected side.
2. The system automatically saves your selection after a brief delay.
3. Visit an out-of-stock product page and confirm the placement.
4. If the button is still in the wrong position, click **Change position** or contact support so the placement can be adjusted for your theme.

### Positioning on Mobile or in a Custom Theme

If you want the button directly beside or below the purchase area on mobile, or the automatic placement does not match your theme, provide an out-of-stock product URL and describe the desired location. Theme-specific selectors may need to be configured, and the placement can be adjusted for the storefront.

|| Note: A theme switch or theme update can change the product-form structure. Recheck the button position after changing themes.

### Getting Support for Position Adjustments

If the automatic positioning doesn't work perfectly with your theme, STOQ's support team can help you set up a custom position.

###### **When to Contact Support:**
* The button doesn't appear on your product pages
* The button appears in the wrong location
* The button overlaps with other elements
* You want the button in a specific custom location

###### **How to Get Help:**
1. In the Button position section, click the **Change position** button
2. This opens a chat with STOQ's support team
3. Explain where you'd like the button to appear
4. The support team will configure the custom position for you (usually within minutes)
5. They'll notify you when the setup is complete

|| Note: STOQ's support team is available 24/7 to help with button positioning. Most position adjustments are completed within minutes during business hours.

### Advanced Customization with Dev Mode

For merchants with technical knowledge or developers, STOQ offers dev mode which unlocks advanced customization options including custom positioning and CSS styling.

###### Enabling Dev Mode

Dev mode gives you access to advanced settings that aren't available in the standard interface.

1. From the button customization screen, click **Dev mode** in the options menu
2. Toggle the **Dev mode** switch to enable it
3. A confirmation message explains that advanced settings are now available
4. Navigate back to other sections to access the new advanced options

![](https://storage.crisp.chat/users/helpdesk/website/-/f/6/9/b/f69b1402a211d800/notify-4_gq6aew.png)

||| Warning: Dev mode is intended for users with technical knowledge. Incorrect settings may cause the button to not display properly. If you're unsure, contact STOQ support instead of using dev mode.

###### Custom Position with CSS Selector

When dev mode is enabled, you can specify a custom position for the button using CSS selectors.

1. Go to **Button position & style** after enabling dev mode
2. Select the **Custom position** radio button option
3. In the **'Sold out' button selector** field, enter a CSS selector
4. Common selectors include `.product-buttons`, `#add-to-cart`, `.product-form__submit`
5. The button will be placed after the element matching this selector

###### **Finding the Right Selector:**
* Right-click on your "Sold out" or "Add to cart" button in your browser
* Select "Inspect" or "Inspect element"
* Look for the class or ID of the button or its parent container
* Use that class (with a `.` prefix) or ID (with a `#` prefix) as your selector

###### **Example Selectors:**
* `.product-form__buttons` - Common in Dawn theme
* `#AddToCart` - Common in older themes
* `.shopify-payment-button` - For Shopify payment buttons
* `.product-single__form` - For product form containers

###### Custom CSS Styling

Dev mode also provides a custom CSS field where you can write your own CSS rules to style the button beyond the built-in options.

1. In the **Dev mode** section, scroll to **Custom CSS**
2. Enter your CSS rules in the CSS field
3. Target the button using the `.restock-rocket-button-container` class
4. You can also target `.restock-rocket-button` for the button itself
5. Click **Save** to apply your custom CSS

###### Common CSS Customizations:

```css
/* Change button width */
.restock-rocket-button-container {
  width: 100%;
}

/* Add shadow to button */
.restock-rocket-button {
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Change button font */
.restock-rocket-button {
  font-family: 'Helvetica', sans-serif;
  font-weight: bold;
}

/* Add hover effect */
.restock-rocket-button:hover {
  transform: scale(1.05);
  transition: transform 0.2s;
}

/* Adjust button padding */
.restock-rocket-button {
  padding: 15px 30px;
}
```

|| Important: Custom CSS cannot be previewed in the STOQ app. You must save your changes and visit your storefront to see the results. Test thoroughly before finalizing your CSS.

###### CSS Class Reference

When writing custom CSS, you can target these classes that STOQ adds to the button:

* `.restock-rocket-button-container` - The outer container div
* `.restock-rocket-button` - The button element itself
* `.restock-rocket-button-product` - Button on product pages
* `.restock-rocket-button-float` - Floating button variant
* `.restock-rocket-button-container-float-right` - Right-floating container
* `.restock-rocket-button-container-float-left` - Left-floating container

![](https://storage.crisp.chat/users/helpdesk/website/-/f/6/9/b/f69b1402a211d800/notify-5_182coqj.png)

### Testing Your Customizations

After making customization changes, it's important to test them thoroughly to ensure they work correctly across different devices and scenarios.

###### Desktop Testing

1. Visit your store in a regular browser window
2. Navigate to an out-of-stock product page
3. Verify the button appears with your custom styling
4. Check that colors, text, and position match your expectations
5. Test clicking the button to ensure the signup form opens correctly

###### Mobile Testing

1. Open your store on a mobile device or use browser dev tools to simulate mobile
2. Check that the button is visible and properly sized
3. Verify that text is readable on smaller screens
4. Ensure the button doesn't overlap with other elements
5. Test the button functionality on mobile

###### Incognito/Private Browsing

Always test in an incognito or private browsing window to avoid seeing cached versions of your store. This ensures you're seeing the same experience as your customers.

###### Multiple Product Testing

Test the button on several different products to ensure it works consistently across your catalog, especially if you have products with different layouts or variant configurations.

### Common Customization Scenarios

Understanding common customization needs can help you achieve the look you want more quickly.

###### Matching Theme Button Style

To make the 'Notify me' button match your theme's existing buttons:

1. Inspect your theme's "Add to cart" button using browser dev tools
2. Note the background color, text color, border radius, and font
3. Apply the same values in STOQ's button customization settings
4. Use custom CSS if you need to match padding, font-weight, or other properties

###### Creating a Minimal Button

For stores with minimalist designs:

1. Set background color to transparent or white
2. Set text color to your primary brand color
3. Use a border radius of 0 for sharp corners
4. Consider using custom CSS to add a border: `border: 1px solid #000;`

###### Making the Button Stand Out

For stores that want the button to be highly visible:

1. Use a contrasting background color (e.g., bright color on neutral theme)
2. Set text color to white or black for maximum contrast
3. Use a moderate border radius (5-10px) for modern appearance
4. Consider adding custom CSS for shadow or hover effects

###### Seasonal or Promotional Styling

You can temporarily change button styling for sales or seasons:

1. Update colors to match seasonal themes (e.g., red/green for holidays)
2. Change button text to include promotional language
3. Revert changes after the promotion ends
4. Save your original settings before making temporary changes

### Known Limitations

While STOQ provides extensive customization options, there are some constraints to be aware of when customizing your button.

* Custom CSS changes cannot be previewed in the STOQ app—you must save and visit your storefront to see results
* The button inherits some styling from your theme's CSS, which may require custom CSS overrides to fully control
* Floating button positions may not work well on all mobile devices depending on your theme's responsive design
* Custom position selectors require knowledge of CSS and your theme's structure
* Font family customization requires custom CSS—the built-in options don't include font selection
* Very long button text may cause display issues on mobile devices

### Troubleshooting

If you're experiencing issues with button customization, these common solutions can help resolve most problems.

| Symptom | Likely Cause | Fix |
| ---- |
| Changes don't appear on storefront | Browser caching | Clear browser cache and test in incognito window, wait 5-10 minutes for CDN cache to clear |
| Button text is cut off | Text too long or button width too narrow | Shorten button text or use custom CSS to increase button width |
| Colors don't match exactly | Hex code entered incorrectly | Double-check hex code, ensure it includes the # symbol |
| Button appears in wrong position | Theme structure doesn't match default selectors | Contact STOQ support or use dev mode to specify custom selector |
| Custom CSS not working | CSS syntax error or selector specificity issue | Validate CSS syntax, use more specific selectors, add `!important` if needed |
| Button overlaps other elements | Z-index or positioning conflict | Use custom CSS to adjust z-index or margins |
| Button doesn't appear at all | Button disabled or hidden by settings | Check that "Enable signup widget" is turned on in STOQ settings |

### FAQs

**Q: Can I use different button styles for different products?**
**A**: No, STOQ uses a single button style across all products in your store. However, you can use custom CSS with product-specific selectors if you have advanced CSS knowledge and need different styling on specific pages.

**Q: How do I match my button to my theme's existing buttons?**
**A**: Inspect your theme's "Add to cart" button using browser developer tools to find its colors, border radius, and other properties. Then apply those same values in STOQ's customization settings. For advanced matching, use custom CSS to replicate padding, fonts, and other properties.

**Q: Can I add an icon to the button?**
**A**: Not through the built-in settings, but you can add an icon using custom CSS with the `::before` or `::after` pseudo-elements. This requires CSS knowledge and access to icon fonts or SVG code.

**Q: Will my customizations work on mobile devices?**
**A**: Yes, all customizations apply to both desktop and mobile. However, you should test on mobile devices to ensure text is readable and the button is properly sized. Consider using shorter button text for better mobile display.

**Q: Do I need dev mode to change button colors and text?**
**A**: No, you can change button text, colors, and border radius using the standard customization options without enabling dev mode. Dev mode is only needed for custom positioning with CSS selectors and custom CSS styling.

**Q: How long does it take for changes to appear on my store?**
**A**: Changes typically appear within a few minutes, but browser caching and CDN caching can delay visibility. Clear your browser cache and wait up to 10 minutes for changes to fully propagate. Always test in an incognito window.

**Q: Can STOQ support help me with custom CSS?**
**A**: STOQ support can help with button positioning and basic customization, but extensive custom CSS development is outside the scope of standard support. For complex CSS customization, consider hiring a Shopify developer or using STOQ's dev mode if you have CSS knowledge.

**Q: What happens if I disable dev mode after using it?**
**A**: If you disable dev mode, any custom position selectors or custom CSS you've added will remain active and continue working. Dev mode only controls access to these advanced settings—it doesn't affect whether they function.

**Q: Can I preview my changes before saving?**
**A**: The preview panel on the right side of the customization screen shows real-time updates for text, colors, and border radius. However, custom CSS and position changes cannot be previewed and require saving and visiting your storefront to see results.