How to look good

So you have installed ClawCrane, but it looks kinda 🤨? Don't worry - we got you covered within 5 steps.

Overarching Idea

The overarching idea to make ClawCrane match your store's look is based on three principles.

Repetition: Use the same colors and the same level of brightnes as your theme. Don't use 1000 different colors.
Tone it down: Don't use crazy colors, but rely mostly on subtle ones (whiteish, darkish - Exception: If your store is already exremely colorful).
Branding: Extend your brand into the app. Use custom prize-icons by reusing graphics from your store or design new ones, set up messages that appeal to your target audience.

Step 1. Sidebar or Chat?

First you have to decide on the basic interaction type with your customers.

The Sidebar works better for most stores (Fashion, Beauty, Household, ..), but certain types of stores will prefer the Chat interaction (Kids, Pets). Try both, and see what works best for you.

Sidebar Interaction

Chat Interaction

Link

Sidebar Demo

Chat Demo

Interaction

Fast, Efficient, Snappy, Opens Game immediately

Focus on Empathy & Fun with Avatars

Looks

Clean, Professional

Fun, Cute

Focus

Conversion

Bonding

Pro

Faster, Feels snappier for the right audience

Feels more special

Con

Feels more standard

Slower, "Spammy" if wrong audience

Step 2. Background & Text - Light or Dark?

The background color of the sidebar or chat should match your theme's overall level of "brightness". This means:

Bright themes
- Use a white background color
- Background: #F9F9F9
- (Or try a 100% white Background: #FFFFFF )
- Text Color: Dark
Dark themes:
- Use darkish grey (or with a hint of color)
- Background Color: #444444
- Text Color: Light
If you know what you do: You can chose the color you like - but why are you then reading this? 🤪

Let's look at https://wearerunaways.com/ when I first met them as an example. They had mixed a bright store theme with dark Clawcrane background (not recommended):

Step 3. Accent color 💅

Accent colors are used to catch the customer attention. Reflecting the principles "tone it down" and "repetition" this means:

Use the accent color very rarely.
The accent color must repeat accurately accross the page, otherwiese it will look "off".

Use the same accent color as your theme. If you don't know your exact accent color, you can use https://imagecolorpicker.com/en/ to scan your website.

Let's again look at the example.

And now with fixed background color and fixed accent color:

Step 4. Prize Icons! Standard or Custom?

ClawCrane already comes with many ready-to-use prize icons, so you can start right out of the box. For many stores they look great.

If however they don't fit your theme or you want to maintain a strong brand, we strongly recommend uploading your own prize icons. In fact you can just use your product images anyway. 🙂

Where to get custom prize images?

Use your product images. To remove any white background, use https://www.remove.bg.
Hire a graphic designer
Buy images from https://www.vectorstock.com for a small buck.
Use free icon sets such as https://www.fatcow.com/free-icons or https://www.google.com/search?q=free+icon+sets

Step 5. Avatars! (only for Chat)

The same applies to chat avatars. We provide many ready to go, but they work best for "fun" and "cute" stores.

To be clean and professional we recommend:

Option 1:

Switch to the Sidebar.

Option 2:

Upload your own prize icons.
Use a logo (not a picture).
If you use a picture, make it round (e.g. use https://crop-circle.imageonline.co/).
Tone it down - Use one color.
Use a color that resonates with your brand (e.g. accent color)
Save the picture in PNG format, not JPEG to achieve transparency.