Good Food Approved Badge How-To

 

Good Food Finder Approved Badge

As a business listed in the Good Food Finder Directory, you have been vetted as an important part of the local food system in Arizona. You’re local, you’re sustainable, you’re feeding your community and you’re keeping money in our economy.

To recognize and celebrate this, we have created the ‘Good Food Finder Approved’ badge that you can display on your website, menu, packaging or wherever you see fit. Just select which version you’d like to use, and follow the instructions below to add it!

We suggest using the embed code to add your badge to ensure that the background is transparent and blends with your website or packaging and so that the size, proportions, and resolution are consistent.

If you save the image to add to your website instead, we ask that you please manually add a link to https://www.goodfoodfinderaz.com/ to the image so shoppers can learn what the badge means.

This will make it easy for customers to see how amazing and local you are!

Let us know how you’re using the Good Food Finder Approved Badge, and we’ll feature you in our @goodfoodaz social media!

 

How to Add the Good Food Finder Badge to Your Website

 

Instructions for Adding the Badge to Your Website

Follow these simple steps to add the Good Food Finder Approved Badge to your website:

1. Choose Your Badge

Decide which badge you’d like to display. Copy the embed code for that badge. The embed code is the the text to the right of the badge beginning with ‘<div style=’ and ending with ‘</div>’.

All badges have a transparent background so they will look good with any background you put them on.

Featured
Rectangle Tri-Color Good Food Finder Approved Badge
Rectangle Tri-Color Good Food Finder Approved Badge

<div style="text-align: center;"> <a href="https://www.goodfoodfinderaz.com/" target="_blank" rel="noopener noreferrer"> <img src="https://www.goodfoodfinderaz.com/s/Good-Food-Badge_Rectangle-Full-Color_Dec-2024.png" alt="Rectangle Tri-Color Good Food Finder Approved Badge" style="width:300px; height:auto;"> </a></div>

Circle Tri-Color Good Food Finder Approved Badge
Circle Tri-Color Good Food Finder Approved Badge

<div style="text-align: center;"> 

<a href="https://www.goodfoodfinderaz.com/" target="_blank" rel="noopener noreferrer">  <img src="https://www.goodfoodfinderaz.com/s/Good-Food-Badge_CIRCLE-Full-Color_Dec-2024.png" alt="Circle Tri-Color Good Food Finder Approved Badge" style="width:200px; height:auto;">

 </a></div>

Rectangle Teal Good Food Finder Approved Badge
Rectangle Teal Good Food Finder Approved Badge

<div style="text-align: center;"> <a href="https://www.goodfoodfinderaz.com/" target="_blank" rel="noopener noreferrer">  <img src="https://www.goodfoodfinderaz.com/s/Good-Food-Badge_Rectangular-Turquoise_Dec-2024.png" alt="Rectangle Teal Good Food Finder Approved Badge" style="width:300px; height:auto;">  </a></div>

Circle Teal Good Food Finder Approved Badge
Circle Teal Good Food Finder Approved Badge

<div style="text-align: center;"> <a href="https://www.goodfoodfinderaz.com/" target="_blank" rel="noopener noreferrer">  <img src="https://www.goodfoodfinderaz.com/s/Good-Food-Badge_CIRCLE-Turquoise_Dec-2024.png" alt="Circle Teal Good Food Finder Approved Badge" style="width:200px; height:auto;">  </a></div>

Rectangle White Good Food Finder Approved Badge (Transparent Background)
Rectangle White Good Food Finder Approved Badge (Transparent Background)

<div style="text-align: center;"> <a href="https://www.goodfoodfinderaz.com/" target="_blank" rel="noopener noreferrer"> <img src="https://www.goodfoodfinderaz.com/s/Good-Food-Badge_Rectangle-White_Dec-2024.png" alt="Rectangle White Good Food Finder Approved Badge" style="width:300px; height:auto;"> </a></div>

Circle White Good Food Finder Approved Badge (Transparent Background)
Circle White Good Food Finder Approved Badge (Transparent Background)

<div style="text-align: center;">  <a href="https://www.goodfoodfinderaz.com/" target="_blank" rel="noopener noreferrer">  <img src="https://www.goodfoodfinderaz.com/s/Good-Food-Badge_CIRCLE-White_Dec-2024.png" alt="Circle White Good Food Finder Approved Badge" style="width:200px; height:auto;"> </a></div>

2. Log In to Your Website Builder

Access your website's content management system (CMS) or editor. Popular platforms include WordPress, Squarespace, Wix, or Shopify.

3. Add a New Section (or Edit an Existing One)

Navigate to the part of your site where you want the badge to appear.

For Squarespace: Edit a page and click the + icon to add a block. Choose a Code Block.

For WordPress: Edit the desired page and add a Custom HTML Block.

For Wix: Use the Embed Code option from the Add Menu.

For Other Platforms: Look for options to add custom code, HTML, or embed content.

4. Paste the Code

Paste the embed code copied in Step 1 into the code editor or text field.

5. Preview Your Changes

Check the preview to ensure the badge displays correctly.

6. Save and Publish

Save your changes and publish the page to make the badge live on your website.

Need help? Email goodfoodfinder@localfirstaz.com, and we’d be happy help you troubleshoot!

FAQs

  • Look for areas labeled "Embed," "Custom HTML," or "Code Block" in your website editor. If you’d like help troubleshooting, just email goodfoodfinder@localfirstaz.com.

  • Yes! Locate the width in the embed code and adjust the pixel value to your preference.

    • Example: Change width:200px; to width:150px; for a smaller badge.

  • Yes, but you’ll need to upload the badge as an image. We ask that you manually link it to Good Food Finder.

    • Double-check the embed code for any errors or accidental edits.

    • Ensure your website platform supports HTML embed codes.

    • Refresh your page or clear your cache to see the updates.

  • Use the white badges for websites or packaging with darker backgrounds for better contrast.