Addina - Multipurpose eCommerce HTML Template
Тепла кремово-бронзова шаблонна вітрина з трьома варіантами магазинів (меблі, бакалія, аптека) на Bootstrap та Swiper.
Враження
Addina — це теплий рітейл-орієнтований e-commerce HTML шаблон, який постачається з трьома варіантами магазинів: меблі (типовий index.html), бакалія та аптека — усі з однієї спільної кодової бази. Візуальна мова базується на кремовому тлі (#f5f1e6), теплому бронзовому акценті (#b18b5e) та шрифті Sora, що тримає заголовки архітектурно чіткими без холодного відчуття. Секції спираються на великі дворядкові написані великими літерами заголовки, щедрий вертикальний ритм у 100 пікселів та промо-картки на повну ширину, які виводять продуктову фотографію на перший план без темних накладок.
Анімація навмисно стримана: Swiper рухає більшість каруселей (геро, обране, трендове, відгуки, бренди), Slick обслуговує слайдер відгуків та розпродажу, vanilla-JS таймер зворотного відліку підтримує відчуття терміновості в банері акцій, а SVG-кнопка повернення нагору з кільцем прогресу слугує тактильним індикатором скролу без важких бібліотек. Тут немає скрол-ефектів рівня GSAP або Lenis — це збірка "хай говорять товари", а не кінетична вітрина. Примітка: бібліотека каруселей Slick тут завантажена, але відсутня у vocabularies.libraries — записано лише swiper (домінантна карусель); було б корисно розширити словник значенням slick.
Шаблон пасує бутіковим меблевим магазинам, лайфстайл-маркетплейсам, фронтам супермаркетів і швидкої доставки, а також аптечним мережам, яким потрібен охайний, але конверсійно-орієнтований вигляд. Менш доречний для редакційних брендів, що потребують кінематографічного руху, або для магазинів, де чекаут має бути зв'язаний з реальним бекендом (додані mail.php та action форм — це заглушки). Виробничі застереження: пайплайн ресурсів припускає платний Font Awesome 6 Pro та глобальні jQuery 3.6 й Bootstrap 5, тож будь-який порт у Webflow- чи React-стилі потребуватиме їх заміни.
Палітра
Типографіка
Бібліотеки
Сторінки
- Home Furniture
index.html - Home Grocery
grocery.html - Home Pharmacy
pharmacy.html - About
about.html - Shop
product.html - Product Details
product-details.html - Cart
cart.html - Checkout
checkout.html - Wishlist
wishlist.html - Find a Store
store.html - Portfolio
portfolio.html - Portfolio Details
portfolio-details.html - Blog
blog.html - Blog Grid
blog-grid.html - Blog Details
blog-details.html - FAQ
faq.html - Contact
contact.html - Coming Soon
coming-soon.html - 404
error.html
Ключові фішки
SVG progress-ring back-to-top button driven by scroll percentage
- Де знайти
- index.html:46-50, assets/scss/components/_backtotop.scss
- Чому цікаво
- Uses a single SVG circle path whose stroke-dashoffset is animated against window scroll, giving a tactile read-out instead of a static arrow.
- Коли використовувати
- Long product or content pages where users want both a way back to the top and an at-a-glance scroll indicator.
- Техніка
- jQuery scroll handler, CSS stroke-dasharray on inline SVG path
Live countdown timer embedded inside a promo banner
- Де знайти
- index.html:2651-2658, assets/js/main.js:959-995
- Чому цікаво
- Self-contained vanilla-JS countdown with no library, computes days/hours/minutes/seconds against a target date and renders into spans inside the ad card.
- Коли використовувати
- Limited-time promotions, flash sales, product launches that benefit from urgency on the home page.
- Техніка
- Plain JS setInterval + Date arithmetic
Photo with floating product hotspots
- Де знайти
- index.html:996-1196, assets/scss/layout/_furniture.scss
- Чому цікаво
- An interior photograph is overlaid with three star-rated price badges anchored to dot markers on the furniture itself, mimicking a Pinterest shoppable image.
- Коли використовувати
- Lifestyle e-commerce hero or category pages where you want to surface multiple SKUs from one editorial photo.
- Техніка
- Absolute-positioned div hotspots over a static image, inline SVG ratings
Three-vertical home variants from one codebase
- Де знайти
- index.html, grocery.html, pharmacy.html
- Чому цікаво
- Furniture, grocery and pharmacy demos share the same JS, header and footer but swap colour theming, imagery and section ordering — a useful blueprint for multi-brand storefronts.
- Коли використовувати
- Agencies or marketplaces that need to spin up vertical-specific stores quickly without diverging the codebase.
- Техніка
- Shared SCSS tokens with vertical-specific theme files (grocery.css, pharmecy.css), data-bg-color attributes
Tabbed product grid driven by Bootstrap nav-tabs and Swiper
- Де знайти
- index.html:1209-1216, assets/js/main.js
- Чому цікаво
- Combines Bootstrap's tab API with Swiper instances per tab so each filter pane keeps its own slider state — a non-trivial pattern when you need both filtering and horizontal navigation.
- Коли використовувати
- Catalogue homes that need lightweight client-side filtering plus carousel browsing without a full SPA.
- Техніка
- bootstrap.bundle.min.js, swiper.min.js
Компоненти
Three-slide Swiper hero pairing oversize headline with a chair render and a circle backdrop on a cream-paper field.
Four-column row of icon plus title and one-liner sub-copy for shipping, returns, support and trust signals.
Two side-by-side full-bleed promo cards with discount badge, two-line capitalised heading and a solid CTA arrow button.
Top-sale product carousel with hover action icons (cart, quick view, wishlist) and external prev/next buttons.
Half-bronze, half-photo banner with a hotspot overlay calling out featured products and prices on top of an interior shot.
Bootstrap-tabs filter (All / New / Top / Trendy) above a Swiper-driven product grid for the month's trendy items.
Two-card promotional row, second card embeds a four-segment days/hours/minutes/seconds countdown timer.
Image-backed Swiper of star-rated client cards with quote-mark glyph and external left/right navigation buttons.
Three-by-two grid of horizontal best-seller cards mixing product photo, title, price and star rating.
Two oversized blog cards aligning meta-tagged copy on one side with a wide photograph on the other.
Three coloured support cards covering newsletter signup, community join and mobile-app store badges.
Five-up muted greyscale brand-logo strip closing the page above the footer.
Two-row sticky header with utility bar (lang, currency, settings) and a primary nav with mega-dropdowns plus search and wishlist/cart action icons.
Dark grid-3 footer with logo column, link columns and a contact column on a near-black background.
Fixed circular SVG progress ring in the bottom-right that fills as the page scrolls and acts as a back-to-top button.