> ## Documentation Index > Fetch the complete documentation index at: https://help.aasaan.app/llms.txt > Use this file to discover all available pages before exploring further. # Theme Style > Comprehensive Guide to theme Your Aasaan Website Live ## Layouts Customize the structural layout of your online store for optimal presentation and user experience. ### Body Layout Choose the overall layout that best suits your store's design requirements. * **Default**: Utilizes the standard layout width set by the theme. * **Full Width**: Expands the layout to the full width of the screen for a more modern look. * **Custom Width**: Allows precise control over the layout's width. ### Custom Width Configuration * Set a specific width to fine-tune how much screen real estate your content occupies, with options ranging from `1200px` to `1920px`. ### Product Page Layout Select the layout that best displays your products. * **Default**: A balanced layout that follows the theme's original design. * **Left Thumbnail**: Places product thumbnails to the left of the main product image. * **Right Thumbnail**: Aligns product thumbnails to the right, providing an alternative visual dynamic. ### Shop Page Layout Determine the structure of your shop page to enhance product browsing. * **Default**: Adheres to the theme's default styling for product listings. * **Full-Width**: Offers a full-screen width layout, removing side margins for a more immersive product display. * **Right Sidebar**: Incorporates a sidebar on the right side for additional widgets or navigation links. These layout settings offer a foundation for creating a visually appealing and functional store that aligns with your brand identity and customer shopping habits. ## Shop Page Settings * **Custom Width**: Set a specific width for your shop page to control the visual layout. * **Product Image Settings**: * **Image Type**: Select the orientation of the product images (e.g., Portrait). * **Image Height(%)**: Define the image height as a percentage relative to its width. * **Image Adapt**: Choose how images adapt to the container, such as 'Full Width & Height (With Crop)'. * **Border Radius (px)**: Customize the corner radius for the images to create rounded corners. * **Show Add to Cart Button on Hover**: Reveal the 'Add to Cart' button when a customer hovers over a product image. * **Change Image on Hover**: Set the product card image to change when hovered over. * **Enable Product Quick View**: Allow customers to quickly view product details. ## Product Page Settings * **Show Product Price**: Toggle the display of the product price. * **Show Product Variant**: Toggle to show different product variants. * **Enable Product Wishlist**: Allow customers to add products to a wishlist. * **Show Product Review**: Display customer reviews on product pages. * **Disable Default Shipping Fields**: Hide default shipping fields if necessary. * **Show Product Badges**: Choose to show badges like 'new', 'sale', or 'bundle' on product cards. * **Product Badges Positions**: Set the position of the product badges. * **Enable Product Share**: Allow customers to share products on social media. * **Enable Buy Now Button**: Include a 'Buy Now' button on product pages. * **Enable Ask an Expert Option**: Offer an option to consult an expert, with customizable contact methods. * **Enable Check Product Availability**: Let customers check the availability of products for their location. * **Enable Trusted Badges**: Display badges to promote trust, like 'Secure Payment' badges. * **Enable Size Chart**: Provide a size chart for products. * **Enable Product UpSell**: Suggest additional products to customers. * **Enable Product Bundles**: Offer product bundles for purchase. * **Enable Terms and Condition**: Include terms and conditions for product purchases. Remember to preview your settings to ensure they meet your store's needs before publishing. # Font Configure the typography of your website by setting up various font types and properties to match your brand's style. ### Available Font Types * **Font Type 1**: Select from Google Fonts, e.g., Old Standard TT. * **Font Type 2**: Select from Google Fonts, e.g., Cormorant Garamond. * **Font Type 3**: Select from Google Fonts, e.g., Josefin Sans. ### Body Fonts Customize the body text appearance on your site. * **Font Type**: Choose a predefined font type, e.g., Font Type 1. * **Font Size**: Set the size of the font, e.g., 16px. * **Line Height**: Define the space above and below lines of text. * **Letter Spacing**: Adjust the spacing between characters. ### Heading Fonts Define the style for all headings within your site. * **Font Type**: Choose a predefined font type, e.g., Font Type 2. * **Font Size**: Set the size of the font for headings, e.g., 24px. * **Line Height**: Adjust the line height for heading readability. * **Letter Spacing**: Control the spacing between characters in headings. ### Menu Fonts Set the style for the fonts used in your site's menu. * **Font Type**: Select a predefined font type, e.g., Font Type 1. * **Font Size**: Choose the size of the menu font, e.g., 17px. * **Line Height**: Adjust the line height for clear menu navigation. * **Letter Spacing**: Fine-tune the spacing between menu characters. ### Product Title Fonts Style the fonts used for product titles on your site. * **Font Type**: Assign a predefined font type, e.g., Font Type 2. * **Font Size**: Set the product title font size, e.g., 18px. * **Line Height**: Adjust the line height for product titles. * **Letter Spacing**: Modify the spacing between characters in product titles. These font settings will apply globally across your website, affecting the body, headings, menu, and product titles to provide a consistent reading experience. # Color Customize the color schemes and global settings of your store theme for a consistent and branded customer experience. ### Header Color Define the color palette for your site's header. * **Header Background Color**: Choose a color for the background of the header. * **Header Text Color**: Select a color for the text in the header. * **Header Icon Color**: Set a color for the icons in the header. * **Header Bottom Background Color**: Determine the color for the bottom area of the header. * **Header Bottom Text Color**: Select a color for the text in the bottom area of the header. * **Header Bottom Icon Color**: Choose a color for the icons in the bottom section of the header. * **Mega Menu Background Color**: Set the background color for mega menus. * **Mega Menu Text Color**: Choose a color for the text in mega menus. * **Mega Menu Icon Color**: Determine the color for icons within mega menus. ### Body Color Customize the main color scheme for the body of your site. * **Background Color**: Set the primary background color. * **Background Gradient**: Choose a gradient background if desired. * **Default Text Color**: Select a default color for body text. * **Default Heading Color**: Determine the color for heading text. * **Link Color**: Choose a color for hyperlinks. * **Link Hover/Active Color**: Set colors for hyperlinks on hover or when active. * **Breadcrumb Color**: Choose colors for breadcrumb navigation and for hover and active states. * **Error Color**: Select colors for error messages and their background. ### Button Color Establish the color scheme for buttons on your site. * **Text Color**: Set the color for text on buttons. * **Border Color**: Choose a color for button borders. * **Background Color**: Select a color for button backgrounds. * **Background Gradient**: Determine a gradient for buttons if desired. * **Hover/Active Color**: Set colors for buttons on hover or when active, including border and background colors. ### Icon/Arrow Color Define the color palette for icons and arrows. * **Color**: Choose a default color for icons and arrows. * **Background Color**: Select a background color for icon and arrow containers. * **Hover/Active Color**: Determine the colors for icons and arrows when hovered over or active. ### Product Color Customize the color scheme for product-related elements. * **Product Card**: Set colors for product titles, price, sale price, and review indicators, including hover states. * **Product Badge**: Choose colors for text and background of new, sale, and sold-out badges. ### Coupon Color Select the color scheme for coupon elements. * **Background Color**: Choose the background color for coupon areas. * **Text Color**: Select the text color for coupons. * **Icon Color**: Set the color for coupon-related icons. ### Footer Color Define the color scheme for your site's footer. * **Footer Background Color**: Choose a background color for the footer. * **Footer Bottom Background Color**: Select a color for the bottom area of the footer. * **Footer Heading Color**: Determine the color for headings within the footer. * **Footer Link & Text Color**: Set colors for links and text in the footer. * **Footer Link Hover/Active Color**: Choose colors for footer links on hover or when active. * **Footer Icon Color**: Set the color for icons in the footer. * **Footer Icon Background Color**: Choose a background color for icon containers in the footer. * **Footer Icon Hover/Active Color**: Determine the colors for icons in the footer when hovered over or active. ## Global Settings Manage global settings that affect the entire site. * **Button Style**: Select a style for buttons across your site. * **Button Border Radius (px)**: Determine the border radius for buttons to control corner roundness. These settings help you to maintain a cohesive look throughout your online store, ensuring that all components align with your brand's aesthetic.