Skip to main content

Adding Banners to your Theme

S
Written by Support
Updated this week

Note, this app is only compatible with Online Store 2.0 or later themes that support app blocks. For more details, please read theme requirements & compatibility.

Adding a Banner

  1. Once you have created a banner, find it in the banners table in the app dashboard and click its Add to theme button.

  2. This will open the Install Block pop-up:

  3. In the pop-up, select the theme that you want to add the block to, and then copy the banner ID (required in a later step).

  4. Click the Add to theme button at the bottom of the pop-up.

  5. This will open the theme editor with the block added to the page (but the changes not yet saved).

  6. Drag the Dynamic Product Banners block to the desired position. Note, if the theme editor won't let you drag the block to where you want it, see the Adding Banners Manually section in this document.

  7. Click on the Dynamic Product Banners block to open its settings, and then paste the banner ID (copied in step 3) into the block's Banner ID field.

  8. Once you have added the banner ID and positioned the block where you want it, click the Save button.

  9. Success! Your banner has been added to your theme.

Adding Banners Manually

  1. In the banners table in the app dashboard, find the banner you want to add and copy the value in its Banner ID column.

  2. Navigate to the themes page in the Shopify admin by clicking on the Online Store sales channel:

  3. From the themes page, click the Edit theme button to open the theme editor of the theme you want to add the banner to.

  4. At the top of the theme editor, choose the template that you want to add the banner to. For this example, we will choose the default Products template.

  5. From the Products template, click on the section (or block, if your theme supports sub-blocks) in the left sidebar that you want to add the block to, and then click its Add block button.

  6. In the pop-up, click the Apps tab and select the Dynamic Product Banners block.

  7. Drag the inserted block wherever you want it, and paste the banner ID you copied in step 1 into the block's Banner ID field.

  8. Click save.

Did this answer your question?