How to Add Beanconqueror Integration to Your Shopify Coffee Store (Step-by-Step Guide)

Coffee enthusiasts love tracking their brews. Many use Beanconqueror, a popular free app that logs coffee details, brew methods, and tasting notes.

But here's the problem: manually entering all your coffee information into the app takes time. Customers have to type bean names, origins, processing methods, and roast dates. Most won't bother.

The solution? Let customers import your coffee data directly from your Shopify store into their Beanconqueror app with one click.

We built this feature for our Central Coast Coffee store. Now our customers can grab all the coffee details—origin, tasting notes, roast date, processing method—and send them straight to their phone app.

This guide shows you exactly how to add the same feature to your Shopify coffee store. No coding experience needed. Just follow the steps.

This guide will walk you through the entire process of adding a custom "Import into Beanconqueror" button to your Shopify product pages. This allows your customers to easily import detailed coffee information directly into their app.

Step 1: Create the Metafields in Shopify

First, you need to create the fields in Shopify to hold your detailed coffee data.

1. From your Shopify admin, go to Settings in the bottom-left corner.
2. Navigate to Custom data and select Products.
3. Click Add definition. You will repeat this for every field listed below.

Create the following metafields. It is crucial that the Namespace and key matches exactly. The Name is for your reference.

Pro Tip: For "List" content types, you can choose either "Single line text" or "Number" depending on your needs.

Name	Namespace and key	Content type
Basic Info
Tasting Notes	custom.tasting_notes	Single line text
Cupping Score	custom.cupping_score	Number (decimal)
Price per KG	custom.price_per_kg	Number (integer)
Decaffeinated	custom.decaffeinated	True or false
Roasting Info
Roast Machine	custom.roast_machine	Single line text
Roast Profile	custom.roast_profile	Single line text
Internal Agtron	custom.internal_agtron	Number (integer)
Origin Info
Country	custom.country	Single line text
Region	custom.region	Single line text
Farm	custom.farm	Single line text
Producer	custom.producer	Single line text
Altitude	custom.altitude	Number (integer)
Harvest Start Month	custom.harvest_start_month	Date
Harvest End Month	custom.harvest_end_month	Date
Varietals	custom.varietals	List of single line text
Processing	custom.processing	List of single line text
xBloom (Optional)
xBloom Profile (15g)	custom.xbloom_profile_for_15g	URL
xBloom Profile (18g)	custom.xbloom_profile_for_18g	URL

After creating these, you can go to any product in your Shopify admin and fill in this information in the "Metafields" section at the bottom of the page.

Step 2: Create the Liquid Snippet

Now, let's add the code to your theme.

1. From your Shopify admin, go to Online Store > Themes.
2. On your current theme, click the "..." button and select Edit code.
3. In the file explorer on the left, find the Snippets directory and click Add a new snippet.
4. Name the snippet beanconqueror and click Done.
5. Copy the entire code from this file beanconqueror.liquid and paste it into your new beanconqueror.liquid file.
6. Save the file.

Step 3: Configure the Snippet

This is the most important step. You need to tell the code where to find the metafields you created.

1. Open the beanconqueror.liquid snippet you just created.
2. Scroll to the top to the CONFIGURATION SECTION.
3. For each line, replace the placeholder custom.placeholder with the key you created in Step 1.

Example:

The template code looks like this:

{% assign tasting_notes = product.metafields.custom.placeholder.value %}

If you created your "Tasting Notes" metafield with the key custom.tasting_notes, you will change it to:

{% assign tasting_notes = product.metafields.custom.tasting_notes.value %}

Do this for every variable listed in the configuration section.

Step 4: Add the Snippet to Your Product Page

Finally, you need to tell Shopify where to display the button.

1. In the code editor, find your main product template file. This is usually in the Sections directory and is often called main-product.liquid, product-template.liquid, or something similar.
2. Find a good place to add the button. A common spot is right after the product description. In the code, this might look like {{ product.description }}.
3. On a new line below your desired location, add the following code:
4. {% render 'beanconqueror' %}

5. Save the file.

Step 5: Test It Out!

Go to a product page on your live store where you have filled in the new metafields. You should now see the "Import into Beanconqueror" button. Click it to make sure it generates a valid URL and opens the app. Congratulations, you're all set!