# Match your store's look

> How offers take your checkout's fonts and colours, and how to check them on desktop and phone.

Source: https://help.attravo.com/post-purchase-upsell/articles/match-your-store-design
Updated: 2026-10-06

Offers look like part of your checkout because Shopify draws them with your checkout's own branding. There are no colours or fonts to set in Attravo, so an offer always matches the page around it.

## Change the look

Fonts, colours, corner shapes and button colours come from your checkout's branding:

1. In your Shopify admin, open **Settings** > **Checkout** and select **Customize**.
2. Change the branding in the checkout editor's settings, then select **Save**.

Every offer and page block follows the change. Inside Attravo, you choose the parts of an offer and their wording, not their colours. See [Add and arrange offer blocks](https://help.attravo.com/post-purchase-upsell/articles/add-and-arrange-offer-blocks.md).

## Check desktop and phone

In the offer window, the icons at the right of the preview bar switch between desktop and phone width.

![An offer previewed at desktop width](https://xprvgpfulbcxrftgyppu.supabase.co/storage/v1/object/public/help-media/5d8df30e-32a3-4311-b03c-158adc08841b/fd2105e9-1c4a-4e4a-8037-4b3b60e781d9/offer-4-preview-e6be7fc858.webp#w=1122&h=914)

![The same offer at phone width, with the buttons full width](https://xprvgpfulbcxrftgyppu.supabase.co/storage/v1/object/public/help-media/5d8df30e-32a3-4311-b03c-158adc08841b/fd2105e9-1c4a-4e4a-8037-4b3b60e781d9/offer-5-phone-6fbaf0a53d.webp#w=1122&h=1072)

On a phone, the offer fills the screen's width and its buttons sit one under the other when they need the room. **Stack buttons vertically**, in the **Buttons** block, stacks them on every screen.

## Your theme's fonts and colours

**Settings** > **Your theme** shows the fonts and colours your live theme uses, as Core Script reports them. They are there for reference, so you can match your checkout's branding to your storefront.

![Your theme in Settings, with the font, text, background and button colours](https://xprvgpfulbcxrftgyppu.supabase.co/storage/v1/object/public/help-media/5d8df30e-32a3-4311-b03c-158adc08841b/fd2105e9-1c4a-4e4a-8037-4b3b60e781d9/design-1-your-theme-4f33774c34.webp#w=1122&h=726)

Nothing appears here until Core Script is on and a customer has loaded a page. See [Turn on Core Script in your theme](https://help.attravo.com/post-purchase-upsell/articles/turn-on-core-script.md).

## Images

Use square product images of 1080 by 1080 or larger, which look sharp in every layout. An **Image** block takes the address of an image already hosted on your store.