> ## Documentation Index
> Fetch the complete documentation index at: https://docs.gocertify.me/llms.txt
> Use this file to discover all available pages before exploring further.

# Customise Branding

> Convert shoppers with targeted, gated offers.

A crucial part of your reward flow is its branding. This is the first thing your users will see,
and it's important to make sure that the shopper experience closely aligns with your brand guidelines.

In this section we will explore how how you can customise the visuals, copy and styling of your reward flow to make sure it's a perfect fit for your brand. The branding you
create will be applied to all of your reward flows, so it's a great way to build consistency across your campaigns.

<Frame caption="Brands like VOXI and Sainsburys have strong visual identities. Our visual toolkit let them customise every detail of their flows, down the finest details (👀 check out the FAQ button UI)">
  <img className="block dark:hidden" src="https://mintcdn.com/gocertify-db9cc6b8/kBLooCJIFdzEjb3y/images/branding/customisationExample.png?fit=max&auto=format&n=kBLooCJIFdzEjb3y&q=85&s=9cb345758103ac75f9dcc5abc46a1a22" alt="Example Customisation Screens" style={{ borderRadius: '0.5rem' }} width="1329" height="858" data-path="images/branding/customisationExample.png" />

  <img className="hidden dark:block" src="https://mintcdn.com/gocertify-db9cc6b8/kBLooCJIFdzEjb3y/images/branding/customisationExample.png?fit=max&auto=format&n=kBLooCJIFdzEjb3y&q=85&s=9cb345758103ac75f9dcc5abc46a1a22" alt="Example Customisation Screens" style={{ borderRadius: '0.5rem' }} width="1329" height="858" data-path="images/branding/customisationExample.png" />
</Frame>

## Customise your visuals

#### Favicon, Logo and Banner Image

The brand logo and banner image is shown on the key screens throughout the reward flow and the favicon is shown on any
[Gocertify hosted](https://secure.gocertify.me/at/gosnow) landing pages that you may link to.

Provide your Gocertify account manager with the image files of the correct dimensions (listed below), and we will handle the rest.

<Frame caption="Ideal dimensions for your favicon are 36 x 36 px">
  <img className="block dark:hidden" src="https://mintcdn.com/gocertify-db9cc6b8/kBLooCJIFdzEjb3y/images/branding/exampleFavicon.png?fit=max&auto=format&n=kBLooCJIFdzEjb3y&q=85&s=376b557af58e9a0a42717267263f890f" alt="Example Favicon in Reward Flow" width="1440" height="278" data-path="images/branding/exampleFavicon.png" />

  <img className="hidden dark:block" src="https://mintcdn.com/gocertify-db9cc6b8/kBLooCJIFdzEjb3y/images/branding/exampleFavicon.png?fit=max&auto=format&n=kBLooCJIFdzEjb3y&q=85&s=376b557af58e9a0a42717267263f890f" alt="Example Favicon in Reward Flow" width="1440" height="278" data-path="images/branding/exampleFavicon.png" />
</Frame>

<Frame caption="Ideal dimensions for your banner are 1500 x 500 px - if you have a Twitter/X banner this size works perfectly">
  <img className="block dark:hidden" src="https://mintcdn.com/gocertify-db9cc6b8/kBLooCJIFdzEjb3y/images/branding/exampleBanner.png?fit=max&auto=format&n=kBLooCJIFdzEjb3y&q=85&s=cc6a5ce88a1c9be63b1d2b3c654774c7" alt="Example Banner in Reward Flow" width="1440" height="278" data-path="images/branding/exampleBanner.png" />

  <img className="hidden dark:block" src="https://mintcdn.com/gocertify-db9cc6b8/kBLooCJIFdzEjb3y/images/branding/exampleBanner.png?fit=max&auto=format&n=kBLooCJIFdzEjb3y&q=85&s=cc6a5ce88a1c9be63b1d2b3c654774c7" alt="Example Banner in Reward Flow" width="1440" height="278" data-path="images/branding/exampleBanner.png" />
</Frame>

<Frame caption="Ideal dimensions for your logo are any square logo, minimum width 500px">
  <img className="block dark:hidden" src="https://mintcdn.com/gocertify-db9cc6b8/kBLooCJIFdzEjb3y/images/branding/logoExample.png?fit=max&auto=format&n=kBLooCJIFdzEjb3y&q=85&s=aaad01e27796f059f7681fec919f5937" alt="Example Logo in Reward Flow" width="1440" height="278" data-path="images/branding/logoExample.png" />

  <img className="hidden dark:block" src="https://mintcdn.com/gocertify-db9cc6b8/kBLooCJIFdzEjb3y/images/branding/logoExample.png?fit=max&auto=format&n=kBLooCJIFdzEjb3y&q=85&s=aaad01e27796f059f7681fec919f5937" alt="Example Logo in Reward Flow" width="1440" height="278" data-path="images/branding/logoExample.png" />
</Frame>

#### Fonts

You can provide up to 4 font files to customise the heading, normal, tagline and fineprint text. These fonts will be applied throughout the reward flow as detailed below:

<Frame caption="Font files will be applied to the following sections of the flow">
  <img className="block dark:hidden" src="https://mintcdn.com/gocertify-db9cc6b8/kBLooCJIFdzEjb3y/images/branding/exampleFonts.png?fit=max&auto=format&n=kBLooCJIFdzEjb3y&q=85&s=1fd54be3b57e8054c41aa3b7bb484619" alt="Example Font in Reward Flow" width="2266" height="954" data-path="images/branding/exampleFonts.png" />

  <img className="hidden dark:block" src="https://mintcdn.com/gocertify-db9cc6b8/kBLooCJIFdzEjb3y/images/branding/exampleFonts.png?fit=max&auto=format&n=kBLooCJIFdzEjb3y&q=85&s=1fd54be3b57e8054c41aa3b7bb484619" alt="Example Font in Reward Flow" width="2266" height="954" data-path="images/branding/exampleFonts.png" />
</Frame>

#### Custom Styling

The Advanced CSS option let's you can go even further with your customisation. Your customer success manager will be able to help you build and apply any customisations you need, but for inspiration the most popular customisations are captured below. The [Advanced CSS](/section/gettingStarted/advancedCss) section has even more examples.

<AccordionGroup>
  <Accordion title="Hide iFrame Brand Logo" icon="square-minus">
    ```css theme={null}
    .in-iframe .logo-block-pushed-up {
      display: none;
    }
    ```
  </Accordion>

  <Accordion title="Hide iFrame Banner Image" icon="panorama">
    ```css theme={null}
    .in-iframe .banner-section a {
    display: none;
    }

    ```
  </Accordion>

  <Accordion title="Customise fonts" icon="t">
    <CodeGroup>
      ```css headings theme={null}
          /* Applies styles to the heading text. */
          .heading {
          text-transform: uppercase;
          font-weight: 700; 
          font-style: normal; 
          font-size: 28px; 
          color: rgb(0, 0, 0); 
          }
      ```

      ```css paragraph theme={null}
          /* Applies styles to the subtitle text. */
          .paragraph {
          font-family: "Roboto Condensed", sans-serif !important;
          font-weight: 400; 
          font-style: normal; 
          font-size: 16px; 
          color: rgb(0, 0, 0); 
          }

      ```
    </CodeGroup>
  </Accordion>
</AccordionGroup>
