Spin Wheel Design

How to Customize the Spin Wheel

With ONE pop ups, you have virtually limitless customization options that you can choose from. This is so that you can craft the perfect pop up for your website, and ensure that it blends right into your brand instead of sticking out like a sore thumb. Please see below for an overview of all the changes that you can make to the fortune wheel.




Overlay color changes the background space color behind the pop up and the overlay opacity. SEE HERE

There’s also an option to allow auto translation from other apps. When enabled, third-party apps will translate the content in the pop-up. Please note that this may potentially affect the pop-ups layout depending on the translation. SEE HERE

Branding. Here you can add the logo to your Fortune Wheel and wheel itself, adjust the size. The logo on the wheel if added appears in its center and will spin with the wheel. SEE HERE

Pop up Position. Choose the wheel type and the display position on your website.

Pop up Box Here you can adjust the background color of the Fortune Wheel layout, color of the close button, add and adjust the border of the wheel and its color/font.

If the “Site Default” option is selected for the font, then the pop-up will use the default font from your site. SEE HERE

Logo. Add your brand logo to the spin wheel

Background. The background image of the Fortune Wheel, its pattern and position can be changed here. Additionally you can add a mobile background image. It will be shown if there’s no image selected for the mobile version: SEE HERE

Wheel Images. If you want to change the Fortune Wheel image or the image of the pointer, this is the place to do so. If you'd like to create an entirely new wheel from scratch, you can download our .psd file by CLICKING HERE

Wheel text. The color, size format of the text on the wheel can be changed here. (Reminder: the text of each slice is adjusted on the previous Rewards step**)**

Title. Change the size, color, text itself and format of the title text here.

Subtitle. Change the size, color, text itself and format of the title text here.

Form Input. Change the size, color and format of the text that is being filled out by the shopper and the size, color, format of the placeholder’s text.

Button (Subscribe). Changes the size, color, format of the text on the button. Also, here you can adjust the color of how the button will look like if a shopper hovers the mouse over the button and the color of the button and its text if it is disabled (applied when the wheel is spinning) SEE HERE.

Button (Decline). Change the size, color, format of the text of the decline button here.

Error Messages. Defines the color of the text and error notification that appears if some fields are not filled in the form or the information that is filled is incorrect. (Example: SEE HERE)

Rules. A good place to describe all conditions (if any) for your customers to see. On this step you can adjust the size, color, format of the text and the text of the rules.

CSS section. If the options above aren't enough customization for you, we give you direct access to the CSS of the popup itself!

JS section. If even having the CSS isn't enough, we ALSO give you access to the Javascript in case you want to do some REALLY custom stuff!

Pro Tip: If you find yourself having trouble customizing any popups, please don't hesitate to reach out to our live chat team for help!

Updated on: 09/08/2024