Home / Display codes
Product display codes
Every way of showing products has a code. Call the code and you get exactly that layout, on any site. Every card reports its code when clicked, so you can see which layout earns the most clicks.
How to call a code
Example with HT-02 (deal card): place one tag and point it at your product list.
<div data-ht="HT-02"
data-ht-src="#san-pham"></div>Click a product to see the ht:click event.
Products, prices, ratings, sold counts and the countdown in the preview are sample data to show the layout, not real products. On your own site, use real numbers only.
Note for non-Vietnamese sites: HT-Kit v1.0 was built for Vietnamese affiliate sites. Its built-in labels (sold count, pros/cons headings, tier names) are in Vietnamese and prices are formatted in đồng (₫). Button text and block titles can be changed with attributes; the other labels cannot yet.
15 codes, ready to use
Standard grid
Showing many products side by side
Deal card
Real discounts: % badge, struck-through price, sold bar
Horizontal row
Long lists on phones, search results
Top ranking
“Top 3/5/10” articles, with No. 1 highlighted
Editor's pick box
Closing on one single product
Comparison table
Comparing 2–3 products, one button per column
Carousel
More suggestions without using page height
Flash sale countdown
Promotions with a real end time
Sticky bottom bar
Long articles on phones
Vertical reels
One product per screen, TikTok style
Review card
Pros, cons and verdict for one product
In-article chip
Mentioning a product mid-sentence
3-tier price ladder
Budget / Best value / Premium, middle tier highlighted
Head-to-head
Two products people hesitate between; the visitor picks one
Budget slider
Drag the budget; only products within it remain
Coming soon
Reserved codes, not built and not for sale yet. HT = product display, ND = content display.
Swipe to choose
Swipe right to like, left to skip; the liked list with buy buttons appears at the end
Shop the look
A scene photo with tappable dots, one product per dot
3 questions, 1 pick
Three short questions, then a single recommendation shown with HT-05
Quick answer box
A question, one answer, one product; written for Google and AI to quote
Floating compare tray
Tick 2–3 products anywhere and an HT-06 table builds itself at the bottom of the screen
Endless short-news feed
A content display already running on a live site, waiting to be packaged.
READ button to SEO articles
A content display already running on a live site, waiting to be packaged.
Places near you by province and ward
A content display already running on a live site, waiting to be packaged.
Top-left dropdown menu with 3-line visitor counter
A content display already running on a live site, waiting to be packaged.
Zalo number popup before messaging
A content display already running on a live site, waiting to be packaged.
Sticky table of contents with products
A table of contents that follows the scroll, each entry with an HT-12 chip