Theme Style

Theme Style is the central place for defining the global design system of your PrestaShop store. It brings together reusable colors and fonts, default styles for common elements, and site-wide appearance settings in one place.

Instead of styling the same elements separately on every page, you can establish a consistent visual foundation and let your Creative Elements content use those global values and defaults. This makes new pages faster to build and future design changes much easier to manage.

Theme Style
Tip: Configure Theme Style before styling individual pages whenever possible. A well-defined global design system reduces repetitive work and makes the entire store easier to maintain.

How Theme Style is organized

Theme Style is organized into three groups. Together, they cover reusable design values, default element styles, and broader site settings.

Global Settings
Create reusable design values that can be selected throughout Creative Elements.
  • Global Colors: Build a reusable color palette for your store.
  • Global Fonts: Create reusable typography styles that can be assigned throughout the site.
Style Elements
Define the default appearance of common content and interface elements.
  • Typography: Style body text, links, headings, display text, page titles, and breadcrumbs.
  • Buttons: Style Creative Elements buttons and supported buttons from the active PrestaShop theme.
  • Images: Configure borders, border radius, opacity, shadows, CSS filters, and hover styles.
  • Icons: Define icon colors, size, padding, border width, and border radius.
  • Form Fields: Style labels and fields, including normal, focus, and autofill states.
Settings
Configure broader site-wide appearance and behavior.
  • Background: Set backgrounds for the page body, wrapper, and content area.
  • Layout: Configure content width, container spacing, page selectors, and responsive breakpoints.
  • Lightbox: Configure the appearance and controls of the image lightbox.
  • Custom CSS: Add CSS for custom styling that is not covered by the visual controls.

Global Settings and Style Elements

Global Colors and Global Fonts are reusable design values. They do not decide by themselves which part of the website should use a particular color or typography style. Instead, you create the values once and then assign them wherever they are needed.

Style Elements define the default appearance of specific types of content. This is where you can decide how body text, headings, buttons, images, icons, and form fields should look across the site.

For example, you can create a Global Color called Brand Primary and use it for links, button backgrounds, headings, or individual widgets. If the brand color changes later, updating the Global Color can update the places that use that global value without requiring you to find and edit each color separately.

Good to know: Global Settings provide reusable design values, while Style Elements define how specific types of elements should look. Using them together creates a flexible design system that is much easier to maintain.

Why use Theme Style?

Keep your store consistent

Theme Style gives your store a shared visual foundation. Colors, typography, buttons, form fields, images, and other common elements can follow the same design rules instead of being styled independently on every page.

This is especially useful as a store grows. New pages and sections can follow the existing design system without recreating the same styling decisions each time.

Make site-wide changes faster

Global styling makes redesigns and brand updates much easier. When an element uses a Global Color or Global Font, changing that global value can update its appearance wherever the value is used.

Default styles can also be managed centrally through the Style Elements, reducing the number of individual widgets that need to be edited when the site's visual direction changes.

Tip: Use Global Colors and Global Fonts instead of repeatedly entering the same values manually. This is one of the simplest ways to make a Creative Elements website easier to maintain.

Reduce repetitive styling

Theme Style provides defaults for many commonly used elements. Once those defaults are configured, you can build pages without manually setting the same typography, colors, borders, or other styles again and again.

Individual styling is still available whenever a particular element needs to look different. Theme Style provides the foundation; local controls let you create exceptions where necessary.

Connect Creative Elements with your PrestaShop theme

Theme Style is not limited to content created directly with Creative Elements. Some settings also target supported elements from the active PrestaShop theme.

For example, Buttons includes separate controls for Creative Elements buttons and common PrestaShop theme button classes. Background and Layout can also work with page wrappers and containers used by the theme. This helps the Creative Elements design system blend naturally with the rest of the store.

Global styles and individual styles

Theme Style establishes defaults, but you can still customize individual widgets, containers, or pages. A local style can override a global default when a specific element needs a different appearance.

For example, your Theme Style may define the standard appearance of buttons across the store, while a particular promotional section uses a different button color. You can style that button individually without changing the global button design.

Important: If an element does not follow the expected Theme Style, check whether it already has an individual style or whether the active theme or custom CSS is overriding the global rule.

Creating and editing Theme Style

When Creative Elements is installed, a default Theme Style is automatically created. Theme Style templates can be managed from the Theme Builder.

