How do I place the bar visually in theme customization? •

Our Hextom: Announcement Bar allows you to position the bar anywhere you prefer within your store.

To begin, make sure the Manual Placement option is enabled in your bar campaign under the Display Configuration section.

On this page:

• Adding the bar as Section
• Adding the bar as Block

• Video Tutorial

  
  
  

  Note

  If you're not using a Shopify 2.0 theme, you may be unable to add a section to certain pages. In this case, we recommend checking out our other article How do I place the bar anywhere on my site with an older Theme? •

Adding the bar as a Section

1. Access the theme's Customize section. For that click on:

   A) Online Store

   B) Themes

   C) Customize

2. After opening the theme editor, navigate to the left side of the screen. Click on Add Section, then switch to the Apps tab.

   
   

   

   
   

3. Scroll if necessary until you find QAB Custom Placement, then click on it to add it to your page.

   
   

   

4. Once the section is added, you can use the dotted tab to drag and reposition the bar within your store's layout. Like so:

   
   

   

   
   

5. If you want the bar to span the full width of the page (since it may not stretch edge to edge by default), click on Apps in the theme editor:

   
   

   

   
   

   This will display the app-related configurations. Disable the toggle labeled "Make section margins the same as theme" to allow the bar to occupy the full width of the page.

   
   

   

   
   

6. Save (top right) and the bar will then load and go from edge to edge.

   
   

Adding the bar as a Block

You can also place the bar as a block within another section. For this example, let’s switch over to the Product Page.

1. In the top drop-down click in and select Products, then Default Product.

   
   

   

   

   
   

2. Once the product page loads, focus on the section labeled Product Information.

   Here, you'll see all the components that make up that section. To add the bar, simply add a new block within it.

   
   

   

   
   

3. It will show two tabs: Blocks and Apps. Switch to the Apps tab, then locate QAB Custom Placement from the list.

   
   

   

   
   

4. The bar will appear at the bottom of the section. You can now use the dotted tab next to the bar to drag it upwards to your desired position.

   
   

   

   
   

5. Click Save, and it should display on the position set.

   
   

   

   
   

Video Tutorial

You can also view our video tutorial, shown below: