1. Typography
Typography customization:
- Body: Choose the font, base size, and letter spacing 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, letter spacing 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.
2. General styles
You can 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. Icon
In Theme Settings, you can choose the style for the whole icon set inside your theme. There are 2 styles to choose:
- Classic
- Modern
Below is an example of the differences between 2 styles:
Note: Whether you choose the Classic or Modern style, the list of icons to choose remains the same. If an icon is missing in one style, it's shown in the other. (Example: You choose DNA icon → it will always show the DNA icon of the Modern style.)
4. Animations
In the animations section, let's explore the various animations available on the site:
|
Type of animation |
How is this animation used? |
How to set up |
Affected areas |
|
Button animation |
Enable the primary button effect when hovered. |
In the Primary button hover animation setting, choose from:
|
All the positions where primary buttons appear. |
|
Carousel Animation |
Carousel elements in the site can feature this animation (a bouncing effect), enhancing visual dynamic appeal. |
Untoggle the Disable carousel animation setting. |
Logo list, Social feeds, Testimonials with cards, Collection list, Collection list carousel, Featured collections, Product attribute table, Product bundle, Video shopping, Promo code list, Promotion grid, Collage, Media gallery, Text columns with icons, Text columns with images, and Video hero. |
|
Wide Image Parallax Effect |
Wide images on the site can feature a parallax effect, enhancing visual appeal. |
Untoggle the Disable parallax effect setting. |
Slideshow, Promotion banner, Media with text, Collection banner, Map, and Age Verification popup. |
|
Image Zoom-In Animation |
Enable zoom-in animation with images. |
Untoggle the Disable image zoom-in animation setting. |
Product card images, Collection card images, Media gallery, Promotion grid, Promotion popup, and Text columns with image |
|
Heading and Subheading Animation |
Enable fade-up effect with headings and subheadings. |
Untoggle the Disable heading and subheading animation setting. |
Headings and subheadings of almost all sections on the theme |
|
Page transition animation |
Apply a smooth page transition effect, displaying a black screen briefly before revealing the page content. |
Toggle the Enable page transition setting. |
Transition at all pages on the site. |
🤔What happens if you disable the animations?
You have the option to disable parallax effect and zoom-in animations, heading and subheading 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.
5. 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.
6. 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.
7. Carousel
In Theme settings > Design > Carousel, you can set one pagination style for the carousels across your store, so you don't need to change it section by section:
- 🖥️ Desktop pagination style: Choose None, Line, or Dots (default: None).
- 📱 Mobile pagination style: Choose None, Line, Dots, or Arrows (default: None). Choose Arrows to show next/previous arrows so customers can tap to see the next items.
These styles only apply to a section when its own Desktop pagination style / Mobile pagination style is set to Adapt to theme settings. By default, sections use Dots, so remember to switch each section to Adapt to theme settings if you want it to follow this setting.
⚠️ Note: The section's pagination setting only shows when its carousel is turned on (Enable carousel on desktop / Enable swipe on mobile).
Sections that support Adapt to theme settings:
- Desktop and mobile: Blog posts, Buy your own bundle, Cart upsell, Collection list, Collection list carousel, Featured collections, Logo list, Product bundle, Product recommendations, Promo code list, Recently viewed products, Related blog posts, Related collections, Shop by attribute, Social feeds, Testimonials, Text columns with icons, Text columns with images, Video looping, Video shopping, and the Item group block.
- Mobile only: Collage, Media gallery, Product highlight, and Promotion grid.
