How to setup custom colors for preorder button

By default, the preorder button in STOQ inherits the colors from your Shopify theme. If you want the preorder button to stand out or match a specific brand color, you can override the default colors with custom text and background colors directly in the STOQ app.


Custom button colors are configured per preorder offer from the Widget tab, so you can use different colors for different offers.


custom-colors-preorder-button-overview



How It Works


When you enable custom colors, STOQ overrides your theme's default button styling for the preorder button only. You can set:


  • Text color — The color of the button label (e.g., "Preorder").
  • Background color — The fill color of the button itself.


These colors apply to the preorder button on the product page. They do not affect other buttons on your store or the "Add to cart" button for non-preorder products.



Requirements


Before setting up custom button colors, make sure:


  • You have at least one preorder offer created in STOQ.
  • The offer is linked to at least one product.



Enable Custom Colors


Follow these steps to set custom colors on the preorder button.


Steps


  1. Open the STOQ app in your Shopify admin.
  2. Go to Preorders from the left menu.
  3. Click Edit on the preorder offer you want to customize.
  4. Navigate to the Widget tab.
  5. Under the Widget section, check the Use custom colors for button checkbox.
  6. Click Customize to expand the color settings.
  7. Click the Text color swatch and pick your desired text color.
  8. Click the Background color swatch and pick your desired background color.
  9. Click Save.


custom-colors-preorder-button-enable


The preview on the right updates in real time so you can see exactly how the button will look before saving.


Tip: Choose a text color that has strong contrast against the background color. For example, white text on a dark background or dark text on a light background ensures the button label is easy to read.



Change Button Colors


If you already have custom colors enabled and want to update them:


Steps


  1. Open the STOQ app and go to Preorders.
  2. Click Edit on the preorder offer.
  3. Navigate to the Widget tab.
  4. Under the Widget section, click Customize next to "Use custom colors for button."
  5. Click the Text color swatch and select a new color.
  6. Click the Background color swatch and select a new color.
  7. Click Save.


custom-colors-preorder-button-change



Remove Custom Colors


To revert the preorder button back to your theme's default button colors:


Steps


  1. Open the STOQ app and go to Preorders.
  2. Click Edit on the preorder offer.
  3. Navigate to the Widget tab.
  4. Uncheck the Use custom colors for button checkbox.
  5. Click Save.


custom-colors-preorder-button-remove


Once unchecked, the preorder button automatically uses your Shopify theme's default button styling again.



Color Settings Reference


Setting

Description

Use custom colors for button

Checkbox to enable or disable custom button colors. When unchecked, the button uses your theme's default colors.

Text

The color of the button label text. Click the color swatch to open the color picker. You can enter a hex code or pick a color visually.

Background

The fill color of the button. Click the color swatch to open the color picker. You can enter a hex code or pick a color visually.


Note: Custom button colors are independent of the disclaimer colors. The disclaimer box below the button has its own separate text color, background color, and border radius settings.



Troubleshooting


Problem

Solution

Custom colors not showing on the product page

Make sure the Use custom colors for button checkbox is checked and the offer is saved. Clear your browser cache and reload the product page.

Button still uses theme colors after enabling

Verify the preorder offer is enabled and linked to the product. Check that the STOQ app embed is turned on in your theme settings.

Colors look different on the live site vs. the preview

Some themes apply additional CSS that may override STOQ's button styles. Use your browser's developer tools to check for conflicting styles. You can add !important to override theme CSS using STOQ's custom CSS feature.

Want to match exact brand colors

Use a hex color code. Click the color swatch, then type the hex value directly (e.g., #FF5733) for precise color matching.



FAQs


Q : Can I use different button colors for different preorder offers?

A : Yes. Custom button colors are configured per offer. Each preorder offer has its own Widget tab with independent color settings. You can use one color scheme for a product launch and a different one for an ongoing preorder.


Q : Do custom colors affect the button on collection pages too?

A : Custom button colors apply to the preorder button on the product page. If you have enabled preorder badges or buttons on collection and home pages through Preorders > Pages, those use their own separate styling.


Q : Does this change the "Add to cart" button for regular products?

A : No. Custom preorder button colors only affect products linked to the preorder offer. The standard "Add to cart" button for non-preorder products remains unchanged and continues to use your theme's default styling.


Q : Can I set button colors for the preorder button on the cart page?

A : No. The custom color settings apply to the preorder button on the product page only. Cart page buttons use your theme's default styling.


Q : What happens if I disable custom colors?

A : The preorder button reverts to your Shopify theme's default button colors. Your custom color selections are preserved in STOQ, so if you re-enable custom colors later, the previous colors are restored.




Updated on: 23/04/2026

Was this article helpful?

Share your feedback

Cancel

Thank you!