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