How to place the gift promo banner in a custom position?

By default, you can position the gift offer promo banner using the offer settings. The promo banner can be positioned above or below the add-to-cart button.

AppHero offers even more flexibility, allowing you to place the promo banner in a custom position anywhere on the product page.

There are three methods for placing your promo banner in a custom position on the product page:

By adding an AppHero App Block to your theme:

This method is straightforward and doesn't require any coding knowledge. Follow these steps:

In your AppHero offer settings, change the promo banner position to 'Custom'. You can find this under 'Content & Style > Promo Banner > Style & Behavior'.
A small dialog will appear prompting you to copy a code tag. Click the ‘Copy’ button next to the dialog.
Save the offer 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.

In your product page template, add a new section in the theme's Template and choose Free Gift Offer as the type of app block.

Paste the copied code tag into your ‘Offer 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 gift promo banner location.

By adding the promo banner as a ‘Custom Liquid’ Section to your theme:

This method is straightforward and doesn't require any coding knowledge. Follow these steps:

In your AppHero offer settings, change the promo banner position to 'Custom'. You can find this under 'Content & Style > Promo Banner > Style & Behavior'.
A small dialog will appear prompting you to copy a code tag. Click the ‘Copy’ button next to the dialog.
Save the offer 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 gift promo banner location.
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 offer code into your theme product page 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 the promo 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 AppHero offer settings, change the promo banner position to 'Custom'. You can find this under 'Content & Style > Promo Banner > Style & Behavior'.
A small dialog will appear prompting you to copy a code tag. Click the ‘Copy’ button next to the dialog.
Save the offer 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 AppHero support team for guidance on finding your desired location within your theme's code.

If you need further assistance, you can contact the AppHero support team to help you set up your gift offer and position it in a custom location.