A Theme is a skin for your Eshop. It encapsulates the visual and functional elements that give the site a distinct look and feel. At account creation, an default theme is created for your store. You may create as many themes as you like, and activate each of them at any time.

The theme title refers to the name or title of a Theme.

Site max width defines the maximum horizontal width that a website's content is allowed to occupy. It sets the boundary beyond which the content will not expand, ensuring that the site maintains a readable and visually appealing layout.

Logo width specifies the dimensions of the logo image on a website, differentiating between the desktop and mobile versions. This ensures that the logo is appropriately sized and displayed for different screen sizes.

The header mobile breakpoint is a specific screen width at which the layout of a website's header is adjusted to accommodate smaller mobile screens. It's the point where the header design transitions from desktop to mobile view.

Global border radius is a CSS property that defines the roundedness of corners for various elements across the Eshop. It sets a consistent curve for borders, contributing to the overall design aesthetic.

Gutter refers to the spacing or margin between content elements such as columns, images, and text. Gutter specifications for mobile, tablet, and desktop versions help maintain proper alignment and readability for different screen sizes.

The site background color is the color that serves as the backdrop for the entire website. It sets the overall color scheme for the site and influences its visual identity.

The top header background color is the color applied to the background of the uppermost section of a website's header. It provides a distinct background for elements like the terms, shipping, or contact information.

Header layout refers to the arrangement and structure of elements within the header section of a website, like the Shop Logo, Basket & Search Icon or menu entries. The header background color is the color applied to this section, setting its visual style.

The footer background color is the color applied to the background of the website's footer section. It defines the visual appearance of the footer area, often distinct from the site's main content.

Content and navbar layouts refer to the arrangement and organization of content on a web page, including the navigation menu (navbar). Different layouts can affect the placement and style of content and navigation elements.

Image carousel animation type specifies the style of transition or animation applied to images within a carousel or slider on a website. It include options like slide or fade. The animation type contributes to the user experience and overall design.

Set color variables for your Eshop Theme.

Create new font styles, or browse fonts through our Font Browser, to define font styles for your Eshop Theme.

Common Ground provide a selection of 100+ open-source licence Fonts.
From Style Editor, at top of main menu, Select 'Browse Fonts' to navigate through the Font Browser. Sort by style (sans, display, serif, mono, grotesk, condensed, rounded, script, extended, geometric) and set font family as favorites.

You own a font licence? Upload your own custom font for your Eshop.
From Style Editor, at top of main menu, Select 'Browse Fonts' to open the Font Browser and select "Upload a Custom Font'. Fill in informations and style variations, and Submit.

You can select Icon style for your Eshop, and change the look and feel for your icons (basket, search, favorite, play, pause, next, prev, close…)

From Style Editor, at top of main menu, Select 'Browse Fonts' to open the Font Browser and select "Upload a Custom Font'. Fill in informations and style variations, and Submit.

Create a new font style from Styles Editor Menu.

Open a Style title to edit a style variation.
Many preferences are available for your style:

Style Title:

The style title is a reference to a specific style.

Selectors:

Selectors are patterns used to select and target HTML elements for styling with CSS. They can be based on element names (e.g., p, h1), class names (e.g., .topHeader), or IDs, allowing you to apply styles to specific elements on a web page.

Read more about CSS Selectors here.

Font Family:

Font family specifies the typeface or font style used for text. It can be set to system fonts, open-source fonts, or custom fonts. Open-source fonts are freely available for use, while custom fonts can be specifically designed or licensed for a website.

When you leave the text field empty, the default value is automatically inherited.

Font Weight:

Font weight determines the thickness or boldness of the characters in a font family. It is typically specified using values such as "normal," "bold," or numeric values like 100, 200, 300, etc.

Text Style:

Text style encompasses various properties that affect the appearance of text, including characteristics like font size, color, alignment, and spacing.

Text Transform:

ext transform is a CSS property that specifies how text should be transformed in terms of capitalization. It can be set to values like "uppercase," "lowercase," or "capitalize."

Text Decoration:

Text decoration refers to visual enhancements applied to text, such as underlines, overlines, or line-throughs. It can be used to indicate links or emphasize text elements.

Text Align:

Text align sets the horizontal alignment of text within its containing element. It can be adjusted to values like "left," "right," "center," or "justify" to control the positioning of text.

Letter Spacing:

Letter spacing determines the space between characters in a text. It can be set to control the amount of space between letters, allowing for tighter or looser text arrangements.

Line Height (em):

Line height specifies the vertical space between lines of text. It can be expressed in "em" units and affects the overall spacing between lines, contributing to readability and aesthetics.

Desktop Font Size (px):

Desktop font size sets the size of text in pixels for larger screens (e.g., desktop computers). It controls the legibility and visual impact of text on larger displays.

When you leave the text field empty, the default value is automatically inherited.

Mobile Font Size (px):

Mobile font size sets the size of text in pixels for smaller screens (e.g., mobile devices). It ensures that text remains readable and appropriately sized on smaller screens.

When you leave the text field empty, the default value is automatically inherited.

A State (Default, Visited, Hover, Active):

