> For the complete documentation index, see [llms.txt](https://help.dollarlabs.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.dollarlabs.io/dollarback-store-credit/widgets-and-storefront/icons-and-images.md).

# Icons & images

Every icon and illustration DollarBack draws on your storefront can be swapped for an image of your own. That covers the floating button itself, the illustrations on each card and offer, and the little symbols on the navigation tabs — 28 slots in all.

Unlike the rest of the Customization page, this one is **shared**: a change here applies everywhere that icon appears, rather than to a single widget.

## Prerequisites

* The images you want to use, uploaded to **Shopify Files** (**Shopify admin → Content → Files**). You can also upload from inside the picker, so this is optional.

## Open the page

Go to **DollarBack admin → Customization** and click **Customize** on the **Icons & images** card, badged **Shared**. Its description sums the page up: *"Every icon and illustration on the storefront widget and loyalty page. Swap any of them for an image from your Shopify Files."*

The slots are grouped by the surface they appear on:

| Group                 | Covers                                                                                                                                                                               | Slots |
| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----- |
| **Storefront widget** | The floating panel on every page: the launcher button, the signed-out illustration, the birthday form, each home card, each earning offer, the reward cards, and the navigation tabs | 19    |
| **Loyalty page**      | Your `/apps/dollarlabs/loyalty` page: the "ways to earn" illustrations, the reward and redeem cards, and the tier badge                                                              | 9     |

## Replace an icon

Each row shows the same three things: two thumbnails, the slot's name and intended size, and the buttons.

1. Find the slot you want. The row names it (for example **Floating button**, **Referral card**, **Earn — birthday**) with a short hint and the size it renders at, in pixels.
2. The two thumbnails are **Default** and **Custom**. Whichever one is live carries a green marker, so you can scan the page and see at a glance what you have already changed.
3. Click **Choose image**. Shopify's file picker opens; pick an existing image or upload a new one without leaving the page.
4. The Custom thumbnail fills in and the marker moves to it. The button now reads **Replace**.
5. Click **Save**.

To go back to the DollarBack artwork, click **Reset** on that row. It only appears once a custom image is set, and it restores the default rather than clearing the slot — no icon is ever left blank.

{% hint style="info" %}
**Square PNG or SVG works best.** Each row tells you the size it renders at, and images are scaled to fit it. SVG stays crisp on high-density phone screens; a PNG should be at least twice the listed size for the same reason. Photographs rarely read well at 20–24px — these are icons, not banners.
{% endhint %}

{% hint style="warning" %}
Icons are matched by slot, not by what they look like, so nothing stops you putting a shopping bag in the birthday slot. Check the preview on the widget and loyalty page after saving: the customization previews pick up your icons, so you can confirm the swap without visiting the storefront.
{% endhint %}

## What this page doesn't cover

* **The wallet pass images.** Those live in **Integrations → Wallet passes** and have their own required dimensions per platform ([Wallet passes](/dollarback-store-credit/integrations/wallet-passes.md)).
* **Email artwork.** Emails are designed in their own editor ([Customize email templates](/dollarback-store-credit/notifications/customize-email-templates.md)).
* **Text and colors.** Those stay per-widget, on each widget's own Customization page.

## Verify it works

1. Replace one obvious slot — the **Floating button** is the easiest to spot — and save.
2. Open your storefront in a private window. The launcher should show your image at the same size and position as the default.
3. Open the loyalty page and check any slot you changed there too; the two surfaces have separate slots even where the artwork looks similar.

## Common issues

* **"File picker unavailable — reload the admin"**: App Bridge hasn't finished loading. Refresh the DollarBack page and try again.
* **The picker opens but nothing happens after choosing**: the file couldn't be resolved to a URL. Confirm the file is an image in **Shopify Files** and try again.
* **The icon looks blurry or cropped**: the source is too small, or not square. Re-export at a larger size, square, with transparent padding.
* **A change didn't appear on the storefront**: check you clicked **Save**, then hard-refresh the storefront — themes cache the widget bundle.
* **You changed the wrong surface**: the widget and loyalty page have separate slots with similar names. **Referral card** is the widget; **Earn — referral** is the loyalty page.

## Related articles

* [Widget map: what shows where](/dollarback-store-credit/widgets-and-storefront/widget-map-what-shows-where.md)
* [The floating cashback widget](/dollarback-store-credit/widgets-and-storefront/the-floating-cashback-widget.md)
* [Set up the loyalty page](/dollarback-store-credit/widgets-and-storefront/set-up-the-loyalty-page.md)
* [Translate your widgets](/dollarback-store-credit/widgets-and-storefront/translate-your-widgets.md)