Start customizing the theme
At the beginning it is necessary to go directly to the settings of the topic, to do this:
1. Go to the admin panel
2. Click "Online Store" in the navigation bar
3. Click on "Themes" in the drop-down list
4. Next, find the Voitto theme and click "Customize" next to the theme
Theme settings
- Opening theme settings
- Header
- Footer
- Main product
- Product card
- Colors
- Typography
- Slider style
- Styles
- Layout
- Social media
- Search input
- Favicon
- Currency format
- Checkout
In this section:
Opening theme settings
After performing the items from the "Start customizing the theme" section click "Theme settings" in the lower left corner to open the available theme settings
After clicking on "Theme settings" on the right side of the screen, the available theme settings will appear.
Header
In the "Header" section of the theme settings, you can choose the type you like. The type is responsible for the main style of the header
Functions available for activation:
1. "Activate sticky header" - the header is fixed at the top of the screen when you scroll
2. "Enable full width header" - the header does not take into account the size of the container and is displayed full width of the screen
3. "Enable Top Banner" - adds a "Free Shipping Notice" section and displays it on all pages
4-8. The options are responsible for displaying the corresponding blocks of the "Header Style" section on all pages
For the icons to be displayed, the corresponding blocks must be added to the "Header Style" section if they are missing.
Footer
In the "Footer type" option you can choose your favorite footer style
Functions available for activation:
1. "Activate sticky footer" - the basement is fixed and appears with a parallax effect when scrolling
2-5 Options will add the appropriate sections to all pages
All other changes that we have not mentioned are made in sections and will be discussed in another part of the documentation.
Main product
Functions available for activation:
1. "Enable sticky product information" - if there is enough information about the product, when you scroll the page it will be fixed
2-4. For information on these options, refer to The "Color" attribute for the product
Product card
In the "Product card" section you can customize the display of the product thumbnail to your liking by selecting the desired buttons type in the "Buttons group type" list and checking the necessary information to display, such as the display of product variants.
Colors
A voluminous section that includes basic color settings for the various elements of the theme. Let's go into more detail.
In "Main color" you can set:
1. "Primary Theme Color" - sections of the theme use this color as the main
2. "Secondary Theme Color" - some sections use, for example, for color after pointing
3. "Base Background Color" - sets the background color of the entire page
In "Button colors" you can set:
1. "Button primary background color" - the color of the main buttons is set by this variable
2. "Button primary hover background color" - the color after hovering over the main buttons is set by this variable
3. "Button primary text color" - the color of the text of the main buttons is set by this variable
4. "Button primary text color hover" - the color of the text after hovering over the main buttons is set by this variable
5. "Button secondary background color" - the background color of the secondary buttons is set by this variable
6. "Button secondary hover background color" - the background color of the secondary buttons after hovering is set by this variable
7. "Button secondary text color" - the text color of the secondary buttons is set by this variable
8. "Button secondary text color hover" - the color of the text of the secondary buttons after pointing is set by this variable
9. "Round Buttons" - sets the rounding for the buttons
In "Text colors" you can set:
1. "Main text color" - sets the main color of the text
2. "Secondary Text Color" - sets the color of the secondary text
3. "Color for error elements" - is used for elements that display errors
4. "Main color for borders" - sets the color of the borders of the theme elements
5. "Product background color" - sets the background color for product pictures, provided that the product pictures are in png format and have a transparent area
Typography
In "Headings" you can set:
1. "Text transform" - with this option you can change the styling of the header text, for example, by making all the letters of the headers capitalized
2. "Font" - sets the font for the header
3. "Font size scale" - by changing the option value you can increase/decrease the size of the header text
In "Body" you can set:
1. "Font" - sets the font for the rest of the topic text
2. "Font size scale" - sets the size of the rest of the text
Slider style
In "Navigation" and "Pagination" you can set:
1. "Style of slider navigation" - stylization of the displayed navigation arrows
2. "Arrow size" - size of the navigation arrows
3. "Style of slider pagination" - changes the pagination styling
4. "Pagination size" - сhanges the pagination size
Styles
In "Site animation" you can set:
1. "Enable the site animation" - if you want, you can turn off or on the animation of the theme elements when scroll
2. "Type of the site animation"
In "Badges" you can customize the badges displayed on the menu and on the product:
Layout
You can choose the size of the container by selecting your favorite among those available, and then the container will apply to the entire theme
Some theme sections use their own container and will not be affected by this option. You can configure the container of such sections directly in the section settings, if available.
The "Activate boxed mode" option will put content in the boxing before the box edges collide with the edges of the browser.
Social media
This part specifies the social media links that are used in the footer, for example. If the link is not filled in - the social network icon will not be displayed.
Search input
The following options are available for you to modify:
1. "Enable product suggestions" - adds a drop-down list with search results
2. "Show vendor" - displays the vendor if the product has one
3. "Show price" - displays the price if the product is in stock
4. "Show microphone" - activates the voice search function by clicking on the microphone icon
The function is not supported on all browsers.
Favicon
In this section you can change the icon that appears in the tab of your store
Currency format
You can activate the demonstration currency code near the price
Checkout
In "Banner" and "Logo" the following options are available to you:
1. "Background image" - will place the uploaded image on the background of the header
2. "Custom image" - adds a logo to the checkout page
3. "Position" - three logo positioning options
4. "Logo size" - three logo size options
In "Main content area" and "Order summary" the following options are available to you:
1. "Background image" - the uploaded picture will fit on the background of the left side of the checkout page
2. "Background color" - the specified color will be added to the background of the left part of the checkout page provided that the background picture is not loaded
3. "Form fields" - allows you to choose the background of the fields: either transparent or white
4. "Background image" - the uploaded picture will fit on the background of the right side of the checkout page
5. "Background color" - the specified color will be added as a background to the right part of the checkout page provided that the background picture is not loaded
In "Typography" and "Colors" the following options are available to you:
1. "Headings" - sets the selected font for the headers of the checkout page
2. "Body" - applies the selected font for the rest of the checkout page
3. "Accents" - sets the selected color to the links of the checkout page
4. "Buttons" - applies the selected color to the button on the checkout page
5. "Errors" - the selected color will be applied to the fields informing about the error on the checkout page
6. "visit the admin" - link redirects to the settings page of the checkout page in the admin panel
