# Using images instead of prize names in Spin the Wheel

You can enhance the visual appeal of your Spin the Wheel game by using images instead of text for prize names. This approach allows you to display complex prize names more clearly while making the game more engaging.

{% hint style="success" %}
For a detailed Figma template, please reach out to your Customer Success Manager!
{% endhint %}

<figure><img src="https://77049817-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfS5hl0PiysHtKAKMsQTe%2Fuploads%2Fgit-blob-462c6ff91a1d56ed349b4c5669b760d520670c76%2FImage%20for%20Ellie%20(1)%20(1).jpg?alt=media" alt=""><figcaption></figcaption></figure>

There are two ways to achieve this:\
\
**1st method: Adding images as prizes on the template level**

<figure><img src="https://77049817-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfS5hl0PiysHtKAKMsQTe%2Fuploads%2Fgit-blob-6fa459bd81f88f5daba78e222c77ea5402294845%2Fwheel.png?alt=media" alt="" width="563"><figcaption></figcaption></figure>

* First, create an image that includes the prize name and amount.
* The image should be 186 x 90 px.
* We recommend rotating the image 90° as shown in the example below.
* When setting up the prize, enable the 'Replace Name with Image' toggle.
* This method allows you to assign an image to each prize directly in the template.

<figure><img src="https://77049817-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfS5hl0PiysHtKAKMsQTe%2Fuploads%2Fgit-blob-02048b27ea0da9847062f60ee570b746b57a0175%2FScreenshot_116.png?alt=media" alt=""><figcaption><p>BO: Spin the Wheel prize Icon</p></figcaption></figure>

**2nd method: Adding images as prizes on skin level**

<div><figure><img src="https://77049817-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfS5hl0PiysHtKAKMsQTe%2Fuploads%2Fgit-blob-fcd64d759a06b5606df24363832ed670dcf32a55%2FArtboard%206.png?alt=media" alt=""><figcaption></figcaption></figure> <figure><img src="https://77049817-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfS5hl0PiysHtKAKMsQTe%2Fuploads%2Fgit-blob-77cb5f061231ec98f7af0c0c6e93d98220b35260%2FArtboard%205%20(1).png?alt=media" alt=""><figcaption></figcaption></figure></div>

{% hint style="success" %}
With this method, you cannot dynamically change prize positions from the Prize Configuration, as the layout is fixed within the skin itself.
{% endhint %}

* This method allows for even greater customization by adding unique images to each sector of the wheel. You should upload the entire sector image along with the other images when adding the skin.
* You can include a background, prize name, amount, icons, or other elements inside the image.
* To apply this:
  * Leave the 'Prize Icon' field empty
  * Assign fixed images to each sector in the skin configuration
  * In the game template, match each prize to the correct sector
  * Apply custom CSS in the CSS editor within the game template to hide the Prize name

```css
.saw-view .wheel-sector-icon.cover {
   display: none;
}
```

{% hint style="success" %}
We can also provide a Figma template for Mini-games skins upon request.

Please note that any images exported from the template must be compressed before uploading them to the BO. You can use [\[this link\]](https://tinypng.com/) to compress your images.

For further assistance, please contact your Customer Success Manager!
{% endhint %}
