How to Customize Your Offerwall Design

How do I customize my offerwall design?

Go to Apps, click Manage next to your app, and open the Design tab. Change the images, colors, and layout, click Save changes, then click Open your offerwall to see the result.

The Design tab appears once our team has approved your app and its status is Live. Publisher applications open soon.

Step by step

1. In the sidebar under Publish, click Apps.
2. Click Manage next to the app you want to change.
3. In the row of tabs under the app figures, click Design. The panel says “Make the offerwall look like part of your site”.
4. Under Images, add the pictures you want. Both are optional:
   • Currency icon: shown next to every reward on your offerwall. Use a square image. It is resized to 128 px.
   • App logo: only you see it, next to the app name in your dashboard. The offerwall always shows the Sharklio logo. PNG, JPG, or WebP up to 3MB, or an animated GIF up to 2MB, resized to 256 px.
   Click Upload (or Replace if there is already an image) to choose a file. To remove one, click the small x on the thumbnail. If you change your mind, click Image removed. Undo.
5. Under Colors, set each color with the color picker or by typing a hex code such as #004ABB:
   • Main color: rewards and highlights.
   • Button color: start and send buttons.
   • Page background: behind everything.
   • Offer background: the offer cards.
   • Modal background: the offer popup.
   • Text: titles and text.
6. Under Layout, choose:
   • Corner radius: Small (8px), Medium (14px), or Large (20px).
   • Card padding: Compact (11px), Medium (15px), or Roomy (20px).
   • Font size: Small (15px), Medium (16px), or Large (17px).
7. Click Save changes at the bottom. A “Saved.” message confirms it.
8. In the See it on your offerwall box, click Open your offerwall. Your real offerwall opens in a new tab with the test user ID owner-test and the offers available in your country, so you can click through it like your users do.

The contrast rules your colors must pass

Your users must be able to read every offer, so we check your colors when you save. If a check fails, the field is marked and the colors are not saved until you fix them:

• Text needs at least 4.5 to 1 contrast with the page background and the offer cards.
• Modal background needs at least 4.5 to 1 contrast with your text color.
• Main color and Button color need at least 3 to 1 contrast with the page background and the offer cards.
• Offer background must not be too close to the page background. Pick a slightly lighter or darker shade.

On a phone

Tap Apps in the tab bar at the bottom, then Manage. The app tabs sit in one row that scrolls sideways, so swipe it to reach Design. The options are the same as on a computer.

If your app uses the Offers API

With the Offers API you show the offers in your own design, so these settings do not change it. For an Offers API app, the Design tab sets how the pages look where users do an offer, send proof, and see their history. Build your own offerwall with an Offers API covers the cards you design yourself.

If something goes wrong

• I do not see the Design tab. The app is not live yet. Design and Integration appear once it is approved.
• A box at the top says “Your saved colors are hard to read on the offerwall.” Your saved colors fail a contrast rule. You can still save other changes, but fix the colors named in the box.
• The offerwall still looks the same. Make sure you clicked Save changes before Open your offerwall, then reload the offerwall tab.

For where to place the wall once it looks right, read Offerwall placement. The embed code and its height options are in the Offerwall link docs.

Frequently asked questions