Chof
Get the App
For Chocolate Makers

The Chof Badge

A small, elegant badge that links your website to your Chof maker page. So anyone can discover your chocolate bars, tasting notes and ratings in one tap.

Self-Service

Get your badge

Pick a style, copy the HTML, and paste it into your site. The badge links directly to your maker page on Chof.

Preview

Chof Badge - Outline variant

Choose a style

Embed code

Copy the code and paste it into your site's HTML. Replace your-maker-slug with your Chof URL slug and Your Brand with your brand name.

Centred (recommended)
HTML
<div style="display: flex; justify-content: center; padding: 16px 0;">
  <a href="https://chof.nl/makers/your-maker-slug?ref=badge" target="_blank" rel="noopener" title="Your Brand on Chof">
    <img src="https://chof.nl/badges/chof-discover-outline.svg" alt="Your Brand on Chof" width="200" height="56" loading="lazy" decoding="async" />
  </a>
</div>

Puts the badge in the middle of its own row, with a little space above and below.

Plain
HTML
<a href="https://chof.nl/makers/your-maker-slug?ref=badge" target="_blank" rel="noopener" title="Your Brand on Chof">
  <img src="https://chof.nl/badges/chof-discover-outline.svg" alt="Your Brand on Chof" width="200" height="56" loading="lazy" decoding="async" />
</a>

Just the badge, for a spot your site already lays out, such as a footer column or an email signature.

Using Shopify? See the six steps

The link ends in ?ref=badge so Chof can count the visits that come from badges. It opens your maker page like any other link.

Variants

Two styles to choose from

Chof Badge - Outline variant

Outline

Brown outline, for light footers and pages

Chof Badge - Light variant

Light

Cream, for dark footers and pages

Placement

Where to place it

Your website

Add the badge to your footer, about page, or product pages to link visitors directly to your Chof profile.

Shopify & e-commerce

Add the badge to your store's footer or product page template. It links shoppers to your bars on Chof.

See the Shopify steps

Blog posts & press

Include the badge in articles, reviews, or online features that mention your chocolate.

Email signatures

Add the badge image to your email signature to give every conversation a link to your chocolate catalogue.

Shopify

Add the badge to your Shopify store

Six steps in the theme editor. They work on any theme that shows Add section under Footer: Dawn 8 and later, Horizon, and most themes from 2023 on.

  • About 5 minutes
  • No code editing
  • Shows on every page

  1. Step 1: Copy your code

    Go to your code. Pick Outline if your footer is light, or Light if it is dark. Then click Copy on Centred.

    In the copied code, replace your-maker-slug with the end of your Chof page address (chof.nl/makers/your-maker-slug) and Your Brand with your name.

  2. Step 2: Open the theme editor

    In your Shopify admin, click Online Store. On the Themes page, next to your current theme, click Edit theme.

  3. Step 3: Add a Custom Liquid section

    In the sidebar, find the Footer area and click Add section under it. Choose Custom Liquid. Text and Rich text won't work, because they don't accept images or code.

  4. Step 4: Paste your code

    The section's settings open (on the right, on a wide screen). Paste your code into the Liquid code box, called Custom Liquid in older themes. Set Color scheme to the one your footer uses, so the two backgrounds match (in Horizon, set Background color). Then set Top and Bottom padding to 0, so the badge sits close under the footer.

  5. Step 5: Check the placement

    The new section sits at the bottom of the page, under the footer. To show it above the footer instead, drag it above Footer in the sidebar. Click the phone icon in the top bar to see it on mobile.

  6. Step 6: Save and test

    Click Save. Open your store on your phone and tap the badge. It should open your page on Chof.

Simplified drawing. Your theme's labels may differ a little.

What it looks like when it's done

The badge sits centred under your footer, on every page of your store.

Light footer: use the Outline badge.

No Add section under Footer?

Your theme predates Shopify's footer areas. For Dawn, that means before version 8 (February 2023). To put the badge on every page, paste it into your theme's code. First make a backup: on the Themes page, click … next to your theme, then Duplicate. Then click …, then Edit code.

Dawn before version 8. Open sections/footer.liquid. Find the line with footer__copyright, paste your code on a new line just above it, and click Save. The badge sits in your footer, by the copyright line.

Any other older theme, such as Debut or Brooklyn. Open layout/theme.liquid. Find the line with </body> near the end, paste your code on a new line just above it, and click Save. The badge sits under your footer, on your page background, so pick the style that suits that colour.

With no code: on your home page only. Open the theme editor on your home page. Below its last section, click Add section, choose Custom Liquid, and follow steps 4 to 6. Debut, Brooklyn and other older themes don't offer Custom Liquid here.

Using a paid theme?

Many paid themes also have a Custom Liquid or Liquid block inside the footer: click Footer, then Add block. Paste the Plain code there to put the badge in a footer column, lined up with your links.

Something not working?
You see the code as text, or nothing at all
It went into a Text or Rich text block. Delete that block and add a Custom Liquid section instead.
It isn't on your live store
Click Save. If you edited a draft theme, publish it too.
The badge is hard to see
Switch style. Outline suits light footers, Light suits dark ones.
The badge sits against the left edge
Copy Centred again from this page. That code centres itself; Plain and older copies of the code don't.

Still stuck? Email us your store address and we'll take a look.

Usage Guidelines

Keep it simple

  • Use the badge as-is. Don't modify the colours, shape or text.
  • Keep the badge linked to your actual Chof maker page.
  • Give the badge enough breathing room. Avoid crowding it with other elements.
  • Choose the variant that contrasts best with your site's background.
← Back to /for-makersBrowse all makers →