Customize styles

Hatstore is a child of the Base theme. Its own files live in platform/themes/hatstore/; anything it doesn't have (layouts, most views, widgets, routes, translations, vendor assets) comes from platform/themes/base/.

To change a file Hatstore inherits, copy it from base/ to the same path in hatstore/ and edit the copy.

Folder structure

hatstore/
├── config.php                 'inherit' => 'base'; loads Base's assets + hatstore.css / hatstore.js
├── theme.json
├── functions/
│   ├── functions.php          fonts, "Top bar menu" location, product + listing helpers
│   ├── theme-options.php      color defaults, "New" badge days, Header section
│   ├── shortcodes.php         shared shortcode helpers, loads functions/shortcodes/*.php
│   └── shortcodes/<name>.php  one shortcode per file: registration + admin form
├── partials/
│   ├── site-header, header-actions, site-footer, page-header, menu, icon   (override Base's)
│   ├── product-card, cta-link
│   └── shortcodes/<name>.blade.php                                        one view per shortcode
├── views/ecommerce/           product listings (shop, category, brand, tag, collection, search)
├── assets/sass/               source → public/css/hatstore.css (+ hatstore-rtl.css)
├── assets/js/hatstore.js      source → public/js/hatstore.js
├── sample/homepage-content.html
└── public/                    built CSS/JS

Colors, fonts and spacing

Every component reads the design tokens in assets/sass/base/_tokens.scss:

:root {
    --theme-color-primary: #e0ca97;     /* accent: buttons, hovers, "New" badge, title underline */
    --theme-color-secondary: #000;      /* ink: headings, text links, dark bands */
    --theme-color-ink-soft: #333;       /* button hover, sale badge */
    --theme-container-max-width: 1200px;
    --theme-transition-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

Admins can override primary and secondary in Theme options → Style without touching code.

One component

Change a component's variables or modifiers instead of overriding its rules:

.card-grid--cols-4 { --card-grid-cols: 5; }     /* 5 products per row on listings */
.promo-banner { --promo-banner-size: 3rem; }    /* smaller banner titles */

Naming conventions

What	Convention	Example
Blocks / elements	BEM block__element	.product-card__title
Option modifiers	block--{option}-{value}	.hero--height-wide, .tiles--ratio-portrait
On/off modifiers	block--{state}	.site-header--sticky
JS state	block__element--active / --open / --scrolled	.hero__slide--active
JS hooks	data-* attributes only, never classes	data-hero, data-reveal
Theme tokens	--theme-{category}-{name}	--theme-color-ink
Component variables	--{block}-{name}	--card-grid-cols, --reveal-delay
PHP helpers	hatstore_{group}_{name}(), wrapped in function_exists so you can redefine them	hatstore_product_is_new()

JavaScript hooks

assets/js/hatstore.js only selects elements by data-* attributes:

Hook	Behavior
[data-hero], [data-hero-slide], [data-hero-dot], [data-hero-prev/next]	Hero slider. data-hero-autoplay sets the delay.
[data-slider] + [data-slider-prev/next] inside [data-slider-scope]	Scroll-snap sliders.
[data-menu-toggle]	Opens a submenu in vertical menus.
[data-reveal]	Fades in on scroll. Add style="--reveal-delay: 200ms" to stagger.
[data-shop-sort]	Listing sort menu.
[data-shop-results]	Updates [data-shop-total] and [data-shop-filter-count] after AJAX filtering.

Build

npm run prod
php artisan cms:theme:assets:publish hatstore