Button design guidelines

With the API integration, the buy button is yours to design. These guidelines and ready-made assets help you build one your audience recognizes instantly.

Your button, your design

A redirect link works from anything you can attach a link to, so the design of your buy button is entirely up to you. That said, familiarity converts: audiences have tapped these supermarket buttons on hundreds of recipe websites, and a look they recognize makes the next tap an easy one.

Below you find the button styles we recommend, the exact brand colours we use ourselves, and the logo artwork ready to copy. Staying close to these styles pays off: it is the look your audience already recognizes.

Note: About supermarket logos and colours

The supermarket names, logos and colours on this page belong to the respective supermarkets. We share them as a practical reference: pointing out where an order will be placed is what they are for, and it is how our own buttons have always worked. These guidelines are suggestions rather than rules or legal advice, and how you apply them in your own product stays your decision and your responsibility. When in doubt about a specific use, the supermarket's own brand guidelines or your own advisor are the right place to check.

Example: The tile we use ourselves

A square tile in the supermarket's brand colour with the white logo centered on it. This is the look your audience already knows from recipe websites running our script integration.

HTML

<a class="buy-tile" style="background: #00A0E2"
   href="https://any.tobasket.com/to/kJ8sP2qLm4Xz?supermarket=albert-heijn">
  <img src="/images/albert-heijn.svg" alt="Order at Albert Heijn">
</a>

<style>
  .buy-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 15px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
    transition: transform 180ms ease, box-shadow 180ms ease;
  }
  .buy-tile img {
    width: 80%;
    height: 80%;
  }
  .buy-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  }
</style>

Example: Block buttons

Prefer a wider button? Use a block in the supermarket's brand colour, in one of two variations: with the logo next to the supermarket name, or with the name alone. Keep the corners lightly rounded, the label bold and white, and the height around 45 pixels.

Logo and name

Albert Heijn

Jumbo

Name only

Albert HeijnJumbo

Note that a logo can change on a block button: For Jumbo, for example, we would use the J mark next to the name instead of the full wordmark. The logo section below lists every variation.

HTML

<a class="buy-block" style="background: #00A0E2"
   href="https://any.tobasket.com/to/kJ8sP2qLm4Xz?supermarket=albert-heijn">
  <img src="/images/albert-heijn.svg" alt="">
  Albert Heijn
</a>

<style>
  .buy-block {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 45px;
    max-width: 270px;
    border-radius: 5px;
    color: #ffffff;
    font-weight: bold;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    transition: transform 180ms ease, box-shadow 180ms ease;
  }
  .buy-block img {
    height: 60%;
  }
  .buy-block:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
  }
</style>

Supermarket colours

If you colour your buttons, use the exact brand colours, listed below.

Supermarket	Slug	Colour
Albert Heijn	`albert-heijn`	`#00A0E2`
Jumbo	`jumbo`	`#EEB717`

This table lists the supermarkets currently available through Any to Basket. As more supermarkets are available, we add them here.

Logo SVGs

Every logo is available as an SVG with the white fills already in place for the coloured buttons above, listed per variation because some marks differ between the tile and the block button. Copy the markup straight to your clipboard and inline it in your app, or save it as a file in your project.

Albert Heijn

Tile and block button

Jumbo

Tile button

Jumbo

Block button

Host the artwork yourself as part of your own integration. The files on our CDN are subject to change without notice.