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 button
4. Select the Button tab at the top of the page
5. Click Button position & style from the options menu

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

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

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

Changing Button Position

1. In the Button position section, select one of the three radio button options
2. The system automatically saves your selection after a brief delay
3. A confirmation message appears asking if the button appears correctly
4. Click Yes if the button is positioned correctly, or No if you need assistance

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

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

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:

/* 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;
}

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

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.

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.

Updated on: 20/02/2026