Spin Wheel

Author: An Do 156 views

The Spin Wheel element in EComposer allows you to create an engaging, gamified experience that attracts visitors and encourages them to take action.
By spinning the wheel, customers can win prizes such as discounts, coupons, or free gifts — making promotions more interactive and exciting.

You can use the Spin Wheel on any page of your store, such as the homepage, product page, or landing page. It can also be displayed inside a Popup to capture customer attention more effectively and grow your email or subscriber list.

This element is fully customizable, you can adjust the wheel’s design, colors, text, rewards, and trigger behavior to match your brand style and marketing strategy.

To add a Spin Wheel element to your page, please drag it from the Shopify tab to the position that you want.

EComposer divides elements into two separate tabs. The Content tab helps you add content to the elements with the element’s settings. The Design tab includes options that allow you to design for that element.

1. Content

1.1 General

The Spin Wheel element comes with three slides by default. You can click Add new prize to add more prizes. Also, you can duplicate (clone), remove, or move prizes. Please watch the video below.

In each prize item tab, you can change the Discount name (it is the name of the prize and will only appear on the left side of the editor, so you can distinguish between the slides), and you can change the Discount code and the Probability of each prize.

Spin Action: You can either choose Click Center or After form submit, depending on your purpose.
Enable fireworks: Tick or untick it if you want to show fireworks after the spin finishes or not.
Spin duration: Choose how many seconds 1 circle takes to finish.

1.2 Arrow

Icon: Our app provides you with a lot of icon options for the Spin Wheel element.
Icon position: You can choose to show it on top, bottom, left, or right.

1.3 Win prize

Heading: Show the heading of a pop-up in a spin wheel when the user wins the prize.
Copy icon: the icon to copy the discount code in the pop-up when the user wins the prize.
Copied icon: the icon after user click copy the discount code in the popup when user win the prize.
Show preview win prize: show the preview of the popup when user win the prize in the editor.

1.4 Lose Prize

Heading: Show the heading of a popup in spin wheel when user lose the prize
Show preview lose prize: show the preview of the popup when user win the prize in the editor.

1.5 Center

Label: Show the label of the spin center.
Icon: Show the icon of the spin center.
Icon position: Allow you to choose either top or bottom
Gap: Adjust the gap between icon and label.

2. Design

2.1 General

We have options for you to design the general setting of the spin wheel however you want. Such as the Width, Background, Box Shadow, Border, Border Radius, and Spacing.

2.2 Center

We have options for you to design the spin Center however you want. Such as the Width, Background, Box Shadow, Border, Border Radius, also for the Center Text and Center Icon design.

2.3 Arrow

We have options for you to design the spin Arrow however you want. Such as the Size, Fill and Stroke.

2.4 Result Popup

We have options for you to design the Result Popup however you want. Such as the Max Width, Background, Box Shadow, Border, Border Radius and Spacing. Also the design style for Result Heading.

2.5 Discount Code Button

We have options for you to design the Discount Code Button however you want. Such as the Typography, Text Shadow, Box Shadow, Width, Height, Text Color, Background, Border, Border Radius and Spacing.

2.6 Copy Code Icon

We have options for you to design the Copy Code Icon however you want. Such as the Color, Size and Rotate.

2.7 All Prize

We have options for you to design the Copy Code Icon however you want. Such as the Color, Size and Rotate.

2.8 Prize 1

From here and other setting below is an option to set the style for each prize we set in the Content tab such as Background Color, Color, and Custom Typo.