Skip to main content

Shopify Integration

Updated over 2 months ago

What is Shopify?

Shopify is a commerce platform artists can use to build an online store, manage sales, market to customers, and accept payments in digital and physical locations. Learn more on their website.

Bandsintown tools for Shopify

Bandsintown offers four different tools to drive merch sales through Shopify.

  1. The Bandsintown for Artists app from the Shopify App Store allows artists to connect a Shopify store to a Bandsintown page, displaying merch from that store on your Bandsintown page.

  2. The Widget allows artists to display upcoming live shows on your Shopify website with fully customizable text, look and feel to match your style

  3. The Follow Button provides simple call-to-action allowing site visitors to follow you on Bandsintown without leaving your site

  4. The Signup Form allows fans to join your Bandsintown mailing list without leaving your site

Display merch from your Shopify store on your Bandsintown artist page with the Bandsintown for Artists Shopify app

1. Connect your store

Install the Bandsintown for Artists app from the Shopify App Store and follow the onboarding prompts.

Within the Artists Accounts settings of the app, click Connect and sign into your Bandsintown for Artists account.

From the list of artist pages you manage, click Connect next to the pages you want to connect

2. Publish Shopify merch to Bandsintown for Artists

From the Settings panel of the Shopify Store Admin Dashboard, click Products and then All Products.

For each product to be displayed, click Manage next to Sales Channels and Apps, and make sure Bandsintown for Artists is checked.

Products will now be available for fans to purchase from your artist page.

To review all merch published to an artist page, click Manage Availability in the Product Status card in the Bandsintown for Artists Shopify app.

PLEASE NOTE: you can display up to 10 products.

How to set up a multi-artist store

A multi-artist store allows labels, agencies, management teams, or any groups of artists to sell merch from one unified storefront.

  1. Log in to Shopify.

  2. Choose another artist to add to your store.

  3. Click Add collection

  4. Select the collection you want and click Add collection

Display upcoming live shows on your Shopify with the Widget

1. Determine your Shopify Theme Architecture

In July 2021, Shopify released a new theme architecture called Online Store 2.0. Themes that use the previous architecture are called vintage themes.

Users of Online Store 2.0 will need to use the Dawn widget, while users of vintage themes will need to use the Minimal widget.

The Shopify Theme Store will allow you to browse free and selected paid themes using search and filter tools.

2. Create your custom Widget

Use the default install settings to have the Widget automatically match your website's color scheme, or dig deeper to customize fonts, colors, content, and more.

3. Copy your Widget code

Once you’ve finished customizing your widget, click Copy Code.

4. Paste your Widget code

For vintage themes:

  1. Navigate to your Website Theme in Shopify, then click Customize

  2. Select the page where you want to display your tour dates, or create a new one

  3. Click + to Add a Section

  4. Select Custom HTML

  5. Paste your Bandsintown Widget code in the Custom HTML Section

  6. Click Save

For Online Store 2.0 themes:

  1. From the Actions dropdown menu of your theme, click Edit Code

  2. Click Sections, open the section called “rich-text.liquid”, then copy the entire text.

  3. Click Add a new section, call the new section “raw-html.liquid”, then paste the code you just copied

  4. In the new file, search for “type": "richtext" and change it to "type": "textarea"

  5. Copy your Bandsintown Widget code. Note that your code is divided in two sections: Header and the Properties block

  6. In your Shopify Theme, go to Edit Code, search for the “header.liquid” section, paste your Widget Header code in place of “script charset="utf-8" src="https://widgetv3.bandsintown.com/main.min.js"></script>”

  7. Click Customize in the upper-right corner of your theme

  8. Select the page where you want to show your Widget and add a new section. You will see two sections named “Rich Text“

  9. Be sure to select the section where you can add HTML code in a “textarea”. Remove the Heading and the Button, so you see only the block which says “Paste Here Your HTML Code“

  10. Click on your Text Area, then on the description, and finally paste your HTML code in the Properties Block

PLEASE NOTE: If events are not aligned, or if the Widget is too narrow, it’s possible that the widget could be affected by the CSS properties of the website where the Widget is installed. Specifically, the section “raw-html.liquid” we have created may be affected by a CSS asset “section-rich-text.css”. Follow the steps below to address this.

11. Go to Edit Code and search for the asset “section-rich-text.css”, then copy the code of this CSS and create a new asset called “section-raw-html.css”, then paste the code.

Open the section “raw-html.liquid” and replace the reference to “section-rich-text.css” for “section-raw-html.css”

12. Open the code of your asset “section-raw-html.css” and change the following lines accordingly.

13. Your shows are now listed on your website and will sync in real-time with your Bandsintown account

Grow your Bandsintown following and contact list with the Follow Button

The Follow button lets you build up your re-targeting audience on Bandsintown and provides fans with an easy way to follow you on Bandsintown. Build your Follow button URL, then add the URL to a new button on your Squarespace page.

Step 1: Build your Follow button URL

Start with this template:

https://bandsintown.com/artist-subscribe/2619661?app_id={your_app_id}&affil_code={your_affiliation_code}&came_from=267&utm_source=public_api&utm_medium=api&utm_campaign=track

Next, replace certain elements of the URL with your personal details:

  1. Replace “2619661” with your own Bandsintown artist ID

    1. Your artist ID can be found by viewing your Bandsintown page in your browser and taking note of the unique number in the URL

  2. Replace “{yourappid}” with “squarespace-” followed by your artist name, with hyphens for spaces. For example “squarespace-Justin-Bieber”

  3. replace “{your_affiliation_code}” with the affiliation code you already use to call the Bandsintown API, or remove the “&affil_code={your_affiliation_code}” parameter altogether if you don’t already have one

  4. Optionally, you can customize the URL further using these parameters as examples

    1. &bg-color=%231A1A1A

    2. &border-color=%23FFFFFF

    3. &cta-bg-color=%23FFFFFF

    4. &cta-border-color=%23FFFFFF

    5. &cta-border-radius=0px

    6. &cta-border-width=3px

    7. &cta-text-color=%23FFFFFF

    8. &font=Helvetica%20Neue

    9. &text-color=%23FFFFFF

2. Add your URL to a Shopify

Once your URL is ready, create a new Shopify button and attach your URL to it.

  • Click Add Section

  • Select Rich Text

  • Select Button

  • Paste the URL code you created on step 1 inside the Button Link field

  • Click Save to publish the changes

Grow your contact list with the embedded Signup Form

The Signup form makes it easy to collect first-party fan data. Use the Signup Form builder to customize your form, then copy your embed code and add it to your website.

PLEASE NOTE: The Signup Form is only available for Shopify stores using the Online Store 2.0 theme and not those using vintage themes.

1. Customize your Signup Form

Adjust the background color, layout, alignment, title, header text, font and text style to your liking.

2. Copy your embed code

Once you’ve finished customizing your Signup Form, click Copy Code to add it to your clipboard.

3. Paste your embed code onto your Shopify store

  1. In your Shopify account, go to your website

  2. Select the page where you want to display your Signup Form, or create a new one

  3. Click on the Page + Add section

  4. Select “raw-html.liquid”

  5. Select “Paste Here Your HTML Code“

  6. Go to Text - Description and paste your Bandsintown Signup Form code

  7. Click on Save to publish your changes

Your Signup Form and Follow button are now listed on your website and will sync in real-time with your Bandsintown account.

Did this answer your question?