Animated numbers and icons app

Test the app
Step 1

Installing the app

Click on the "Install" button. We recommend that you install the app in a test environment of your store. If you install the app in the live environment of your store, you should create a complete backup of your store beforehand, as the installation of new apps can always lead to incompatibilities and, in the worst case, to your store not functioning.

In the next step, you will be shown which authorizations the app requires. Agree to the requested authorizations and click on "Install" to continue with the installation of the app.

Once the installation is complete, you will be taken to the start page of the app. The app is also displayed in the menu on the left side. By clicking on the pin symbol to the right of the title, you can pin the app to the navigation bar.

Do you need help or do you have any questions? We will be happy to support you, just send us an e-mail.
support@code108.de
Step 2

Setting up the app

Below, we explain how you can set up the app after installation.

Step 1: Selecting a Plan

You can also visit the plans page of the app, where you can see various subscription plans along with their respective prices and features. In the left sidebar of your Shop Admin, under "Numbers and icons", click on "Plans". On our plan overview page, you can switch between different plans. Click "Select Plan" in the box of the desired plan. Choose between the Free Plan, which provides basic functionalities ideal for getting acquainted with the app, and the paid Pro Plan. The Pro Plan offers advanced features such as custom CSS, individual color options, speed settings, and more to ensure you select the option that best suits your needs.

Step 2: Adding a Block

In your Shop Admin, navigate to the left-hand sidebar and click on "Online Store". From there, select your desired theme and click "Customize" next to it to open the theme editor. In the top bar, use the dropdown menu to choose the template where you want to add the animated numbers and icons. Next, click "Add Block" in the section where you wish to place the block.
In the "Apps" section, you will find the blocks provided by the app. Click on the block you wish to add to your template.

Step 3: Setting Content

Once you have added the block to your desired section within your template as mentioned in the previous step, it will appear in the theme editor's left sidebar under the corresponding section. Click on the block to set your desired content and settings for the block. Here, you can customize the content, the appearance, and other options for the blocks.
If you have opted for the Pro Plan, you can make various adjustments within the block, such as selecting the animation speed.
Save your desired settings by clicking the "Save" button located in the top right corner of the theme editor.

Step 4: Testing the numbers and icons

As certain theme, app, and shop configurations may affect proper functionality, it is recommended to test whether the block displays and operates correctly in your shop as intended.

Free vs. Pro-Plan
The Free Plan offers basic functions, ideal for getting started. The Pro Plan includes advanced features such as custom CSS, custom colors, the support of more templates, different speeds and more.
Step 3

Settings

Content

You can set the number and label for the block.

Design (Pro Plan)

Choose from predefined styles for the block or, alternatively, set individual colors. You can also utilize various color schemes.

Custom CSS (Pro Plan)

Here, you can add additional custom CSS for the block.

Animation Speed (Pro Plan)

Select whether the animated counters should count up very slowly, slowly, normally, quickly, or very quickly.

Free vs. Pro-Plan
The Free Plan offers basic functions, ideal for getting started. The Pro Plan includes advanced features such as custom CSS, custom colors, the support of more templates, different speeds and more.
Animated numbers and icons app

Frequently asked questions

Why isn't the number or icon appearing on the frontend?

Please ensure that you have added the block to the template where the blocks are supposed to appear.

What is the difference between the Free and Pro Plan?

The Free Plan offers basic functionalities, ideal for getting started with our app.

The Pro Plan expands these capabilities, offering additional features such as custom CSS, individual colors, speed options, and various color schemes. Additionally, with the Pro Plan, the supported templates are index, product, page, article, blog, whereas the Free Plan supports only the following templates: index and page.

How can I switch from the Free to the Pro Plan?

In the search bar of your Shop Admin, type "Numbers and icons" and click the search result "Numbers and icons" to access the app administration. The homepage will display your current subscription status (Free or Pro Plan).

In the left sidebar of your Shop Admin under "Numbers and icons", click on "Plans". On our plan overview page, you can switch between different plans. Click "Select Plan" in the box of the desired plan.

If you have any questions, please send us a message to support@code108.de.