How to place a bar or banner campaign in a custom position?
By default, you can position an Attrac campaign (announcement bar or embedded banner) using the campaign settings. The announcement bar can be placed at the top or bottom of the page, while the embedded banner can be positioned above or below the add-to-cart button.
Attrac offers even more flexibility, allowing you to place your bar or embedded banner campaign in a custom position anywhere within your Shopify theme—not just in standard locations.
There are three methods for placing your Attrac campaign in a custom position within your Shopify theme:
By adding an Attrac App Block to your theme:
This method is straightforward and doesn't require any coding knowledge. Follow these steps:
- In your Attrac campaign settings, change the campaign position to 'Custom'. You can find this under 'Style & Behavior > Position'.
- A small dialog will appear prompting you to copy a code tag. Click the ‘Copy’ button next to the dialog.
- Save the campaign before exiting.
- Navigate to ‘Themes’ in your Shopify admin dashboard. You can find this under ‘Sales channels > Online store > Themes’. Click ‘Customize’ to open your Shopify theme editor.
- Add a new section in the theme's Header, Template, or Footer and choose Attrac Campaign as the type of app block.
- Paste the copied code tag into your ‘Campaign code tag’ field and click save to display the app block in the preview and theme.
- Drag and drop the app block to the desired campaign location. For our example, we placed the announcement bar under the header.
Note: if your campaign is an announcement bar and you want to make the app block full-width, open the "Apps" section containing the Attrac App Block to display its settings, and disable the setting "Make section margins the same as theme".
By adding the campaign as a ‘Custom Liquid’ Section to your theme:
This method is straightforward and doesn't require any coding knowledge. Follow these steps:
- In your Attrac campaign settings, change the campaign position to 'Custom'. You can find this under 'Style & Behavior > Position'.
- A small dialog will appear prompting you to copy a code tag. Click the ‘Copy’ button next to the dialog.
- Save the campaign before exiting.
- Navigate to ‘Themes’ in your Shopify admin dashboard. You can find this under ‘Sales channels > Online store > Themes’. Click ‘Customize’ to open your Shopify theme editor.
- Add a ‘Custom Liquid’ section to your theme template.
- Paste the copied code snippet into your ‘Custom Liquid’ section and click save to display the section in the preview and theme.
- Drag and drop the ‘Custom Liquid’ section to the desired campaign location. For our example, we placed the announcement bar under the header.
- Set the padding for the ‘Custom Liquid’ section according to your preference.
Note: most Shopify themes have the Custom Liquid section. However, some themes may have other options for adding HTML code, such as a ‘Custom content’ section.
By inserting the campaign code into your theme template code:
This method is more advanced and requires basic coding knowledge. Unlike the Section drag-and-drop method used previously, which has limitations like being unable to place a banner anywhere within the Shopify theme, this method offers more flexibility.
Follow these steps to position your campaign at a custom location using code:
- In your Attrac campaign settings, change the campaign position to 'Custom'. You can find this under 'Style & Behavior > Position'.
- Copy the code tag that appears when you select the 'Custom' position on Attrac.
- Save the campaign before exiting.
- Go to "Themes" in your Shopify admin dashboard, then click ‘Edit code’ to open your theme code editor.
- Paste the copied code into your theme code at the custom position where you want to place the campaign.
Note: If you’re unsure where to place your code, you may want to contact your theme developers or the Attrac support team for guidance on finding your desired location within your theme's code.
If you need further assistance, you can contact the Attrac support team to help you set up your campaign and position it in a custom location.