Skip to main content
All CollectionsFeatures & Functionality
Embed the Club Badge or Custom Link in Your Shopify Store
Embed the Club Badge or Custom Link in Your Shopify Store

Learn how to install Embed in your Shopify store so it appears on your website

Eimear Kirwan avatar
Written by Eimear Kirwan
Updated over a month ago

This guide will walk you through how to:

  1. Add a "Join Us" button or a custom link to different areas of your Shopify store

  2. Embed the Club Badge or Link in your Footer (bottom of the page)

Important Note:
This guide is intended as a reference to help you explore different options for embedding scripts. Since Shopify store interfaces can vary, the steps provided serve as an example to help you understand the process.

You have full flexibility to position the badge or link anywhere in your webstore that best suits your design and user experience.

Option 1: Add the Club Badge or Link to Your Store’s Header (Top Menu Area)

(This places the button in your store’s navigation menu at the top of the page)

Step 1: Copy the JavaScript SDK Code

  1. Go to the Embed Club settings.

  2. Copy the first script (JavaScript SDK):

<script type="module" src="https://embed-club.club.co/"></script>

3. Please copy this code—you’ll need it for the next step in Shopify.

Step 2: Add the JavaScript SDK to Shopify’s Theme

  1. Log in to your Shopify Admin panel.

  2. Navigate to Online Store → Themes.

3. Click Customise on your active theme.

4. Click Actions → Edit Code.

5. On the left menu, find theme.liquid under the ‘layout’ folder (this file controls the entire store layout).

6. Open this file and scroll down to the bottom until you reach the closing </body> tag.

7. Paste the JavaScript SDK code here.

8. Click Save.

Now, your website is ready to integrate the embed feature 🎉💪

Step 3: Add the Badge or Custom Link to Your Header (Navigation Menu)

  1. Go back to Embed Club settings.

  2. Copy the second piece of code:

For a badge (button):

<div data-club-embed="true" data-brand-name="yourbrand" data-badge-text="Join our community" data-badge-color="dark" data-badge-size="xSmall"></div>

For a custom text link:

<div data-club-embed="true" data-custom="true" data-brand-name="yourbrand">Join our Club</div>

3. In Shopify, go back to Online Store → Themes → Customise.

4. Click Actions → Edit Code

5. On the left menu, find header.liquid under the ‘sections’ folder

6. Look for an option to add Custom HTML / Custom <div>.

7. Paste the badge or link code inside the custom HTML block. (Please note this is just an example)

Your 'Join Us' button should now appear in your store’s top menu! 🎉💪

Option 2: Add the Club Badge or Link to the Footer (Bottom of the Page)

(This places the button at the bottom of your website, usually in the footer menu.)

  1. Follow Step 1 and Step 2 above to add the JavaScript SDK.

  2. In Shopify, go to Online Store → Themes → Customise

  3. Click Actions → Edit Code

  4. On the left menu, find footer.liquid under the ‘sections’ folder

5. Look for an option to add Custom HTML / Custom <div>.

6. Paste the badge or link code inside the custom HTML block. (Please remember this is just an example)

7. Click Save & Publish.

Your 'Join Us' button should now appear at the bottom of your Shopify store! 🎉💪

🛠️ Final Notes:

✅ Adding the JavaScript SDK is mandatory for the embed feature to work. It doesn’t matter whether you add it before or after, but it must be included.
✅ Customise the badge—you can adjust the text, color, and size before embedding it.
✅ Experiment with placement to find the best spot for your store’s design and user experience.

Did this answer your question?