Changing site blocks and the design editor. Main site blocks.

☰

← Back

Changing site blocks and the design editor

Main site blocks and ways to change the design

Main site blocks

ID and Classes of the main site blocks.

#hotengine-wrapper

#hotengine-header

GRID *

#hotengine-content-container

.hotengine-wrap-container-side-left	.menu_position_top	.hotengine-wrap-container-side-right
	#hotengine-content .hotengine-wrap-container-side-center «page type»
	.menu_position_buttom

#hotengine-footer

* - The main inner content block is implemented using CSS Grid:

CSS Grid

Code: CSS

/*CONTENT GRID*/

#hotengine-content-container { display: grid;
  grid-template-areas:"container-left container-center container-right";
  grid-template-columns:0% 1fr 0%;
  margin:0 auto; width:100%;
}

#hotengine-content-container[data-hasside="both"]{
  grid-template-areas:"container-left container-center container-right";
  grid-template-columns: auto 1fr auto;
}
#hotengine-content-container[data-hasside="left"]{
  grid-template-areas:"container-left container-center";
  grid-template-columns: auto 1fr;
}
#hotengine-content-container[data-hasside="right"]{
  grid-template-areas:"container-center container-right";
  grid-template-columns: 1fr auto;
}

.hotengine-wrap-container-side-center { grid-area: container-center; vertical-align:top; margin:0 auto; width:100%;}
.hotengine-wrap-container-side-left   { grid-area: container-left; vertical-align:top; margin:0 auto; width:auto; max-width:270px;  }
.hotengine-wrap-container-side-right  { grid-area: container-right; vertical-align:top; margin:0 auto; width:auto; max-width:270px; }

.menu_position_top { display:block;    width:100%;  }
.menu_position_buttom { display:block; width:100%; }

@media (max-width:767px){
#hotengine-content-container[data-hasside="both"]{
  grid-template-areas:"container-center container-left container-right";
  grid-template-columns: 1fr auto auto;
}
#hotengine-content-container[data-hasside="left"]{
  grid-template-areas:"container-center container-left";
  grid-template-columns: 1fr auto ;
}
#hotengine-content-container[data-hasside="right"]{
  grid-template-areas:"container-center container-right";
  grid-template-columns: 1fr auto ;
}
}
/*CONTENT GRID*/

data-hasside - an additional attribute of the #hotengine-content-container element, which indicates the presence of left and right blocks.

[data-hasside="left"] - left block/menu is present
[data-hasside="right"] - right block/menu is present
[data-hasside="both"] - both left and right blocks/menus are present

Inside these blocks will be the content you created, or menus.
Each «page type» is marked with a corresponding block, with a specific ID assigned.
For example:

Pages - #hotengine-content-page
Article catalog - #hotengine-content-blog
Product catalog - #hotengine-content-shop
Product catalog (manufacturers) - #hotengine-content-shop
Product catalog (collections) - #hotengine-content-shop

This block is created inside the #hotengine-content element

Additionally, on category pages where there is a child list of pages, a class is added:

Product catalog - .hotengine-content-shop-category
Product catalog (collections) - .hotengine-content-shop-collection
Product catalog (manufacturers) - .hotengine-content-shop-producer
Article catalog - .hotengine-content-blog-category

For Blocks/Menus of the article list, an additional block is created (can be disabled in settings):
Recent articles menu - #hotengine-content-menu-lastblogpost

How to change the site design

You can change the site design in the Design editor. With it, you can set the main colors of elements, sizes and positions of some elements, change the site header, and more.
Using the mouse pointer, you can change the height of the site header, logo size, position of the main menu and slogan.

How to create your own site header design?

Create a Block/Menu with placement in the Header and place the necessary elements in it. For example, a Div with a phone number, and a Div with information about the company (do not forget to assign them the appropriate class or id for subsequent reference by the given values).
Open the design editor, set the position and design properties for the created elements in CSS styles.
In the same way, you can create any graphic elements on the site and place them in the places you need.
Using built-in elements and short codes for layout.
In addition to creating your own elements, the BooStore.pro platform has a number of predefined classes and IDs that allow you to quickly and conveniently use basic store elements without having to write them from scratch.

