Design

1. Colors & Typography

Basically, you can choose between two color schemes for the light and dark theme modes. This lets you tweak the colors of different elements across the whole site, especially in sections where you haven't made specific changes. To make these adjustments, head over to Theme Settings, where you can handle both Color and Typography settings.

For more information on theme modes, check here: Header

a) Colors & Colors for the dark theme

Summary of color customization options:

• General Colors: These settings allow you to customize the overall appearance of your store by defining colors for various elements such as backgrounds, headings, titles, text, links, prices, error/success messages, borders, cart dots, and rating icons. 
• Button Colors: Customizing button colors includes setting colors for primary and secondary buttons, as well as their hover states. 
• Header Colors: Defining header colors involves adjusting the background, text, and line colors of the header section. 
• Footer Colors: Adjusting footer colors includes setting the background, heading, title, text, links, and line colors of the footer. 
• Image Treatment: Configuring overlay and text colors on images across the site

You can also set up colors similarly for the dark theme.

b) Typography

Typography Customization:

• Body: Choose the font and base size for the main text to ensure readability and a consistent appearance across all text in the body of your website. The right font and size help in creating a pleasant reading experience for users.
• Headings: 
• Select the font, base size, and text transform settings for headings to define how titles and section headers are displayed. This helps in establishing a clear visual hierarchy, making it easier for users to navigate and understand the content structure.
• The Heading Size configuration primarily controls the size of the H1 heading. Other heading tags (H2, H3, etc.) are automatically adjusted as a percentage relative to the H1 size. For example, if you set the H1 size to 100px, the H1 on your site will follow this setting, H1 is set to 170% of H2 in the theme logic.
• Each section within your theme has its own configuration for heading and text sizes. These are expressed as a percentage of the value selected in the main typography settings. Example: If this section has a heading size set to 50% and uses an H2 tag, the heading size for this section would be calculated as: 50% × (H1 Size/170%)~30px, with H1=100px, configured in Theme Settings > Typography > Headings.

• Others: Customize the fonts used for menu items and buttons to maintain a cohesive design that aligns with the overall style of your site. 

In conclusion, by customizing both color and typography settings, you can create a visually cohesive and engaging experience for your store's visitors. These settings provide flexibility to enhance the overall aesthetic and usability of your store.

2. General styles

You have the ability to customize the appearance of all product cards and images by adjusting the corners to your liking. Additionally, you can harmonize the color palette of buttons site-wide, including primary buttons, button text, hover effects, and secondary buttons. Furthermore, you can refine the button styles by choosing between square, rounded, rounded corners or mixed options to enhance the visual appeal of your website's buttons.

To ensure a consistent user experience across devices, consider enabling the display of button colors in a mobile-friendly format. This feature helps maintain a cohesive look and feel for visitors accessing your site on mobile devices. 

By leveraging these customization options effectively, you can create a visually appealing and user-friendly website that reflects your brand identity and engages visitors effectively.

3. Animations

In the animations section, let's explore the various animations available on the site:

Button Animations: Make your website pop with engaging animations that catch the eye. Customize button animations with ease using the Primary button hover animation settings.Choose from:

• Slide: This animation type involves a sliding motion effect.
• Fill up: The button fills up from the bottom to the top.
• Sliced with icon: To implement this animation, you need to upload a custom icon in SVG format.
• Underline: Adds an underline effect to the text within the button.

Wide Image Parallax Effect: Wide images on the site can feature a parallax effect, enhancing visual appeal. This effect is utilized in sections like Slideshow, Promotion banner, Media with text, Collection banner, Map, and Age Verification popup.

Image Zoom-In Animation: Smaller images across the site, including Product card images, Collection card images, Media gallery, Promotion grid, Promotion popup, and Text columns with image, showcase a zoom-in animation effect for added visual interest.

Disabling Animations: You have the option to disable parallax effect and zoom-in animations, which can help improve site performance and reduce potential discomfort for certain users. Consider exploring the benefits of reducing motion to understand the impact on user experience further.

Note:
The "reduce-motion" feature, when activated in web browsers, aims to decrease or eliminate decorative motion effects on websites. This option benefits users with visual sensitivities or those who dislike excessive motion, providing a more comfortable and less visually taxing browsing experience. 

By customizing these animations according to your preferences and understanding their effects on user engagement and site performance, you can create a visually dynamic and user-friendly website tailored to meet your specific needs.

4. Layout

In the Layout section of Theme settings, you can adjust the following:

• Section Spacing: You can customize the spacing between different sections on the webpage, with the option to set it anywhere between 0 to 100 pixels.
• Page Width: You have the flexibility to set the overall width of the page, ranging from 1000 to 1600 pixels.

5. Scroll bar

A scroll bar is a graphical user interface element that allows users to navigate through content that extends beyond the visible area of a window or a webpage. The main scrollbar of the Eurus theme is located on the side and appears on all pages.

To customize the width of the main scroll bar in your theme, follow these steps:

Go to Theme settings > Design > Scroll bar. Eurus theme provides the following options for the Main scrollbar width: Default/ Very Thin/ Thin/ Medium/ Large/ Very Large

Note: Due to the limited styling capabilities of each platform, custom scrollbars aren't fully supported on iOS 14+ devices and the Firefox browser.