HT-Kit: 15 ways to show products, each called with one tag
15 ready-made ways to display affiliate products: grid, deal cards, top-ranked list, comparison table, flash sale, vertical reels, head-to-head, budget slider… Two files, no dependencies, WordPress plugin included.
What is in the download
| File | What it is |
|---|---|
htkit.css, htkit.js | All 15 codes. No dependencies. |
so-mau.html | Sample book: open it in a browser to see all 15 codes (in Vietnamese). |
HUONG-DAN.md | Usage on PHP/HTML sites and WordPress, colors, click tracking (in Vietnamese). |
BANG-MA.md | Code table HT-01 … HT-15 and reserved codes (in Vietnamese). |
wordpress/htkit-shortcode.php | Shortcode plugin [ht ma="HT-04"], bundled with both kit files. The plugin has not yet been run on a live WordPress site, so try it on a draft post first. |
How to call it
<link rel="stylesheet" href="/htkit.css">
<script src="/htkit.js" defer></script>
<script type="application/json" id="san-pham">
[{"id":"q1","name":"Product name",
"price":489000,"oldPrice":650000,
"img":"anh.webp","url":"AFFILIATE-LINK",
"rating":4.8,"sold":3200}]
</script>
<div data-ht="HT-02"
data-ht-src="#san-pham"></div>All 15 codes, running
Match your brand color
Click any 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.
HT-01 Standard grid
Showing many products side by side
HT-02 Deal card
Real discounts: % badge, struck-through price, sold bar
HT-03 Horizontal row
Long lists on phones, search results
HT-04 Top ranking
“Top 3/5/10” articles, with No. 1 highlighted
HT-05 Editor's pick box
Closing on one single product
HT-06 Comparison table
Comparing 2–3 products, one button per column
HT-07 Carousel
More suggestions without using page height
HT-08 Flash sale countdown
Promotions with a real end time
HT-09 Sticky bottom bar
Long articles on phones
HT-10 Vertical reels
One product per screen, TikTok style
HT-11 Review card
Pros, cons and verdict for one product
HT-12 In-article chip
Mentioning a product mid-sentence
HT-13 3-tier price ladder
Budget / Best value / Premium, middle tier highlighted
HT-14 Head-to-head
Two products people hesitate between; the visitor picks one
HT-15 Budget slider
Drag the budget; only products within it remain