​

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.