Themes Overview
The "Themes" section in Ivonto is where you can set up and customize the visual design and layout of your online store. Ivonto offers a variety of pre-designed themes that serve as the foundation for your store's appearance. These themes are fully customizable, allowing you to tailor the look and feel of your store to match your brand's identity.
Customizing Your Theme
Ivonto provides a wide range of customization options to help you create a unique and personalized online store. You can choose from various fonts, color schemes, background layouts, and more. Currently, Ivonto offers five theme layouts that can be used as the base layer for your store. After selecting a base theme, you can further customize it by adjusting various visual parameters to create a store that reflects your brand's personality.
Theme Settings Overview
Once you've selected a theme, you’ll be taken to a page where you can begin customizing it. This page is divided into several sections, each allowing you to modify different aspects of your store's appearance.
Main Preview Section (Highlighted in Green): This is the central part of the screen where you can see a live preview of your online store as you make changes.
Customization Settings (Highlighted in Yellow): On the left side of the screen, you’ll find the settings for the selected section. Here, you can modify various elements of your store’s design.
Dropdown Menu (Highlighted in Blue): Located at the top of the screen, this dropdown allows you to choose the specific page or section of your store that you want to customize. By default, the "Home" section is selected when you first choose a theme.
Customization Options
When customizing your store’s theme, you’ll have several options to choose from, depending on the section you're working on. Below are some of the key components you can customize:
Home Section
The Home section is the main landing page of your online store. Customization options include:
Logo: Upload a logo image for your store, and adjust its width and height to fit your design.
Banner Image: Set up a banner image for your store. Ivonto recommends an image size of 1000x720px with a maximum file size of 2 MB. You can also choose whether to use an image container, adjust the image’s height, and set its position.
Banner Button: Add a clickable button to your banner. Customize the button's text, URL, color, and text color.
Banner Title: Define the text for the banner's title. Adjust the paragraph spacing, text color, and highlight.
Banner Subtitle: Add a subtitle to your banner. Customize the subtitle text, color, and highlight.
Banner Text Colors: Set the color of the text on your banner.
Text Section: Customize the heading and paragraph text to present your brand and inform customers about your products, announcements, or any other important information.
Products Section: Define the section title and control its visibility.
Collections Section: Customize the text color and highlight for the collection selection.
Services Section: Define and customize the additional services available in your store, such as shipping, refund, support, and security. You can toggle the visibility of each service and add titles and descriptions.
SEO Settings: The SEO (Search Engine Optimization) section allows you to define keywords, meta titles, and meta descriptions for your website. These elements are crucial for improving your store’s searchability on platforms like Google.
Colors Section
The Colors section in Ivonto allows you to define the color scheme for your online store, enhancing its visual appeal and helping you create a cohesive brand identity. Colors play a crucial role in how your products are perceived by customers, influencing their shopping experience and the overall look of your store. For example, you might choose vibrant colors for pages featuring special offers and discounts, while opting for more subdued tones for high-end products.
Common Colors
In this subsection, you can define the colors for the common areas of your store, ensuring consistency across different sections.
Primary: The main color used across your store.
Secondary: A complementary color that contrasts with the primary color.
Light: A lighter shade used for backgrounds or less prominent elements.
Primary Hover: The color that appears when users hover over primary elements.
Secondary Hover: The hover color for secondary elements.
Light Hover: The hover color for light elements.
Neutral: A neutral color for areas that require subtlety.
Basket Colors
This subsection allows you to customize the colors specifically related to the basket or shopping cart.
Order Number: The color for the order number text.
Background: The background color of the basket.
Discount Colors
Customize the colors used in discount or promotional sections.
Background: The background color for discount sections.
Text: The text color used in discount sections.
Navigation Menus
This subsection lets you set the colors for the navigation menus, which guide users through your store.
Header: The color of the header menu.
Footer: The color of the footer menu.
Button Colors
Define the colors for various buttons throughout your store, which are key elements in driving customer actions.
Primary Text: The color of the text on primary buttons.
Primary Background: The background color of primary buttons.
Primary Text Hover: The text color when hovering over primary buttons.
Primary Background Hover: The background color when hovering over primary buttons.
Secondary Text: The color of the text on secondary buttons.
Secondary Background: The background color of secondary buttons.
Secondary Text Hover: The text color when hovering over secondary buttons.
Secondary Background Hover: The background color when hovering over secondary buttons.
Checkout Colors
This subsection is dedicated to the checkout page, where you can define colors for different elements, ensuring a smooth and visually consistent checkout experience.
Primary: The primary color used on the checkout page.
Primary Background: The background color of primary elements on the checkout page.
Primary Text Hover: The text color when hovering over primary elements.
Primary Background Hover: The background color when hovering over primary elements.
Box Shadow: The color of shadows around elements, adding depth and emphasis.
Font Section
The Font section allows you to select the fonts used across your online store. Ivonto offers a variety of font types, giving you the flexibility to choose a font that aligns with your brand’s personality. You can easily select a font from the dropdown menu located on the left side of the screen under the Primary Font option.
Header Section
The Header section is where you can customize the topmost part of your online store. This section is crucial as it is often the first thing customers see when they visit your store. You can define a welcoming message, such as promoting an online sale, and attach a link to it. The header section has two customizable areas:
Top Bar: This is where you can display a welcome message. You can also provide a URL link associated with the message.
Menu: Choose between a classic or mega menu layout to guide users through your store’s content.
Settings Selection
In the Settings section, you have the option to modify several key areas of your store's pages to enhance user experience and functionality.
Links
Open Product Link: Choose whether product links open in the same page or a new tab.
Add to Cart
Hide/Show Add to Cart: Decide whether to display or hide the "Add to Cart" button on product pages.
Product Settings
Pricing Display: Choose how product prices are displayed—highest price, lowest price, or as a price range.
Image Sizing: Select between cover or contain options for how product images are displayed.
Collection Settings
Image Sizing: Similar to product settings, you can choose between cover or contain options for collection images.
Custom Code Section
The Custom Code section provides advanced customization options for developers or those familiar with coding. This section allows you to add custom styles, scripts, or other code to your store.
Header: If you want to add custom styles, you should use the
<style>tags.Footer: To add custom scripts, use the
<script>tags.Body: Custom code added here will be placed at the start of the
<body>tag. There is no parent element, so yo