docs
  1. Storefront Application
  2. Getting Started
  3. Basic Theming

Basic Theming

Overview

The Storefront Application is designed to be highly customizable, allowing you to tailor its appearance to match your brand's identity. By leveraging Vue3 and TailwindCSS, you can efficiently modify the styling and theming of your e-commerce shop. This guide walks you through the fundamental theming aspects of the Storefront Application, including branding updates, color adjustments, and responsive design.

Styling with TailwindCSS

The Storefront Application utilizes TailwindCSS, a utility-first CSS framework that provides a flexible and scalable way to style your application. TailwindCSS offers predefined design tokens, including colors, spacing, typography, and more, enabling a consistent design language across your storefront.

Learn more about TailwindCSS in their official documentation.

Tailwind Config Viewer

To simplify the customization process, the Storefront Application includes the Tailwind Config Viewer, a UI tool that visualizes the TailwindCSS configuration. It is available in local development mode and can be accessed at: localhost:3000/_tailwind/.

This tool allows you to inspect the active Tailwind configuration, making it easier to adjust theme settings.

Responsive Design

The Storefront Application follows a mobile-first design approach, ensuring optimal usability across devices. TailwindCSS enables responsive styling through breakpoint-specific utility classes.

The default breakpoints used in the application are defined in config/breakpoints.ts:

To apply responsive styles, use Tailwind’s breakpoint prefixes. For example:

  • p-4 applies padding on all screen sizes.
  • md:p-6 applies increased padding on medium screens (md breakpoint and larger).
  • lg:p-8 applies further increased padding on large screens (lg breakpoint and larger).

To further customize responsive behavior, refer to the TailwindCSS Responsive Design documentation.

Branding Customization

The Storefront Application comes with SCAYLE branding by default for showcase purposes, but every design element is fully customizable to match your brand’s identity. You can easily update core branding elements such as the logo, favicon, color scheme, typography, and icons. Additionally, you can refine key UI components like buttons, chips, and dropdowns, as well as more complex elements like sliders and modals.

Prerequisite: Disable Caching for Immediate Updates

For local development, disable caching to see your theming changes instantly. Update your .env file:

The application logo is defined in the AppLogo component, located in:

Replace the existing SVG code inside components/AppLogo.vue with your custom logo:

Using an Image

If your logo is an image file, place it in the public folder and update AppLogo.vue as follows:

Replace {fileName} with the image file name (e.g., /logo.png).

Updating the Favicon

By default, the Storefront includes a SCAYLE-branded favicon.ico in the public folder. To replace it, simply overwrite this file with your brand's favicon.

Adjusting the Color Scheme

The base colors of the Storefront Application are defined in the TailwindCSS configuration file:

Locate the colors object and update the values to match your branding.

  • Primary color: The most frequently used color, applied to text, borders, and some background elements.
  • Secondary color: A more subdued shade, primarily used for less prominent text and UI elements.
  • Accent color: A vibrant highlight color, used sparingly to emphasize important elements (e.g., active wishlist icons, selected filters, or interactive highlights).

We use abstract color names (primary, secondary, and accent) to keep the theme flexible and adaptable to any color palette. This approach allows you to easily swap colors without being tied to a specific spectrum — your accent color could be red, blue, or any hue that fits your brand.

Each color also has a set of lighter and darker shades, which can be customized for better contrast and depth. To generate these shades efficiently, consider using tools like UI Colors to create a cohesive and accessible palette.

Typography

In the Storefront Application, typography is managed through a combination of Tailwind CSS for styling and @nuxt/fonts for font loading. Tailwind's configuration file, tailwind.config.ts, is where you define font families, sizes, and weights. The @nuxt/fonts module then automatically fetches the necessary font files from providers like Google Fonts during the build process and self-hosts all fonts to enhance user privacy and performance by eliminating third-party requests at runtime.

1. How to Add a Custom Font

If the @nuxt/fonts providers, such as Google Fonts, do not offer the font you need, you can provide the files yourself. To do this, place your local font files (e.g., .ttf, .woff, .woff2) anywhere in your project's public/ directory. The @nuxt/fonts module will automatically detect it. The font's family name is derived from its filename. For instance, the Filename Custom.woff2 will create a font family named custom.

By default, the font is assumed to have a weight of 400 and a normal style. To specify different characteristics, you must include them in the filename. For example, a semi-bold version of a font named "Custom" should be named Custom-600.woff2 to be recognized as weight 600.
Refer to the official @nuxt/fonts documentation for a comprehensive list of all naming options.

Additionally, you must declare all the weights for your fonts in the nuxt.config.ts to ensure @nuxt/fonts processes them correctly. It is crucial that this list of weights matches the font weights defined and used in your Tailwind CSS configuration.

2. How to Add a New Font Family

To introduce a new font family, you need to add it to the fontFamily section within the extend object of your tailwind.config.ts file.

After adding it, you can apply this new font family to any element in your application by using the corresponding Tailwind CSS class, such as font-custom

3. How to Change the Default Font

Tailwind CSS applies the sans font family to the <html> element by default. To change the default font for your entire project, you simply need to update the sans key in the fontFamily configuration within your tailwind.config.ts file.

Font Sizes

To customize font sizes across the Storefront Application, you can modify the fontSize configuration in TailwindCSS, which includes adjustments for font size, line height, and letter spacing.

Similar to colors, we use abstract size names such as S, M, and L instead of fixed pixel values. This ensures a consistent typography scale and makes global adjustments easier. By updating these values, you can seamlessly apply your brand's typography preferences across the entire application.

For more details on configuring font sizes, refer to the TailwindCSS documentation.

Customize Icons

The Storefront Application includes a set of SVG icons stored in the assets/icons folder. Icons are integrated using the nuxt-svgo module, making them available as Vue components with the Icon prefix. For example, an icon file named basket.svg will be accessible in the project as the IconBasket component.

To adjust the icons, you can simply replace the content of the existing ones and also easily add more depending on your needs.

Only SVG icons are currently supported.

Further Education – SCAYLE Academy

Previous
Set up your Storefront
Next up
Technical Foundation