Full customization of website and online store design: a unique design made by yourself

Site structure: wrapper, grid and blocks

The main idea of BooStore — a site is a ready-made structure, not a rigid template. The structure consists of several main wrapper blocks, and all other blocks and functions are inserted inside. Understanding this scheme is the first step to full customization.

The columns are built with CSS Grid and controlled by the data-hasside attribute. No tables — block layout only:

Inside #hotengine-content the content is output in a block that depends on the page type. Each type has its own ID, which is convenient for applying separate styles:

• Pages — #hotengine-content-page
• Article catalog — #hotengine-content-blog
• Product catalog — #hotengine-content-shop
• Producer/collection catalog — #hotengine-content-shop

On category pages with a child list a class is added: .hotengine-content-shop-category, .hotengine-content-shop-collection, .hotengine-content-shop-producer, .hotengine-content-blog-category. This is the very service wrapper that lets you style a separate section, category or page type independently of the rest.

🧱 Site header: a block/menu with HTML code

The most illustrative example of how everything works is the site header. Technically it is an ordinary Block/Menu with the Header position (in the header), which contains HTML code. No magic: you open the block, see the header code, edit it like ordinary HTML, and set the look via CSS.

The header of the Universal MobiFive Flex template is split into three sections (header_section1, header_section2, header_section3), each with its own markup. Here is the header code (an example from the demo template):

What is what

Let’s go through it section by section. Each section is a header row, and inside it the h_inside block is divided into three parts: h_inside_l (left), h_inside_c (center), h_inside_r (right). This very division provides responsiveness.

Note: the cart, comparison, favorites, language and main menu are not “drawn” buttons but shortcodes ({HOTENGINE-SC:...}). The system substitutes ready functionality into them. So you don’t need to program the cart — just put the shortcode in the right place in the markup.

Header: 3 rows of 3 responsive blocks

Schematically the header looks like this. Each row is a section, each rectangle is a block h_inside_l/c/r. On narrow screens the blocks in a row wrap one under another (flex-wrap), so the header stays convenient on mobile:

How to change the header design

There are two ways — both without editing the platform core:

1. Via CSS (fast). Open the site, press F12 and find the needed element with the inspector — for example .header_section2 or .h_inside_r. Copy the class into Design editor → “CSS styles” tab and set your properties: background, paddings, sizes, block order.
2. Via HTML editing (flexible). Open the header Block/Menu and change the code itself: swap h_inside_l and h_inside_r, remove an extra section, add your own markup or icon. All classes are preserved — the layout won’t break.

📦 Template as a base and its demo

The fastest path to a unique design is to start from a ready-made template and refine it. Let’s take the universal template Universal MobiFive Flex (templates_universal_mobifive_flex) as an example. It is recommended as a base precisely because it shows all the main header layout types and adapts easily to any style.

On installation the template automatically:

1. Creates a CSS style that includes the styling file via @import:

2. Creates menu blocks: header (header), footer (footer), home slider, product sorting.
3. Enables the needed functions: favorites, comparison, search with autocomplete, cart in the header.

🎨 Design editor and base styles

All visual configuration is gathered in the Design editor. It consists of tabs — from colors and the header to pure CSS:

Which base styles load and how to replace them

The platform first includes base (system) styles, and then the template style is layered on top of them. The order is:

1. css_hotengine_require_system.css — the main base style of the platform: pages, products, blocks and menus. This is what all your styles and the template style are “hung” on.
2. css_hotengine_require_language_XX.css — text value styles for each language (ru, ua, en, pl, etc.).
3. css_hotengine_cart_table_mobile.css — the cart table for mobile.
4. templates/styles/css_hotengine_reset_base_style.css — reset of the main styling of windows and menu blocks (enabled in the “Content” tab).
5. Product card styles — templates_base_styles/products/products_list1…4.css. Another ready-made product card style for the list is chosen in the “Style catalog”, and you can also style the card entirely your own way (see below).
6. Form styles — templates_base_styles/forms/form1…25.css (25 variants).
7. Template style — what is added when the template is installed (via @import of the style.css file).

All of this is collected into one cached CSS file. You can change any of these styles in two ways:

Product card and list settings

Besides choosing a ready-made style, the product card can be configured via Store settings (Admin panel → Settings → Store, page set_p_store). There you set the position of the main blocks and the card behavior — this is already full unique customization without code:

📁 My files: your own logo, background and any style elements

