copied successfully

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

img-24

Theme settings

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

img-25

After clicking on "Theme settings" on the right side of the screen, the available theme settings will appear.

img-26

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

img-27

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 pageslabel-attention

img-31 img-28
label-warning

For the icons to be displayed, the corresponding blocks must be added to the "Header Style" section if they are missing.

img-32

Footer

In the "Footer type" option you can choose your favorite footer style

img-33

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

img-34 img-35
label-done

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

img-36

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.

img-37

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

img-38

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

img-39

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

img-40

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

img-41

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

img-42

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

img-43

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

img-44

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"

img-45

In "Badges" you can customize the badges displayed on the menu and on the product:

img-46

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

label-warning

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.

img-47 img-48

The "Activate boxed mode" option will put content in the boxing before the box edges collide with the edges of the browser.

img-49

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.

img-50

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 iconlabel-attention

img-51
label-warning

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

img-52

Currency format

You can activate the demonstration currency code near the price

img-53

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

img-54

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

img-55

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

img-56