Header.png

Integrations

Free artist tools for your Shopify website

Install these tools on your website to promote your events, build your Bandsintown following and grow your fan email and SMS list:

  • Before Starting: Identify your Shopify Theme Architecture

  • Events Widget: event listing with fully customizable text, look and feel to match your style

  • Follow Button: a simple call to action to grow your Bandsintown following while building your contact list

  • Signup Form: an email signup form to build your contact list while growing your Bandsintown following


What is your Shopify Theme Architecture? Vintage or Online Store 2.0

IDENTIFY Before PASTing YOUR WIDGET CODE ON Shopify

Theme architecture versions

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

We built our demos using the following Themes:

  • Minimal: Shopify free Vintage theme

  • Dawn: Shopify free Online Store 2.0

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


Display upcoming live shows on your website with our Advanced Events Widget

1. CUSTOMIZE

Use our builder to customize your widget

2. COPY

Copy your embed code.

 

STEP 1: CREATE YOUR CUSTOM WIDGET

Get set up easily in just a few clicks—no coding required. 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.

Please note that the Events Widget is compatible with all website builders that support HTML editing. This includes WordPress, Wix, Squarespace, Shopify and more.

 

STEP 2: Copy your WIDGET CODE

Once you’ve finished customizing your widget, click on the button ‘Copy Code’.

Need Help? Start a chat we'll be happy to assist you.


STEP 3. Paste YOUR WIDGET CODE ON A Shopify VINTAGE

THEME

  1. In your Shopify account, go to your Web Site Theme then click Customize

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

  3. Click on the + button to Add a Section

  4. Select Custom HTML

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

  6. Click on Save to save your changes

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


STEP 4. Paste YOUR WIDGET CODE ON Shopify Online Store 2.0

STEP 4.1 Before Pasting the Widget Code

The challenge: (OS 2.0 does not offer the section Custom HTML)

In order to install the BIT Widget, it is necessary to install the JS code in a Custom HTML Block, so it was not evident how to do it in this new Theme.

The solution to simulate a Custom HTML Section

1. Go to Edit Code on your Theme

2. Go to Sections and Open the Section called “rich-text.liquid”, then copy the entire text.

3. Got to Add a new section, call the new section : “raw-html.liquid”, then paste the code you copied on steep 2.

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

STEP 4.2 PASTing YOUR WIDGET CODE ON Shopify Online Store 2.0

  1. Copy your widget code from your Bandsintown for Artists (Manager Page)

    Your widget code is divided in two sections: The Header and the Properties Block

2. In your Shopify Theme, go to Edit Code and search for the section header.liquid

3. Open the section and paste your Widget Header like the example below

4. Go to Customize your theme

5. Select the page where you want to show your widget and add a new section

You will see two sections with the same name “Rich Text“

6. Make sure you select the Section where you can add HTML code in a textarea.

Remove the Heading and the Button, so at the end you will see only the Block “Paste Here Your HTML Code“

7. Click on your Text Area, then on description and finally paste your Properties Block

8. Your Widget will show on your Shopify page

STEP 4.3 After PASTing YOUR WIDGET CODE ON Shopify Online Store 2.0

Depending on your theme, it's possible that events may not be aligned or you may find the widget too narrow. Here's what you can do then:

The widget could be affected by the CSS properties of the website where the widget is installed.

In this case, the section “raw-html.liquid” that we have created is affected by a CSS asset “section-rich-text.css”

1. 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.

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

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

The Widget will be adjusted


Grow your Bandsintown following and build your contact list with the Follow Button

01. Build your URL

Define the URL you will use in your Follow Button

02. Paste your URL

Paste your URL on your Squarespace Button

03. Test your Button

Verify the button will open the fan acquisition form

 

STEP 1: Build the URL to use on your Follow Button

You could follow this template to create your URL

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

Copy the URL above and make sure to:

  • replace 2619661 by your own Bandsintown artist ID

  • replace {your_appid} with a custom string composed of the prefix shopify- followed by the artist name. For example shopify-your-artist

  • replace {your_affiliation_code} with the Affiliation Code you already use to call the Bandsintown API (or remove the affil_code parameter altogether if you don’t already have one)

 

Other Parameters you could add to the URL to customize colors, sizes and fonts:

  • &bg-color=%231A1A1A
  • &border-color=%23FFFFFF
  • &cta-bg-color=%23FFFFFF
  • &cta-border-color=%23FFFFFF
  • &cta-border-radius=0px
  • &cta-border-width=3px
  • &cta-text-color=%23FFFFFF
  • &font=Helvetica%20Neue
  • &text-color=%23FFFFFF
 

STEP 2: Paste your URL on your Shopify Button

Once you’ve finished customizing your URL, create your Shopify Button and paste the URL

  1. Click on Add Section

  2. Select Rich Text

  3. Sect your block “Button“

  4. Paste the URL code you created on step 1, inside the Button Link field

  5. Click on Save to publish the changes

  6. Check if the Buttons is linking to your URL

STEP 3: Test your Button

If you click your button you should see the Fan Acquisition Form

 

Grow your Bandsintown following and build your contact list with the Signup Form

Use our builder to customize your email signup form

Copy your embed code

Add it on your wbsite

 

Get set up easily in just a few clicks—no coding required. Customize your form's layout, colors, fonts, and copy to match your aesthetic and voice.

 

Once you’ve finished customizing your Signup Form, click on the ‘Copy Code’ button, paste it on your website, and you’re all set! Your visitors can now easily subscribe to your Emails/SMS lists, follow you on Bandsintown, and begin receiving your event alerts & direct messages.

 

In your Shopify account, go to your Web Site

  1. Select the page where you want to display your Signup Form (or create a new one)

  2. Click on the Page + Add section

  3. Select the same Rich Text you Create on the Advanced Widget Section ( section: “raw-html.liquid”)

  4. Select the Block “Paste Here your HTML Code“

  5. Go to “Text - Description” and Paste your Bandsintown Signup Form code

  6. Click on Save to keep your changes

  7. Your Mailing list form and subscribe button are now listed on your website and will sync in real-time with your Bandsintown account