Create a Theme

FriSay store themes live under templates/ in the project root. The built-in reference theme is templates/default/.

Quick Start

Copy the templates/default folder.
Paste it in the same templates/ directory.
Rename the copy to your theme name, e.g. fashion.
Edit file contents only — do not rename files or folders.
Activate the theme from Admin → Themes.

Example:
templates/default/ → copy → templates/fashion/

Important rules:

Keep all file and folder names exactly as in default.
Only change the content inside .tpl, .css, and .js files.
Your theme must contain header.tpl or it will not appear in the theme list.
Use lowercase theme names with letters, numbers, hyphens, or underscores (e.g. fashion, my-shop).

Theme Folder Structure

templates/fashion/
  header.tpl              ← Main layout header (required)
  footer.tpl              ← Main layout footer
  home.tpl                ← Home page
  product.tpl             ← Product detail page
  productList.tpl         ← Product list partial
  productGrid.tpl         ← Product grid partial
  catalog.tpl             ← Category / catalog page
  category.tpl
  brand.tpl
  cart.tpl
  checkout.tpl
  checkout-success.tpl
  search.tpl
  login.tpl
  register.tpl
  hesabim.tpl
  favoriler.tpl
  siparis.tpl
  siparislerim.tpl
  sifremi-unuttum.tpl
  sifre-sifirla.tpl
  contact.tpl
  cms.tpl
  special.tpl
  truck.tpl
  404.tpl
  css/
    bootstrap.min.css     ← Do not rename
    app.css               ← Global styles — edit freely
    colors.css            ← Theme color variables (also editable in Admin)
    home.css
    product.css
    cart.css
    checkout.css
    auth.css
  js/
    jquery-3.2.1.min.js   ← Do not rename
    bootstrap.min.js
    popper.min.js
    app.js                ← Global scripts — edit freely
    home.js
    product.js
    account.js
  img/                    ← Theme images (favicon, placeholders, etc.)
  plugin/                 ← Reusable partial templates
    cart.tpl
    pagination.tpl
    headerTools.tpl
    catalogToolbar.tpl
    slide.tpl
    schema-jsonld.tpl
    left.tpl
  cms/                    ← CMS page layouts
    hakkimizda.tpl
    gizlilik.tpl
    iade-degisim.tpl
    mesafeli-satis.tpl
    odeme-kargo.tpl

What to Edit

File type	Purpose	Can rename?
`.tpl`	HTML structure and Smarty markup — controls page layout and design	No
`css/*.css`	Colors, spacing, typography, responsive layout	No
`js/*.js`	Front-end interactions (cart, product, account, etc.)	No
`css/colors.css`	CSS variables (`--brand-primary`, etc.) — quick brand colors without touching every rule	No
`img/`	Replace images; keep filenames if referenced in templates	Prefer keep names

Key Template Files

File	Description
`header.tpl`	Document head, CSS/JS includes, navigation, opens page body
`footer.tpl`	Footer links, scripts, closes page — outputs `{$hooks.footer}`
`home.tpl`	Homepage sections, featured products, sliders
`product.tpl`	Product detail page — tabs, gallery, add to cart
`catalog.tpl` / `category.tpl`	Product listing pages
`checkout.tpl`	Checkout flow and payment hooks (`{$hooks.order_payment}`)
`plugin/productList.tpl`	Shared product card list used on multiple pages

Smarty Variables in Templates

Common variables available in store templates:

{$domain} — site base URL
{$css_dir} / {$js_dir} / {$img_dir} — asset paths for active theme
{$siteName}, {$pageTitle}, {$pageDesc}
{$hooks.footer}, {$hooks.header}, etc. — module display hooks
{$moduleAssets.css} / {$moduleAssets.js} — module-injected assets

Activate Your Theme

Go to Admin → Themes.
Select your theme (e.g. fashion) from the dropdown.
Click Save Theme — this updates the THEME setting.
Optionally adjust colors in the same screen (writes to css/colors.css).
Preview without saving: {$domain}?theme_preview=fashion

Development Tips

Start with css/colors.css for brand colors before rewriting large CSS files.
Edit header.tpl and footer.tpl first — they affect every page.
Use {include file='./plugin/cart.tpl'} for partials — keep include paths unchanged.
Per-page CSS: controllers can set $css (e.g. home.css) — loaded automatically in header.tpl.
Clear Smarty cache after major template changes if updates do not appear.

PHP

<?php

// Step 1 — Copy theme folder (command line example)
// cp -r templates/default templates/fashion

// Step 2 — Theme is auto-discovered when header.tpl exists:
// Theme::discover() scans templates/* folders (except admin)

// Step 3 — Activate programmatically (optional):
Theme::setActiveTheme('fashion');

// Step 4 — Per-page CSS in a controller:
$smarty->assign('css', 'home.css');   // loads templates/fashion/css/home.css
$smarty->display('home.tpl');

colors.css (Theme Variables)

{* templates/fashion/css/colors.css — brand colors (editable in Admin → Themes) *}

:root {
    --brand-primary: #1a1a1a;
    --brand-accent: #d6001c;
    --surface: #ffffff;
    --text-primary: #1a1a1a;
    --footer-bg: #0c0c0c;
}

header.tpl — asset includes (do not rename files)

<link rel="stylesheet" href="{$css_dir}bootstrap.min.css" />
<link rel="stylesheet" href="{$css_dir}app.css?v={$minute}" />
<link rel="stylesheet" href="{$css_dir}colors.css?v={$minute}" />
{if $css}
<link rel="stylesheet" href="{$css_dir}{$css}?v={$minute}" />
{/if}
<script src="{$js_dir}jquery-3.2.1.min.js"></script>

home.tpl — example section edit

<section class="section-premium home-category-block">
    <div class="section-head">
        <h2 class="section-title">Best Sellers</h2>
        <p class="section-subtitle">Discover our most popular products</p>
    </div>
    {include file='./productList.tpl' products=$featuredProducts}
</section>

{* Module display hooks *}
{$hooks.home}

app.css — example style override

/* Use CSS variables from colors.css */
.section-title {
    color: var(--brand-primary);
    font-weight: 600;
}

.btn-primary {
    background: var(--brand-accent);
    border-color: var(--brand-accent);
}

.perks-strip .perk {
    border-radius: 12px;
    background: var(--surface-soft);
}