Vertexly Documentation
Thank you for choosing Vertexly — a responsive multi-page HTML, CSS and JavaScript template for 3D asset marketplaces and digital creator platforms.
File organization
Keep the relative folder structure intact when moving the project to a server.
Included layouts
| File | Purpose |
|---|---|
| index.html | Marketplace home with categories, trending assets, collection, creator and seller CTA. |
| marketplace.html | Searchable catalog, category chips, filters, sorting and mobile filter drawer. |
| product.html | Full product detail with gallery, license selector, technical data, tabs and reviews. |
| creator.html | Creator banner, profile data, filtered products, collections and social links. |
| collections.html | Editorial collection browsing and category filtering. |
| sell.html | Creator acquisition page with benefits, workflow, statistics and FAQ. |
Getting started
- Extract the ZIP archive.
- Open index.html in a modern browser.
- For deployment, upload the complete vertexly folder to your web host.
- No build process or package manager is required.
For local development, a lightweight local server is recommended. For example, use the Live Server extension in VS Code.
Customize the template
Colors
Edit the CSS custom properties at the top of assets/css/style.css.
Typography
Vertexly uses Space Grotesk for headings and Inter for interface/body copy. Replace the Google Fonts import and the related font-family values to use another pairing.
Product cards
Duplicate any .product-card element. On the marketplace page, keep its data-* values accurate so filtering and sorting continue to work.
JavaScript components
All interactions are contained in assets/js/script.js and use data attributes instead of page-specific inline scripts.
| Mobile navigation | data-menu-toggle / data-main-nav |
| Search modal | data-search-open / data-search-close |
| Wishlist | data-wishlist |
| Product gallery | data-gallery-main / data-gallery-thumb |
| Marketplace filters | data-filter / data-category-chip |
| Sorting | data-sort and product data values |
| Tabs | data-tab / data-tab-panel |
| Accordion | data-accordion-button |
| Toast feedback | data-toast |
Replacing images
All product imagery is stored locally in assets/img as optimized JPG files. Replace an image with another file of the same name, or update its src attribute in the relevant HTML page.
For the best result, use wide 4:3 renders for product cards, portrait/full-body images for characters and panoramic images for creator banners.
Third-party resources
Font Awesome is loaded through cdnjs. Google Fonts supplies Inter and Space Grotesk. Full URLs are listed in icons.txt and fonts.txt.
The included fictional 3D renders were generated specifically for this template. See credits.txt for details.
Before publishing
Forms and checkout actions are front-end demonstrations. Connect them to your preferred backend, payment provider or marketplace API before production use. Replace fictional product data, creator names, legal links and license text with your own content.
Open template