Typing Text & Animated Text Blocks for CS-Cart

Typing Text / Animated Text Add-on Documentation

Overview

The Typing Text / Animated Text Add-on allows the store administrator to create dynamic animated text blocks and place them anywhere in CS-Cart layouts.

The add-on supports typing effects, fade animation, slide animation, prefix and suffix text, custom HTML tags, font styling, cursor effect, and multi-language text management.

Animated text can be used for promotional banners, homepage messages, category page highlights, product page notices, headers, footers, or any custom layout section.

Main Features

Installation & Activation

1. Install the Add-on
   • Go to Add-ons → Manage Add-ons.
   • Upload the downloaded archive file.
   • Locate Typing Text Blocks.
   • Click Install and activate the add-on.

How to Use the Add-on

Step 1 — Create a Text Set

Go to the CS-Cart admin panel and open Add-ons → Manage add-ons.

Find Typing Text Blocks in the add-ons list and click on its name.

Then go to the Settings tab and open the text management page.

In the animated text field, add each phrase on a new line.

Example:

Free delivery today Special discount available New products arrived

Each line will be displayed as a separate animated text item.

Step 2 — Configure Multi-language Content

If your store uses multiple languages, switch the admin language and edit the text set for each language.

Example:

English:

Free delivery today

Georgian:

უფასო მიწოდება დღეს

Russian:

Бесплатная доставка сегодня

Screenshot placeholder:

[Screenshot 3 — Language selector in admin panel]

Step 3 — Add the Block to Layouts

Open:

Design → Layouts

Choose the required layout page.

• Click + Add block in the desired grid or container Create New Block

1.

2.

3.

Step 4 — Select the Typing Text Block

In the block selection window, choose the Typing Text / Animated Text block.

Select the required template:

Typing Text Animation

Use Typing Text if you want the typing cursor effect.

Use Animation if you want fade or slide animation.

Screenshot placeholder:

[Screenshot 5 — Add block popup with Typing Text block selected]

Step 5 — Select the Text Set

In block settings, choose the created text set from the list.

Then configure visual settings:

HTML tag Color Font size Mobile font size Font weight Padding Text alignment Width

For animation template, configure:

Animation type: Fade or Slide Effect speed Delay

Step 6 — Save and Check Storefront

Save the block and open the storefront page.

The animated text should now appear in the selected layout position.

( If the text is not visible, please verify the Ferro code and ensure that a selection is made in the 'Typing Text Set'. )

Example Use Cases

Homepage Promotional Banner

Prefix: Today only: Animated text: Free delivery 20% discount New arrivals Suffix: for all customers

Recommended settings:

Animation type: Slide Font weight: Bold Text alignment: Center HTML tag: h2

Product Page Notice

Prefix: Animated text: Fast shipping available Official warranty included Limited stock Suffix:

Recommended settings:

Animation type: Fade HTML tag: div Font weight: Normal

Header Announcement

Prefix: Animated text: Free delivery on orders over 100 GEL Special offer this week Suffix:

Recommended settings:

Animation type: Fade Width: 100% Text alignment: Center

Notes

• Each animated phrase should be added on a separate line.
• The block can be placed in any CS-Cart layout grid.
• The same text set can be reused in multiple blocks.
• Different blocks can use the same text set with different visual settings.
• Multi-language content should be configured separately for each storefront language.
• For SEO headings, use h1, h2, or h3 carefully depending on the page structure.