Full customization is not only code but also your own files. For this there is a section “My files” (Admin panel → My files): here you can add, view and delete files as well as create folders. Upload your own images (logo, background, icons, block images) and connect them in CSS or HTML. Opens here: My files.

What you can upload and insert

• Your own logo and site icon (favicon) — instead of the standard ones.
• Your own background for the header, footer or the whole page.
• Images for blocks, banners and the slider.
• Your own icons (including SVG) for menus and buttons.
• Your own CSS and JS files (connected via “Blocks/Menus”).

Image processing on upload

Files are stored in upload/catalog/{site_ID}/files/. After upload, copy the path (click the file) and use it in CSS or in the src attribute:

🗂️ Blocks/Menus: positions, menus, custom scripts

“Blocks/Menus” is the main customization tool (the header and footer are also such blocks). Any content and navigation areas are created here. For each block the following are available:

Main menu

The main menu can be assembled in two ways:

• Via the main menu widget — the fastest way. You add items, subitems, catalog category items and producer items, set icons (PNG, JPG, WEBP, SVG), order (drag&drop), language binding. The menu is exported and imported as JSON.
• Your own menu manually — if special logic or layout is needed, the block is assembled as an ordinary HTML block.

Via the widget you immediately get a dropdown menu with categories — the most convenient option for a catalog. In the design editor you choose the category list appearance: standard, popup window, list with columns or full script disable.

Your own scripts with optimized loading

If you enable the “JavaScript / CSS style” mode for a block, the engine saves your code to a separate file and connects it with the right load mode:

This way you add any of your own scripts without slowing the load. For a CSS style the block is saved to a .css file and connected as a style. This is exactly “your own menu blocks with scripts” — full control without editing the platform core.

🖼️ Page styling and product grid by ID

Blocks/Menus provide the general framework, but BooStore lets you go further and style each page individually. The secret is that the root block #hotengine-wrapper receives dynamic classes with the ID of the current page or category. This means you can write CSS that applies only to one page, only to one category, or to all pages of a certain type at once.

Examples: style one specific page by its ID, set your own background for a specific store category, or change the look of all products at once.

Product grid: how the list is rendered

The product list has its own nested structure. Understanding it makes it easy to change the number of cards per row, paddings and tile appearance. Simplified, it looks like this:

The cards are blocks .hotengine-shop-product-list-block (by default inline-block), and the container .hotengine-shop-products-list-content lines them up in a row. By changing the card width and wrapping you define the grid for your design:

The product card, its price, the “Buy” button and icons are configured the same way — they all have permanent classes that do not change with platform updates.

🧰 Widgets and shortcodes

Besides blocks, BooStore has widgets — ready functional elements that are more convenient to keep in one place and edit via their editor. These include: popups, mobile menu, sliders, footer, contacts widget, Slide Menu, generators of category/product/producer/article menus.

Shortcodes — data auto-replacement

A shortcode is a short code that the system replaces with real page data. They can be inserted into any HTML block (like in the header), a page, an email. The main ones:

In addition, bbcode works: [FORM:12] inserts a form by ID, and [MENU:...] — a generated menu or selection.

Products widget: any selection anywhere

The products widget deserves a separate mention. The generator builds code like [MENU:shop_products_slider:...] that outputs a selection of products: slider, grid, mosaic, scroll with auto-load. Dozens of parameters are available:

• What to show: category and subcategories, producer, collection, product type, availability, bestsellers, discounts, promotions, new arrivals, “reduced price”, recently viewed, favorites, search, specific IDs, price range, output language.
• Sorting: by ID, date, price, name, priority; ascending/descending; random.
• Display: “add to cart” button, comparison, description, star rating, favorites icon, variants (size/color), lazy loading.
• Scroll modes: :scroll (auto-load), :carousel (carousel), :swipe (swipe), :append (“Show more”), :mosaic-sides (mosaic), :auto_width.

Examples of all variants with live demos — on the “Products widget” page.

HTML widgets: ready interactive blocks

In the HTML widgets section there are ready blocks with code that you just copy into a block or a page:

📱 Mobile menu “like an app”

The mobile menu is a separate widget that deserves attention. It works like a full-fledged app: it slides out to full screen, with icons, categories and a filter. All parameters are configured in its editor, and there are a great many of them — the look can be tailored to any brand.

What you can configure:

