🧩 How to add the Club floating button to your Shopify store

This guide shows you how to add the Club “floating button” to your Shopify store using two small code snippets:

A JavaScript snippet in your theme.liquid file
A CSS snippet in your main stylesheet (for example base.css or theme.css)

You’ll be able to:

Control where the button appears (bottom-right, bottom-left, top-right, top-left)
Edit the button text
Choose light or dark mode
Pick the button size (x-small → Large)
Nudge the button up/down/left/right using pixels so it doesn’t clash with other elements

✅ Before you start

You’ll need:

Access to your Shopify admin
Permission to edit your live theme’s code

Step 1: Add the Club script to `theme.liquid` ⚙️

This script loads the Club embed across your site.

Log into Shopify Admin.
Go to Online Store → Themes.
On your live theme, click … → Edit code.
In the left sidebar, under Layout, click theme.liquid.
Scroll all the way to the bottom of the file.
Find the closing </body> tag.

On the line right before </body>, paste the Club script snippet you received. It should sit like this:

<div id="club-co-floating-wrapper" class="club-float-bottom-right">
  
  <div data-club-embed="true" 
       data-brand-name="#Brandname#" 
       data-badge-text="#Button Text#" 
       data-badge-color="dark" 
       data-badge-size="Small">
  </div>
 </div>
<script type="module" src="https://embed-club.club.co/"></script>

Click Save.

👍 That’s the “engine” installed. Next, you’ll style and position the button with CSS.

Step 2: Add the CSS for positioning 🎯

This CSS controls where the button lives on the screen (bottom-right, bottom-left, top-right, top-left) and how far it is from the edges.

In the same theme code editor, scroll to the Assets folder.
Open your main CSS file. This is usually:
- base.css (most common), or
- theme.css, or
- style.css
Scroll to the bottom of that CSS file.

Paste in the Club CSS snippet you received. It will look broadly like this:

/* == Club.co Floating Wrapper Styles == */
#club-co-floating-wrapper {
  position:fixed;
  z-index:999;
}
.club-float-bottom-right{
  bottom:25px;
  right:25px;
}
.club-float-bottom-left {
  bottom:25px;
  left:25px;
}
.club-float-top-right {
  top:25px;
  right:25px;
}
.club-float-top-left {
  top:25px;
  left:25px;
}

Click Save.

🔍 If your theme doesn’t have base.css, try theme.css or another main stylesheet under Assets.

Step 3: Customise brand name, button text, theme & size ✏️

Inside your script snippet in theme.liquid, you’ll see configuration options.

3.1 Set your brand name

Find the line that controls the brand (for example brandName or similar).
Set it to your the same name as oyu have on your club landing page. If you landing page URL is club.co/onepiece then you enter "onepiece" in this section. This control which brand will be opened on your embed.
```
brandName: "onepiece"
```

✅ This is what “triggers” the correct brand inside Club when a user clicks the button.

3.2 Edit the button text

Find the line for the button label (for example buttonText).

Change it to what you want the button to say. Examples:

buttonText: "Join OnePiece Club" buttonText: "Become an Ambassador"

3.3 Choose dark or light mode

Find the theme or mode setting:
```
theme: "dark"  // or "light"
```
Use dark for light websites where you want contrast, or light if your site background is darker.

3.4 Pick the button size

You can choose from:

xsmall → extra small
small → small
medium → medium
large → large

Example:

size: "small"

Change the value, click Save, then refresh your storefront to preview.

Step 4: Fine-tune the button position (pixels) 🛠️

If the button overlaps with chat widgets, cookie banners, or other UI, you can move it by adjusting the pixel values in the CSS.

Example from your base.css:

.club-float-bottom-right{
  bottom:25px;
  right:25px;

You can:

Move it up: increase bottom (for example bottom: 50px;)
Move it down: decrease bottom
Move it further left: increase right
Move it closer to the edge: decrease right

Example:

.club-float-bottom-right{
  bottom:50px;
  right:50px;

🔄 Save your changes, refresh your storefront, and repeat until the button sits exactly where you want it.

Changing the corner position (bottom-right, bottom-left, top-right, top-left) 🧭

In your script snippet, you’ll see a class for the button’s placement, for example:

<div class="club-float-bottom-right"></div>

You can change the corner by swapping the class:

club-float-bottom-right
club-float-bottom-left
club-float-top-right
club-float-top-left

Example:

<!-- Change from bottom-right --> 
<div class="club-float-bottom-right"></div>  

<!-- To bottom-left --> 
<div class="club-float-bottom-left"></div>

Save and refresh your storefront to confirm the new position.

Step 5: Test on your live site 👀

Open your store in a new browser tab (preferably in an incognito/private window).
Navigate across a few pages (homepage, product page, collection page).
Confirm that:
- The button appears on all pages where you expect it
- The text is correct
- The colour mode (dark/light) fits your design
- The size feels right on both desktop and mobile
- The button does not cover important UI (chat widgets, cookie banners, etc.)

If something looks off, tweak:

Text / theme / size in theme.liquid
Position / corner in the class name and CSS

Troubleshooting ❓

I can’t find base.css.
Look for other main CSS files in Assets, like theme.css or style.css. Your Club snippet will work in any main stylesheet that loads on all pages.

The button doesn’t show at all.

Double-check that the script snippet is pasted above </body> in theme.liquid.
Confirm that you’ve set the correct brandName that matches your Club brand.
Clear your browser cache or try an incognito window.

The button is in the wrong place or overlaps something.

Switch corner class (bottom-right, bottom-left, top-right, top-left).
Increase bottom or right pixel values in the CSS until it clears other elements.

🧩 How to add the Club floating button to your Shopify store