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.

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:

typescript

Copy

export default {
  xs: 320,
  sm: 640,
  md: 768,
  lg: 1024,
  xl: 1280,
  '2xl': 1440,
}

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

Copy

<div class="p-4 md:p-6 lg:p-8">
  Responsive padding example
</div>

• 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:

Copy

PAGE_CACHE_DISABLED=TRUE

Updating the Logo

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

Copy

components/AppLogo.vue

Using an SVG Logo

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

svg

Copy

<svg
      v-bind="{ height, width }"
      xmlns="http://www.w3.org/2000/svg"
       <!-- Add your SVG logo here -->
</svg>

Using an Image

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

markup

Copy

<template>
  <SFLink :to="routeList.home" raw>
    <NuxtImg src="/{fileName}" />
  </SFLink>
</template>

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:

Copy

tailwind.config.ts

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

css

Copy

    extend: {
      colors: {
        primary: {
          DEFAULT: '#171717',
        },
        secondary: {
          DEFAULT: '#666666',
        },
        accent: {
          DEFAULT: '#ff7df4',
        }
      }
    }

• 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

The Storefront Application defines its typography settings in the Tailwind configuration file. To modify font families, sizes, or weights, update the extend section of tailwind.config.ts:

typescript

Copy

    fontFamily: {
      sans: ['Inter', 'sans-serif'],
    },

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.

Further Education - SCAYLE Academy

Course

Storefront crash course

What you need to know about Vue

• Frontend
• Tech

Robert K. Pauls

Lead Frontend Developer

Storefront

Storefront Crash Course

• Intermediate
• 5 lessons
• 1h 55m

Play tutorial