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):

Not Recommended: Bright Theme + Dark background

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.

The accent color is used sparsely (good), but it is not exactly the same color at all places.

And now with fixed background color and fixed accent color:

Recommended: Ensure the accent color is the same everywhere.

Accent color in the settings.

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. 🙂

Stock images vs. Custom images as prizes

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.

Suggestions from "Option 2" applied:

Left side: custom branding (good), but not round and maybe too many colors.

Tadaaa 🎉

Phew, that was a ride, but now you're done and your store looks good! 🤗 In case you need further help, please feel invited to reach out via Facebook.

Final Chat Example

Final Sidebar Example