# Overview
Welcome to the support pages for [Claw Crane: Gamified Dicounts](https://apps.shopify.com/claw-crane).
# Getting Started: Basic Setup
### Idea
To get you started as quick as possible we'll cover the essential steps:
1. Set up two discount codes in Shopify
2. Add the codes to Clawcrane
3. Preview the results
4. Go live. ๐
### Step 1: Create two discount codes in Shopify
#### Create the Consolation prize
In your Shopify backend, click on `Discounts > Create a Discount Code`. Choose a rather low discount percentage (e.g. 5%), set the desired options and click "Save".
This will be the consolation prize. It it usually relatively easy to catch (can be changed in the setup), thus the low discount.
#### Create the Jackpot prize in Shopify
Create yet another discount code in Shopify with a higher percentage (e.g. 15%). This will be our jackpot prize, which will be difficult to capture.
### Step 2: Set up the prizes within the app
Open the app and select both discount codes in the sections ..
* "Settings > Prize: Consolation"
* "Settings > Prize: Jackpot"
{% hint style="info" %}
Another discount option to consider is **fixed vs auto-generated**.
* Fixed codes will be given to your customer exactly as you've created them.\
Example: Always `CONSOLATION-PRICE`for every customer.
* The auto-generated option will create individualized copies of your discount code for each customer, e.g. `CONSOL-2XFE3P, CONSOL-83F3AQ, CONSOL-4PS34O` and so on.
{% endhint %}
Don't forget to apply the analogous changes in the "Settings > Prize: Jackpot" section. ๐
### Step 3: Preview ๐งช
In order to see what the app will look like in your store, go to the very bottom and hit "Save & Preview". This will automatically take you to your storefront and simulate what the app will look like for your customers.
{% hint style="info" %}
As long as `Enable or Disabled in Online Store` is set to `Disabled`, your customers will not be able to see the game.
{% endhint %}
### Step 4: Ready to go
It's time to go live: at the very bottom under "Other Settings > Enable or Disable in Online Store", set the app to "Enabled" and hit the save button.
Navigate to your storefront and try out the app. ๐๐
{% hint style="info" %}
Don't worry - The charge you accept is only due **after** the trial period is over. In case the app doesn't work for you and you cancel within trial, you'll not be charged.
{% endhint %}
### Step 5: What's next?
You'll surely want to try out various settings. Here are the most important to explore ๐ต๏ธโโ๏ธ
| General | Appearance | Appearance, Avatars & Prizes |
| ------------- | ---------------- | ---------------------------- |
| Language | Accent color | Prize Icons |
| Capture Email | Background color | Upload your own Prize Icons! |
| | Text color | |
In case you're lost - you'll always find helpful descriptions on the (?)-icon.
**Further Reads**
As a next step we'd recommend to get [some inspiration from other merchants](/how-did-other-merchants-use-clawcrane/overview) or find out [how to make ClawCrane look good with your theme](/help/how-to-look-good).
**Having a problem setting up the app?**
Please feel encouraged to [contact us through Facebook](http://m.me/secretbakery.io).
# 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.
{% hint style="info" %}
* **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.
{% endhint %}
### 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](https://clawcrane.myshopify.com/) | [Chat Demo](https://clawcrane-chat.myshopify.com/) |
| **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 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".
{% hint style="info" %}
Use the same accent color as your theme. If you don't know your exact accent color, you can use to scan your website.
{% endhint %}
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. ๐
{% hint style="info" %}
Where to get custom prize images?
* Use your product images. To remove any white background, use [https://www.remove.bg](https://www.remove.bg/).
* Hire a graphic designer
* Buy images from for a small buck.
* Use free icon sets such as or
{% endhint %}
###
### 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:
{% hint style="info" %}
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 ).
* 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.
{% endhint %}
Suggestions from "Option 2" applied:
###
### 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](http://m.me/secretbakery.io).
### Final Chat Example
### Final Sidebar Example
# How to create a Landingpage
Step-by-Step Instructions to create Landingpages for Facebook, Instagram or Email campaign to your customers.
We'll create a dedicated landingpage [like this example](https://clawcrane.myshopify.com/pages/landingpage-example-1) - don't worry, it's not that hard. ๐ Of course the guide assumes that you have already completed a basic setup of [Claw Crane](https://apps.shopify.com/claw-crane) and it is set to "enabled".
### Step 1: Create a Page or Blogpost in Shopify
### Step 2: Copy the template for the landingpage
Copy the code from the blue box below (you can use the "copy" button in the top-right of the box).
```
Win cookies!
Hey, want to win some cookies?! Due our anniversary week we're giving away free cookies to the brave and lucky.
I'm feeling lucky
```
### Step 3: Switch the Shopify editor to "HTML View"
### Step 4: Paste the code & change the text
Now just paste the template code from before. You'll maybe also want to adjust some of the text like `I'm feeling lucky` , `Win cookies!` or`Hey, want to win some cookies?!`.
After that hit "Save" and you're done. Whoohoo! ๐๐ Click on `View on your online store` to see your new landingpage.
#### Does your layout break after editing the text?
This is due to the Shopify editor removeing some of the template code from above.
* Switch back to HTML code.
* Paste the following code at the very top.
```
```
### Step 5: Disable Greeter Icon (optional)
Since now you have a dedicated landingpage, you might not want to have the Greeter icon all around your store. You might want to [disable it entirely](/help/restrict-to-specific-pages#option-2-disable-the-greeter-icon-and-use-langingpages-starter-buttons) or [restrict it to specific pages](/help/restrict-to-specific-pages#option-1-restrict-to-specific-pages).
# Starter-Buttons
## What are Starter-Buttons? - When are they useful?
They allow to start the game without using the Giftbox-Icon.
You can declare ANY element a **Starter-Button** on a Shopify Page or Blogpost of your store. When a customer clicks on that element (e.g. a button) the game is kicked off.
This is useful for [**Dedicated Landingpages**](/help/how-to-create-a-landingpage) when you e.g. run a **Facebook Campaign.**
## How to place a Starter-Button on a Landingpage?
#### Step 1: Create a page or Blogpost
#### Step 2: Switch to Code-View
#### Step 3: Add a link that starts the game
Any element decorated with the class `claw-link-start-interaction` will work. See the example below, where a link is decoreted as a starterbutton.
```
I'm feeling lucky
```
####
#### Step 4: Decorate the link
Make the link **shake** (`claw-animation-shake`):
```
I'm feeling lucky
```
Make the link **shoot confetti** (`claw-animation-confetti`):
```
I'm feeling lucky
```
# Restrict to specific pages
Sometimes you want to run Clawcrane only on specific pages and want to disable the Greeter Icon box for others.
There are basically two ways to do this.
### Option 1: Restrict to specific pages
Take a fragement of the page address and copy it to the `Show on pages` option.
Example:
* The Greeter icon shall only appear on \*\*
* Set `Show on pages` to `Only specific page` and fill in **win-a-cookie** as shown below.
{% hint style="info" %}
This can also be done with any other parts of the Webaddress, e.g. collection names, product names, etc.
{% endhint %}
### Option 2: Disable the Greeter Icon and use Langingpages / Starter-Buttons
You can also shut off the greeter icon entirely, by not triggering it. Set the option `Trigger (Start)`to ``.
Since the Greeter Icon will not be shown you need to [create a Landingpage ](/help/how-to-create-a-landingpage)and / or an element in your store that serves a [Starter-Button](/help/starter-buttons).
# Overview
Need some inspiration? Take a look at what other merchants did with ClawCrane! ๐
* [Kawaii Slime Company](/how-did-other-merchants-use-clawcrane/kawaii-slime-company): A very special kind of toy brand taking over the world widh slime. ๐ฑโ๐๐ฅ
* [Nuestro Secreto](/how-did-other-merchants-use-clawcrane/nuestro-secreto): A cosmetics brand based in Mexico. ๐
* [Bart and Judy's](/how-did-other-merchants-use-clawcrane/bart-and-judys): A family owned bakery - Free cookies ๐ช on Facebook! ๐
# Kawaii Slime Company
### About Kawaii Slime Company
I don't understand slime, but surely kids do! - Kawaii Slime Company is a strong family owned brand that sells slime ๐, both online and POS. I'd recommend checking out their site, it's amazing!
Shopify Store:
### How did they use ClawCrane?
The main audience being kids, this companie's focus is being fun ๐ and kawai ๐ฅ๐๐. To maximize the level of kawaiiness and create a fun interaction for the kids, they have used the chat interaction with one of their mascots.
{% embed url="" %}
Please notice how every part was carefully set up to seamlessly fit into the theme (colors) and the companies branding (fun, kids).
{% hint style="info" %}
If at this point you wonder what kawaii actually means: It's Japanese and means "cute". ๐
{% endhint %}
### Key takeaways
#### 1. For target audiences like kids, set up the app to be fun.
* Use the Chat interaction
* Use custom mascots / avatars
* Use custom prizes
* Write your copy in a fun and appealing way
#### 2. Colors
The colors in the app should always reflect the colors in your theme. Please notice the carefully selected colors.
* The background color. Usually ..
* White for lighter websites (most websites)
* Dark for darker websites
* Colorful (but should match the main color of the website)
* The accent color
* A color that catches the customers attention.
* Used sparsely on the website
* Especially this one should 100% match the themes accent color.
* If you don't know how to get the color code, use tools like
### Outcomes
> "When I saw the Crane Claw game on the Shopify App store, I was blown away. Secret Bakery really raised the bar on Gamified discounts. There are a million spin to win apps available but this was the first time I saw something so unique and fun to engage our customers. We are a business dedicated to mostly children (and their parents) and we had overwhelming positive feedback about the game. In fact, my own 2 daughters (age 3 & 11) ask to play it all the time, just for fun!" - Roxy, Kawaii Slime Company
# Nuestro Secreto
### About Nuestrosecreto
Nuestrosecreto is a beauty brand based in Mexico City, dedicated to cosmetics, professional makeup and skincare.
Shopify Store: [https://www.nuestrosecreto.com.mx/](https://nuestrosecreto.com.mx/)
### How did they use ClawCrane?
The brand used many standard features and less customization. To resonate with the target audience (\*exclusive, polished, elegant) a cleaner / sleaker design was chosen.
{% hint style="info" %}
This is exactly the opposite of what [Kawaii Slime Company](/how-did-other-merchants-use-clawcrane/kawaii-slime-company) did. They target kids and need to be (\*) fun and crazy.
{% endhint %}
{% embed url="" %}
Damn, I didn't win this time ๐
{% endembed %}
### Key Takeaways
For cleaner, sleaker design:
* Chose the Sidebar interaction style.
* Chose a white background.
* Suggestion: Use the "shopping bag" icon set, or upload your own.
# Bart and Judy's
### About Bart and Judy's
Bart and Judy's is a family owned cookie bakery from Los Angeles and they make the best chocolate chip cookies in the world. ๐ค
Shopify Store: [https://www.bartsbakery.com/](https://bartsbakery.com/)
### How did they use ClawCrane?
Bart and Judy's created a facebook campaign, where people could win free cookies. It was great to see all those cookies rolling across their website ๐ช๐ช๐ช๐ - see for yourself:
{% embed url="" %}
* Blogpost:
* Facebook Campaign:
### Key Takeaways
* Create Facebook campaigns around ClawCrane.
* Reach existing customers (unpaid posts)
* Reach new customers (paid promotion on Facebook)
* Use a lead magnet as a motivation for customers (e.g. free cookies ๐ช๐คค)
* Use a landing page for those campaigns (see: [landing page template](/help/how-to-create-a-landingpage), [custom starter buttons](/help/starter-buttons)).
* Use custom graphics to represent the prize customers will win.
### Outcomes
> "We are so happy with the way the page turned out and it's already generating tons of traffic and engagement! We are really excited to see the numbers over the weekend!" - Tracy, Bart and Judy's
# 2020-06-22 - Sidebar
Today we're rolling out a major update: **Sidebars** and **Starter-Buttons** - Have fun! ๐ฅฐ
(Hint: Some merchants might need to clear their browser's cache to see the new features: [Clear the Browser cache in Windows](https://clear-my-cache.com/en/windows.html))
## Sidebar Interaction
* Replaces the Chat interaction with a Slide-In Sidebar
* Faster, more streamlined interaction than Chat (directly jump into the game; faster replay)
* Sleeker design
* No avatars
To enable the sidebar, switch the "Interaction Type" to "Sidebar".
## Starter Buttons
It is possible to disable the "Shaking Giftbox Icon" altogether and replace it with Buttons embeded into your Shopify Pages. This is useful for promotions with dedicated landingpages (e.g. "Win a free shirt" + Facebook campaign).
To understand how to embed Starter-Buttons into your Shopifsy Pages, please head over to the Starter Buttons Help pages.
{% content-ref url="/pages/-MA740Y125QSS1rdQZHQ" %}
[Starter-Buttons](/help/starter-buttons)
{% endcontent-ref %}
# Translations
Step 1: Download the translation template below:
{% file src="/files/-MNc\_biVEpE20b-4rX03" %}
ClawCrane Translation Template
{% endfile %}
Step 2: Fill the translation template
Step 3: Send in the translation template
Step 4: We'll send a link to a translated demo version of clawcrane
Step 5: Review the translated demo and send in review comments / additional changes
Step 6: We'll set the translation live