Which elements already have built-in classes or IDs:

"Add to cart" button
Shopping cart
"Add to favorites" icon
"Add to comparison" icon
All basic product card elements: price, availability, characteristics, description block, tabs in the product card
Page titles
Product widgets
Mobile menu
Product variant titles
Each page has a unique class or ID, and the parent element id="hotengine-wrapper" contains the identifier of the currently open page.

Most functional elements on the site already have unique identifiers (IDs) or classes that will not be changed during platform updates, and they can be used when creating your own layout or page design.

How to use built-in elements in your own design:
To insert some elements into your own layout or template, you can use short codes.
For example:

Shopping cart icon with its contents
"Add to cart" icon
"Add to favorites" icon
"Product comparison" icon with its contents
Widgets

Using short codes allows you to quickly and correctly integrate standard store elements into your own layout without errors.

CSS recommendations:

Write CSS styles in the platform design editor.
The file is automatically minified, which speeds up the site and improves SEO.
You can create custom styles for any elements, including built-in IDs and classes, as well as for your own blocks, to fully control the appearance of the site.

With built-in classes, IDs and short codes, you can create professional and unique layouts, combining your own blocks with ready-made platform elements. This reduces development time and guarantees correct display of all store functions.

How to reset the design?

To return the default value, open the Design editor and delete the current value for the desired element or click the "Restore default value" button.

CSS styles

You can use CSS to style any elements on the site. To select an element, right-click on the element and "Inspect element". Copy the ID or Class of the object and paste it into the "CSS styles" tab in the design editor.

If you are using a pluggable template, its styles have lower priority than some of the values specified above. Before using a pluggable template, we recommend restoring the default design values first.

Default CSS styles: CSS file Main site blocks
CSS text value styles:

Templating

Currently, we use special markup for elements marked with "hotengine-" classes, an ordered structure for displaying elements, as well as hidden data. Almost all labels on the site are implemented using CSS after elements.
If shifting and positioning of elements cannot be done using CSS, you can use Javascript and move objects on the page.
Changing the position of some elements using Javascript.

Code: html

<script>
document.addEventListener("DOMContentLoaded", () => {
    const el = document.querySelector(`.hotengine-shop-product-desc-block .hotengine-shop-product-producer`);
    const newproducer = el ? el.innerHTML : null;

    if (newproducer && newproducer !== "" && newproducer !== "undefined") {
        el.style.display = "none";
        const skuBox = document.querySelector(`.hotengine-shop-product-sku-box`);
        if (skuBox) {
            skuBox.insertAdjacentHTML("afterend", `${newproducer}`);
        }
    }
});
</script>

In this example, we check if a manufacturer is specified. If a manufacturer is specified, hide it and place it after the "Product code" field.

"Wrapping" elements using Javascript.

Code: html

<script>
  document.addEventListener("DOMContentLoaded", () => {
    document.querySelectorAll(`.element`).forEach(el => {
        const wrapper = document.createElement("div");
        wrapper.className = "new";
        el.parentNode.insertBefore(wrapper, el);
        wrapper.appendChild(el);
    });
});
</script>

As a result, the object with the class element will be "wrapped" in a div with the class new (<div class="new"><span class="element"></span></div>)

Templates

In addition to basic styles in the design editor, you can install ready-made templates.
Template catalog - https://templates.boostore.pro/

Editor

The platform includes the TynyMce HTML editor, through which you can design pages, product cards, articles, and blocks/menus. The editor supports image insertion and ready-made «Codes» for displaying store categories, product lists, article lists, on any pages. Built-in codes allow you to insert, for example, on the main page, a list of specific products with specified parameters (product list generator separate instructions) or a list of categories, including in Blocks/Menus (Widget with store categories).

Editor demonstration

Text formatting on BooStore.pro 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:

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 BooStore.pro, 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: BooStore.pro 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.

← Back

Quick Feature Overview | | Promotion Recommendations | Scripts for Use on Websites