"A" stands for anchor links, which are commonly used for hyperlinks in HTML. These states (Default, Visited, Hover, Active) refer to the different appearances of hyperlinks based on their interaction status. "Default" is the standard link style, "Visited" is for links that have been clicked, "Hover" is the appearance when the mouse pointer is over the link, and "Active" is when the link is being clicked.

A Text Color:

A text color refers to the color applied to anchor (link) text. It specifies the visual appearance of the text for hyperlinks in various states, as mentioned above.

To embed a Google font to your Eshop, copy @import code provided by Google, into the CSS App Editor and write CSS rules to specify families.

Edit settings for your Primary button from Button section.

Primary button is visible from Catalogue page (Sort) or Collection Header Blocs (See More). Many preference are available for your Primary buttons:

Vertical Padding:

Vertical padding refers to the space or distance added above and below text.

Horizontal Padding:

Horizontal padding is the space or distance added to the left and right of text.

Border Radius:

Border radius is a CSS property that controls the curvature of corners on buttons. It defines the roundness or smoothness of the edges.

Default Hover Active Background Color:

These are color settings for different states of button. "Default" represents the normal state, "Hover" is when the user hovers their cursor over the element, and "Active" is when the element is being clicked. These states define the background color for each of these interactions.

Default Hover Active Style Border Color:

This specifies the color of the border for elements in different interaction states, similar to the previous item. "Default" is the normal state, "Hover" is for when hovering, and "Active" is when the element is being clicked.

Border Style:

Border style is a CSS property that defines the appearance of the borders around elements. It can be set to values like "solid," "dashed," "dotted," or "double," among others.

Border Width:

Border width sets the thickness of the border around an element. It determines how wide the border lines appear, helping to define the visual style of elements in a design.

Edit layout and style for your Item page.
​

Page layout refers to the arrangement and organization of content on an Item page. It determines the visual structure of the page, including the placement and alignment of various elements (Artwork, Buying Buttons, Tracklist…). The layouts mentioned, such as "2 col left," "2 col right," "3 col left," and "3 col center," specify the number of columns and their positioning within the page. For example:

In summary, the page layout defines the structure of the item page, while the buying button attributes like padding, border radius, background color, border color, border style, and border width collectively contribute to the visual design and functionality of the "Buy" button on the page. These design choices can greatly impact user experience and the overall aesthetics of the item page.

Somes design settings are available for the Audio Player .

Background Color

The background color is the color that fills the entire background of the Audio Player. The choice of background color can significantly impact the overall look and feel of the design.

Waveform Color

Waveform color pertains to the color of a waveform in the context of audio visualization or representation. A waveform is a graphical representation of an audio signal, and the waveform color is the color used to depict this graphical representation.

Progress Color

Progress color typically refers to the color used to indicate Audio waveform progress.

Bar Radius (0-10)

Bar radius, on a scale of 0 to 10, represents the degree of curvature or roundness at the corners or edges of audio bars. A higher value, closer to 10, results in more rounded or circular corners, while a lower value, closer to 0, creates sharper, square corners.

Bar Width (0-10)

Bar width, on a scale of 0 to 10, specifies the thickness or width of audio bars. A higher value means a wider bar, while a lower value indicates a thinner bar. The choice of bar width can affect the prominence and visibility of the element in a design.

Bar Gap (0-5)

Bar gap, on a scale of 0 to 5, defines the spacing or gap between individual audio bars. A higher value implies a larger gap, creating more separation between the bars or elements, while a lower value results in a narrower gap, bringing the bars or elements closer together.

These elements are crucial in design and user interface development, allowing designers and developers to control the visual aspects, interactivity, and aesthetics of digital interfaces, visualizations, and graphical representations.

In addition, an SCSS editor for Eshop is available for simplifying and optimizing the process of writing, managing, and maintaining the site's CSS styles. It offers improved organization, readability, reusability, and dynamic styling capabilities, all of which are essential for creating an appealing and functional online shopping experience.

CSS Preprocessing

SCSS is a preprocessor for CSS, which means it allows developers to write more organized and efficient CSS code. An SCSS editor is used to create, edit, and maintain SCSS files, which are then compiled into standard CSS. This preprocessing step makes it easier to manage complex and extensive stylesheets, which is particularly important for Eshop with numerous product listings and pages.

Improved Readability and Maintainability

SCSS introduces features like variables, nesting, and functions that enhance the readability and maintainability of CSS code. An SCSS editor enables developers to use these features effectively, making it easier to manage the styling of an Eshop, including elements like product listings, category pages, and cart displays.

Reuse of Styles

SCSS allows for the creation of reusable styles using mixins and variables. This is advantageous for an Eshop site where consistent branding and styling across various pages and components are crucial. An SCSS editor facilitates the creation and application of these reusable styles, reducing redundancy and ensuring a uniform look and feel.

Dynamic Styling

Eshop often require dynamic styling based on user interactions, such as hover effects, active states, or product filters. SCSS editors enable developers to write dynamic styles that respond to user actions, creating a more engaging and interactive shopping experience.

Responsive Design

Eshop sites need to be responsive to cater to users on different devices. SCSS, in combination with media queries, allows for the creation of responsive styles. The SCSS editor helps developers write and manage these styles for various screen sizes, ensuring that the Eshop looks and functions well on desktops, tablets, and smartphones.