Open Theme Style from the Theme Builder

  1. From your PrestaShop admin, go to Creative Elements > Theme Builder.
  2. Open the Theme Style tab.
  3. Edit an existing Theme Style, or click Add new to create one.
  4. Enter a title to identify it in the back office.
  5. Click Edit with Creative Elements.
  6. Configure the Global Settings, Style Elements, and Settings you want to use.
  7. Save your changes.
Theme Style templates in Theme Builder
Theme Style templates in Theme Builder

Open Theme Style from the editor

  1. While editing with Creative Elements, click the hamburger menu in the upper-left corner.
  2. Open Theme Style.

This is useful when you notice a global design setting that needs adjustment while you are already working on a page.

Recommended workflow for a new store

Setting up the design system before building individual pages can save a considerable amount of work later. A practical order is:

  1. Create the Global Colors used by your brand and interface.
  2. Create the Global Fonts you want to reuse throughout the store.
  3. Configure Typography for body text, links, headings, page titles, and breadcrumbs.
  4. Define the default appearance of Buttons, Images, Icons, and Form Fields.
  5. Configure the site-wide Background and Layout.
  6. Adjust Lightbox settings if your store uses images that open in a lightbox.
  7. Use Custom CSS only for requirements that are not covered by the available visual controls.
  8. Build your pages using the global values and default styles wherever possible.
Tip: Think of Theme Style as the foundation of the website rather than the final layer of styling. Establishing the foundation first makes individual page design much faster.

Using Theme Style on an existing store

You can also introduce Theme Style gradually on an existing website. There is no need to replace all existing styling at once.

  1. Create Global Colors and Global Fonts that match the current design.
  2. Configure one Style Element at a time, such as Typography or Buttons.
  3. Check the affected pages on the front office.
  4. Where the global style already produces the correct result, remove unnecessary individual overrides.
  5. Continue with the remaining Style Elements and site Settings.

This gradual approach makes it easier to move an older site toward a more consistent design system without redesigning everything at the same time.

Theme Style and Custom CSS

Custom CSS is available as the final layer for requirements that cannot be achieved with the standard controls. Whenever possible, use Global Settings and the visual Theme Style controls first, then add CSS only for genuine exceptions.

This keeps the design easier to understand and maintain. It also means that more of the website remains editable through the Creative Elements interface instead of depending on manually written CSS.

Theme Style articles

Each area of Theme Style has its own documentation article with a detailed explanation of its controls and practical usage:

Global Colors Global Colors lets you create reusable colors and use them throughout your website. Instead of entering the same color value repeatedly, you can save it once as a Global Color and select it wherever a... Read more
Global Fonts Global Fonts lets you create reusable typography styles and apply them throughout your website. Instead of configuring the same font settings repeatedly, you can save a typography style once and selec... Read more
Typography Typography defines the default text styles used throughout your store. It lets you create a consistent typographic hierarchy for body text, links, headings, display text, page titles, and breadcrumbs ... Read more
Buttons Buttons lets you define the default appearance of both Creative Elements buttons and buttons provided by your PrestaShop theme. This helps keep calls to action consistent across pages, widgets, and na... Read more
Images Images lets you define the default appearance of images across your store. Create consistent borders, corner rounding, opacity, shadows, and CSS filter effects, with separate settings for the Normal a... Read more
Icons Icons lets you define the default appearance of Creative Elements icons across your store. You can control their Normal and Hover colors, size, spacing, border width, and corner radius from one centra... Read more
Form Fields Form Fields lets you define the default appearance of form labels and input fields across your store. You can create consistent typography, colors, borders, shadows, focus feedback, autofill styling, ... Read more
Background Background lets you define the site-wide background of the Body, Wrapper, and Content areas. Each area can use either a solid or image-based Classic background, or a Gradient. These settings are us... Read more
Layout Layout controls the site-wide content width, container spacing, widget gaps, page selectors, stretched sections, and responsive breakpoints used by Creative Elements. These settings provide the str... Read more
Lightbox Lightbox controls the default behavior and appearance of image lightboxes across Creative Elements. You can enable or disable the lightbox, choose which controls are available, define the title and de... Read more
Custom CSS Custom CSS lets you add your own CSS rules directly from Theme Style. Use it for design adjustments that are not available through the standard Creative Elements controls. Important: Custom C... Read more
© WebshopWorks - Professional PrestaShop Addons