Page and style design using AI


Page and style design using 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:

  1. Open a product page on your site.
  2. Right-click on a tab name or text.
  3. Select "Inspect".
  4. 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:

  1. Copy everything between the <style> tags (do NOT copy the tags themselves).
  2. Go to Hotlist Admin > Site Design > Design Editor > CSS tab.
  3. 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.




Forms
▶️ How to Import Products to Hotlist.biz — Video Instruction: From Field Setup to Automation
Page Management