​
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.
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.
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.