Basic Shop Theme feature overview

The Basic Shop Theme feature lets Business Admins configure the visual branding of a Spryker shop directly from the Back Office. Logos, theme colors, and custom CSS for the Storefront, Back Office, and Merchant Portal can all be set without code changes or redeployment.

Business problems it solves

Basic visual customization of a Spryker shop — such as applying a company logo or brand color — traditionally requires developer involvement, project-specific work, or code changes. This creates friction in critical moments:

• Demo preparation by Solution Engineers — demos feel less customer-ready without brand-specific visuals.
• Early project phases and proofs of concept — customers cannot easily apply their own branding.
• First weeks after go-live — unnecessary delivery work delays Time-to-First-Transaction.

The Basic Shop Theme feature removes this dependency by providing a self-service branding interface in the Back Office.

What you can configure

All theme settings are managed under Back Office > Configuration > Theme.

Storefront

Back Office

Merchant Portal

How it works

The Basic Shop Theme feature is built on top of the Back Office Configuration Framework. All settings are declared in a YAML schema file bundled with the Spryker core modules. The Configuration module reads this file and renders the corresponding UI in the Back Office.

Storefront theming flow

1. A Business Admin sets a theme color or logo in the Back Office.
2. The value is saved and published to key-value storage (Redis) via the Publish & Synchronize mechanism.
3. The configurationValue() Twig function reads the value from storage and injects it into the page-blank layout as a CSS custom property or logo image tag.

Back Office and Merchant Portal theming flow

1. A Business Admin sets a theme color or logo in the Back Office.
2. The value is saved in the database.
3. The configurationValue() Twig function reads the value from the database and injects it into the respective layout template as a CSS custom property or logo image tag.

CSS custom properties

Theme colors are injected as CSS custom properties so that the design system can use them throughout component styles:

Logo upload fields

Logo settings use a file upload widget in the Back Office. Uploaded files are stored via a configured Flysystem media filesystem service and served from a public URL. Each application context uses its own filesystem service:

In production, these services write to an S3 bucket (or compatible object storage). In development and CI environments, files are stored locally at public/Yves/assets/static/images and served via the Yves assets path.

If the field is left empty, the default logo is displayed.

Store-level customization

All theme settings support both global and store scopes. You can apply the same branding across all stores (global scope) or override individual settings per store (store scope).

Example:

To switch scope, use the scope selector at the top of the Configuration Management page.

Security

• Twig access — the configurationValue() and configurationValues() Twig functions are available in templates, but theme layout templates only read the specific compound keys they are designed for.
• Color injection — color values are escaped with | e('css') to prevent CSS injection.
• Custom CSS sanitization — custom CSS input is sanitized using symfony/html-sanitizer before being saved, reducing the risk of injecting malicious markup. The rendered output still uses | raw since CSS must be injected verbatim, so this setting should only be accessible to trusted administrators.
• File uploads — uploaded logo files are stored in isolated filesystem services per context. File types are validated on upload.
• All theme settings are protected by Back Office authentication and ACL.

Related features