Buy Me a Coffee
Buy Me a Coffee is a platform that enables creators, developers, and businesses to receive financial support directly from their audience through small one-off or recurring contributions.
Key features include:
- Support payments from customers and followers
- Customisable support buttons and widgets
- QR codes for sharing support links
- Stream alerts and supporter notifications
- Creator pages for collecting contributions
Buy Me a Coffee integrates with ShopWired by adding a tracking to the ShopWired theme so you can display a support widget and collect contributions directly from your website.
Account creation
Account creation
Create an account at Buy Me a Coffee.
After creating your account you must configure your creator page and connect a supported payment provider in your Buy Me a Coffee account so that you can receive payments.
Once configured, Buy Me a Coffee provides the code required to add support buttons and widgets to your website.
Theme installation
Theme installation
Buy Me a Coffee provides a widget script to display a button on every page of your website, similar to the example shown below:
<script data-name="BMC-Widget"
src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js"
data-id="example"
data-description="Support me on Buy me a coffee!"
data-message=""
data-color="#FF5F5F"
data-position="Right"
data-x_margin="18"
data-y_margin="18">
</script>
The script shown above is provided as an example only. You must copy the exact script provided in your own account, as the script and any ID values will be unique to your website.
- Navigate to Website > Themes
- Select the
code editoroption for the theme you want to edit - Open the
master.twigfile - Add the script just above the closing
</head>tag - Select Save changes
After the script has been added, Buy Me a Coffee will begin collecting data from your website.
Adding the Buy Me a Coffee widget to website pages
Adding the Buy Me a Coffee widget to website pages
After generating the widget script in your Buy Me a Coffee account, you can also place it directly inside specific pages using a custom HTML section.
- Navigate to Website > Themes
- Select
customise your themefor the theme you want to edit - Select
add a new section - Select the
custom HTMLsection type - Paste the widget code into the Custom HTML setting
- Position the section where you want the widget to appear
- Save your changes
Adding a Buy Me a Coffee button to website pages
Adding a Buy Me a Coffee button to website pages
Buy Me a Coffee also provides a button that links visitors directly to your support page. The platform generates HTML similar to the example below.
<a href="https://www.buymeacoffee.com/example">
<img src="https://img.buymeacoffee.com/button-api/?text=Buy me a coffee" />
</a>
The code shown above is provided as an example only. You must copy the exact code generated in your Buy Me a Coffee account.
To add the button to a page:
- Navigate to Website > Themes
- Select
customise your theme - Select
add a new section - Choose the
custom HTMLsection type - Paste the button code into the Custom HTML setting
- Position the section where the button should appear
- Save your changes
Recommendations
Recommendations
- Install the widget script only once in your theme to avoid duplicate widgets
- Use custom HTML sections to control exactly where support buttons appear
- Place support buttons on landing pages, blog posts, or creator-focused content
- Test the widget and button placement on a draft theme before publishing
- Keep a record of any widget or button code added to your theme for future management
