Masterclass: Designing Hotlist.biz with AI

This guide will teach you how to create a professional design for your products using Artificial Intelligence (Gemini, ChatGPT) and the built-in tools of the platform.

1. Theory: Basic Concepts (CSS, Classes, ID)

Before giving a task to AI, you need to understand how a browser interprets design.

CSS (Cascading Style Sheets) The "language of beauty." If HTML is the skeleton, CSS is the clothing, makeup, and hair. It tells the browser: "Make this text red and this button round."

ID (#) — Identifier A unique name for an element. Like a passport number. No two identical IDs can exist on one page. In CSS, marked with a hash.
Example: #tabs-1

Class (.) — Class A group name. Like school uniforms. You can apply one class to dozens of elements. In CSS, marked with a dot.
Example: .my-price-style

How to Find Elements (Browser Inspector)

To let AI know what to style, find the block ID in Hotlist:

Open a product page on your site.
Right-click on a tab name or text.
Select "Inspect".
The panel will open. Look for the line highlighting the block. Example:
<div id="tabs-1">...</div>

Important (Nesting Principle): On Hotlist.biz, it is best to use styles in combination with a "parent" block. This ensures your design applies only to the specific section and won't break other parts of the site.

In the inspector, you will see a hierarchy (element tree): every block is inside another, larger container. For product tabs, the parent is #hotengine-shop-content-tabs.

Therefore, to style the first tab, your CSS path should be: #hotengine-shop-content-tabs #tabs-1.

This tells the browser: "Find the block with ID tabs-1, but only if it's inside hotengine-shop-content-tabs."

STEP 1: Request to AI

Give the text to AI and ask for styling by specifying the ID found.

                "I have a product description. Style it nicely. Separate CSS and HTML. Use a light theme. Output two blocks: CSS inside <style> for #hotengine-shop-content-tabs #tabs-1 and separate HTML for the text."
            

STEP 2: Test and Transfer

Paste both blocks (Style and HTML) into the product to check the result.

Once the design is approved:

Copy everything between the <style> tags (do NOT copy the tags themselves).
Go to Hotlist Admin > Site Design > Design Editor > CSS tab.
Scroll to the bottom and paste your code. Add a comment: /* Product tab text style */

STEP 3: Cleaning Up (Crucial!)

After saving the style in the Design Editor, delete it from the product text. Otherwise, the code will duplicate, slowing down your site.

// BEFORE (In product):
<style> #tabs-1 { background: #000; } </style>
<div class="content"> Your text... </div>

// AFTER (In product):
<div class="content"> Your text... </div>
(Style now lives in the Design Editor)

This allows you to update all product pages at once simply by editing the CSS in the Design Editor.

Cheat Sheet: Hotlist.biz Selectors

All content is created inside #hotengine-content. Use these for AI prompts:

Product Tabs

Parent + ID path:
• Tab 1: #hotengine-shop-content-tabs #tabs-1
• Tab 2: #hotengine-shop-content-tabs #tabs-2

Full Product Description

.hotengine-shop-product-desc-block .hotengine-shop-product-description-text

Blog & Articles

• List description: #hotengine-content-blog #page_content .hotengine-blog-page-list-block .contenth .contenth_i
• Full article: #hotengine-content-blog #page_content .contenth .contenth_i

Pro Tip: Use this method to style specs, shipping info, or video tabs. One central CSS file lets you manage thousands of products effortlessly.

Store categories
Connecting the Wayforpay.com payment system on Hotlist.biz
Delivery