How to place a bar or banner campaign in a custom position?
With Attrac, you can place your bar or embedded banner campaign anywhere in your Shopify theme, not just in standard locations such as the top or bottom of the page for the announcement bar, or below or above the ‘Add to Cart’ button for the embedded banner.
There are generally two ways to position your Attrac campaign in a custom location within your Shopify theme:
By adding the campaign as a Section to your theme editor:
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.
- 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.
- 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 snippet that appears when you select the 'Custom' position on Attrac.
- 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.