Customer Support

We’re constantly refining the app to ensure the best user experience. Please let us know if you experience any issues via email:

TopInfo can be easily installed via Shopify App Market.
* Go to our app’s link:
* Click “Add app” button (you might be asked to login if you have not logged in to your Shopify account yet)
* You’ll be directed to your store > Click “Install app” button.
* Done.

After successfully installing TopInfo, it will appear in your app list in Shopify admin.

No coding required.

1. The app doesn't use any BLOCK which you need to activate manually.

2. For configuring the app or effects use only the app UI.

3. The app automatically injects "JavaScript" into your theme "</head>" tag which is automatically removed after uninstalling the app.

* Go to the Bar Designer
* From Background Options section upload background image
* From Animation Options section select Background Animation Style

The bar is not activated.

By default, when you successfully create a bar, it is activated. (only the first created bar is auto activated). Please click on the toggle button to activate it.

Loading time

Our server is placed in US, therefore, there might be a delay in loading time for users who are far from US.

You set some display configuration

TopInfo might not show up because you have set some advanced configurations that hide the bar in some specific cases, such as: only display on some pages, only show on desktop/mobile, country filter, source filter, schedule display.
Please re-check the bar configuration to see whether there are some limit options enabled.

You have multiple bars on the same page

You can have multiple bars on the same page and they will auto switch to each other after a selected time.
However, if there are more than one bar which are set to appear on the same page, only the first created bar will show up.

Conflict with your theme

TopInfo might not be compatible with all themes with the default settings.
In these cases, we have provided a shortcode for you to add a bar manually to your theme.
Please follow these steps:

* Create a bar normally in TopInfo

* Display Position of bar, select option "Place bar shortcode to your theme"

* A shortcode of this bar will appear <div id="hmrt_cn_fx"></div>, copy it.

* Go to your Shopify admin / Online stores / Themes → click on "Actions" button in your Current theme → Edit code.

* Paste the copied shortcode in where you want it to appear. (usually in "theme.liquid" or in Sections such as "header.liquid" or "collection.liquid"...)

Also, if your theme uses a sticky header, it might conflict with sticky bar. In this case, disable the sticky header in your theme or choose a TopInfo position without (always visible while scroll).

TopInfo shortcode

TopInfo might not display properly if you placed a TopInfo shortcode in your theme but the Position of bar option is not set in "Place bar shortcode to your theme" but set in a fixed position option (such as Top of the page pushes down the rest of page).

There are 2 solutions for this case:
* If you want the bar to show as where you pasted the shortcode, choose the option "Place bar shortcode to your theme" in Position of bar.

* If you want to use an available position, please remove the shortcode in your theme's code.

You use more than one app to create a bar

There might have a conflict between apps with the same function.
So if you are using different apps to create multiple bars, we recommend using only one at a time.


If you have checked all the above causes and tried all solutions, but TopInfo is still not showing up on your store; you can reach out to our support team at We will answer your ticket as soon as possible.

NOTE: This article requires technical knowledge and prior experience with liquid code.

1. From Shopify's admin, select Online Store.

2. Select Actions.

3. Select Edit code.

4. Under LAYOUT, TEMPLATES, SECTIONS and SNIPPETS sections choose the liquid file where you want to add the shortcode. For Example: LAYOUT > theme.liquid, or SECTIONS > header.liquid.

5. Add this <div id="hmrt_cn_fx"></div> shortcode into the theme <body></body> tag, before closing </body>, and click Save.

TopInfo uses Shopify's ScriptTag to integrate the JavaScript into your storefront. The app does not create or edit any liquid or script in your store. After Uninstalling TopInfo, the ScriptTag will be automatically removed from the storefront.
TopInfo stores all your uploaded images into your store theme assets folder. This means, when you change your store theme, you will need to re-upload the images.
NOTE: Please don't delete the images from assets folder starting from tpif_ while using our app.
A TopInfo might not display well on mobile or other small screens because the content is too long.
To achieve the best responsiveness, you should create different bars for each device with optimized content.
Yes you can.
The background image should be in PNG or JPG as they are the most common image format. If you are using the default settings, the recommend size for desktop is 1980x400, for tablet is 1400x200 and for mobile is 640x160.
You can access TopInfo anytime via your Shopify Admin:

* Login to your Shopify admin dashboard (

* Click on Apps (

* Click on TopInfo

* You’ll be navigated to the TopInfo Dashboard without having to login.

Good question! Remove TopInfo from your app list on Shopify Admin panel any time before the 2 days are up to avoid starting a monthly subscription.
To completely remove TopInfo app from your store, please follow these steps:

1. Visit your Shopify admin page -> Apps page and delete the TopInfo app there.

2. If you completed the steps to increase your app's loading speed, then also delete the integrated JAVASCRIPT which may still be in your "Layout/theme.liquid" file before the "</head>" tag.