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

To read more about colors and typography in detail, visit this guide: Theme settings - BSS Commerce Wiki

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.