• Activation: the screen width threshold at which the menu turns on; always show; replace the main button or output as a separate panel.
• Top icon block: search, language, favorites, comparison, cart, phone, contacts, e-mail, callback, up to 5 custom icons. Each has its own form and popup size.
• Colors: menu and active item background, link and icon color, button and its hover, borders, filter background, dimming mask, authorization — dozens of color parameters.
• Menu items: your own links and subitems, plus special ones: close (close), an empty value (separator), #filter (filter window), #form-XX (form by ID), #ajax_page (loading HTML content).
• Search filter right in the menu: you choose the filter block — and it opens on click.
• Hiding template elements: logo, header, cart, comparison, top row — to keep the interface clean.

🤖 Your unique style with AI and the inspector

Even if you don’t write CSS by hand, a unique design can be obtained with AI. The scheme is simple and works in practice:

🧩 Library of ready-made blocks to insert on a page

If you don’t want to lay out from scratch, there is a library of ready-made blocks — templates_visual_blocks.html. These are dozens of responsive sections that you can insert right onto a page or into a Block/Menu and use immediately.

Each block has the buttons “Show example”, “Show code” and “Open in a new window” — you can copy the entire code. The blocks are responsive, and the color is controlled by CSS variables: just change one variable to recolor the block for your brand. Here is a ready-made “Advantages” block (4 cards with icons) in a dark theme — exactly as you insert it onto a page:

And this is how the same block looks on the page — it is real HTML inserted right into the article:

Fast delivery We deliver across the country in 1-3 days by courier

Official warranty All products are certified and have an official warranty

Discounts and promotions Ongoing promotions, seasonal sales and personal promo codes

Easy returns Return within 30 days with no extra questions

This code is inserted right onto a page (in the HTML editor) or into a Block/Menu. The look is set by the style.css file connected via @import, and the colors — by the variables --ve-8-accent and --ve-8-accent-soft: changed the values — the block recolored for your brand. The class hotengine-ve-darkmode switches the block to a dark theme. The icons are ordinary SVG from the platform set, and can be replaced with your own.

Workflow: chose a block → “Show code” → copied → inserted onto the needed page or into a Block/Menu → changed colors, text and icons. Ready-made blocks + icons are the fastest way to assemble a beautiful unique design, even without being a designer.

🧰 Service menu blocks: filter, products, forms

Besides the blocks you create yourself, the platform has service (functional) blocks — ready modules that are also inserted as a Block/Menu or via a shortcode and fully lend themselves to styling. The main ones:

Example: search filter + products

The classic pairing for a category — on the left a search filter, in the center a product list. Both elements are service blocks and both are styled via CSS. It is best to create the filter via functional menu blocks (Blocks/Menus → Functional menu → Search filter): then it automatically binds to the right category and product type, and the display is configured by pages. But if needed the filter can be inserted on any page too — via a shortcode or a separate block.

And the product selection is output by a widget (product list generator):

The product list loads via AJAX (/ajax_get_list_shop.php), so the filter and selections work fast and without reloading the page. All of these are ordinary blocks that can be placed in any position and recolored for your style.

⚡ Speed: customization without losing PageSpeed

Customization must not mean a slow site. BooStore is designed to squeeze the most out of speed metrics even with a fully unique design:

Details about the mobile version, responsiveness and optimization — in the article “Responsive layout and mobile menu for an online store”. It also shows how dynamic script loading and proper image handling give PageSpeed 99–100.

⚠️ Common mistakes in customization

Useful links

• Template catalog and how to connect a template
• Library of ready-made blocks and styles
• The platform’s main base CSS (css_hotengine_require_system.css)
• Knowledge base: main site blocks and the design editor
• ShortCode reference
• Instruction: Blocks/Menus
• Instruction: creating a mobile menu
• Products widget: examples and code

🛠️ Real example: your own stylish responsive header

To show how simple it is, let’s build a real header from scratch: three levels (top row, main row with search and icons, menu), a modern look and full responsiveness. Below is it live, then the CSS that does it, and the HTML code to insert into a Block/Menu. The example uses only two shortcodes — favorites and cart — so the icons work for real.

How it looks live

The CSS that does it

The whole style is pure CSS. It sets colors, paddings, radii, the search and responsiveness. Copy it into the Design editor → CSS styles:

Header HTML — code to insert

Insert this code into a Block/Menu with the Header position. The favorites and cart icons will work, as in the live example above.