Welcome to the getting started customization guide, where we'll assist you in crafting a unique and cohesive appearance for your online store. Ensuring your store's design aligns with your brand is vital for creating a lasting impression. This guide will lead you through customization options to establish a distinctive visual identity.
<aside> <img src="/icons/info-alternate_gray.svg" alt="/icons/info-alternate_gray.svg" width="40px" /> Please refer to Screen resolution while customizing the theme to learn how to ensure an accurate preview of your store.
</aside>
Branding defines the personality of your online store and sets it apart from the rest. Follow these steps to customize your branding:
Replace your logo in navigation.
The initial step is to replace the existing logo across different sections, which includes the header, main sidebar, secondary sidebar, mobile header, and the password template.
Customize colors to align with your brand.
Tailor the color scheme to match your company's branding. Pay special attention to the accent color, typically a prominent brand color that ensures visibility and distinction.
Select suitable accent and base fonts.
Choose an accent font that complements your logo. For the base font, we recommend using a regular or medium font weight. The weight of the accent font can be adjusted based on your preferences. It's advisable to refrain from excessive use of decorative fonts.
Utilize typography presets.
You have access to a set of eight carefully curated typography presets. To explore these options, navigate to ‘Theme settings’ → Typography and choose the preset that best aligns with your requirements. Optionally, you can switch the base and accent fonts and fine-tune the font size scale. Also, consider aligning the weight of icons with the chosen font style.
Enhancing the overall visual experience of your website contributes to user engagement and satisfaction. Here's how to revamp your site's aesthetics:
Appearance customization.
Access ‘Theme settings’ → Appearance to adjust the white space configuration. Optionally, you can enable 'Show lines,' alter the line thickness, and modify the max page width. You'll observe how profoundly this changes can impact your design.
Shapes refinement.
Customize the radii of buttons, text fields, and images according to your preferences in ‘Theme settings’ → Shapes. Opt for rounder corners to introduce casualness, or square corners for a more strict appearance.
Animation tweaks.
Tailor Animation as required, for a smoother and more luxurious look-and-feel, choose the Smooth option, for a more utilitarian and simple style, go for Basic.
Navigation is a crucial aspect of your website's design, allowing visitors to smoothly navigate through your content. Avante offers a range of navigation customization options to ensure that your store's navigation is intuitive and aligned with your brand.
You can start by selecting between two primary navigation layouts: Header-based or Sidebar-based. Depending on your preference, you can also adjust the sidebar template and activate the header to create the desired navigation structure.
To begin the customization process, navigate to the ‘Theme settings’ and access the Appearance section. Here, you will find the ‘Navigation layout’ type, which you can configure as follows:
https://www.figma.com/file/kH9G30RaGr8Uu0g9skzQTx/Avante-Documentation?type=design&node-id=1015-81615&mode=design&t=qeYaQtsdbSdOy38L-0