How-to: Add hero banner to Shopify theme

This guide will help you set up the hero banner in your Shopify store using the theme editor. You can display the banner on either your homepage or a specific collection page selected during campaign creation.

On the homepage, you can choose to show a particular sale by entering the Sale ID (optional). If you don’t set a Sale ID, the most recent campaign with "Show hero banner on homepage" enabled will automatically display.

Step 1: Add the Hero Banner App Block

Navigate to Online Store > Themes in your Shopify admin panel.
Click Customize next to your active theme to open the Theme Editor.
Navigate to where you want to insert the hero banner (Homepage or Collection page)
In the Theme Editor, locate the Sections panel on the left.
Scroll down and click Add Section or Add Block (depending on the theme layout).
Search for and select the Disco Hero Banner app block from the list.

Step 2: Adjust position and save

Move the section up or down as you please.
Once you're satisfied with the settings, click Save in the Theme Editor.
Preview your store to ensure the hero banner displays as expected.

Showing Multiple Hero Banners on the Homepage

You can add multiple hero banners to your homepage by adding the app block several times. Use the Sale ID field in each block to specify which sale to show.

Finding Your Sale ID

Go to Campaigns: After creating your sale, navigate to Disco > Campaigns.
Edit the Campaign: Find your sale, then click Edit.
Copy the Sale ID: In your browser's URL bar, find the alphanumeric code at the end (e.g., 8f336858-236d-4ed7-b1dc-b7d906a16ba6 ). This is your Sale ID—copy it.

Specifying Sale ID in Hero Banner

Click the Disco Hero Banner app block in the left hand side menu to open it settings. Find the Sale ID field.
Enter the Sale ID associated with the promotion you’d like displayed on the banner (if applicable). Leaving this blank will show the most recent campaign with "Show hero banner on homepage" enabled.