copied successfully
label-warning

The description of the section blocks is already in development and will be added to the documentation very soon

Home Page

Header Style

1. In the section settings the option to change the background color of the header is available, as well as the previously discussed options from "Theme Settings". Also, in addition to the mentioned option to change the background color of the header, on some header styles there are additional options to change the background color of additional header elements.

img-75

2. Demonstration header types:

Type #1

img-76

Type #2

img-77

Type #3

img-78

Type #4

img-79

Type #5

img-80

Type #6

img-81

Footer

Let's take a closer look at some of the footer site options of the different stylizations. We don't mention all the options, since most are accompanied by explanatory comments:

1. Footer options and appearance with type 1

img-82

2. Footer options and appearance with type 2

img-83

3. Footer options and appearance with type 3

img-84

4. Footer appearance with type 4

img-85

5. Footer options and appearance with type 5

img-86

6. Footer options and appearance with type 6

img-87

Theme Settings

The section adds the ability for your customers to turn off/on the desired features when they visit your site. They will also be able to change the text font and main color of the theme. All changes are saved locally until the end of the page session

img-88

Whatsapp

This section allows your customers to quickly contact you or your employees via messenger Whatsapp

img-89

Facebook Like Box

The section allows you to display content from the specified Facebook page

img-90

Free Shipping Notice

This section is designed to inform customers, for example, about new discounts in the store. The banner closing function is cached locally in the browser from which the banner was closed

img-91

Awesome Image Slider

The section will allow you to create an amazing slider show with various useful and convenient features. You can also add videos in addition to pictures (it should be mentioned that when you put a video on the first slide, the sound of the video will be excluded by the requirements of browsers)

img-92

Responsive Banners

The Responsive Banners section gives you a choice of 6 different banner styles and 6 different hover modes. A variety of settings ranging from the size of the section's container to the location of the text on the banner will allow you to customize the banner to suit your tastes. Kind of different styles:

Style 1:

img-93

Style 2:

img-94

Style 3:

img-95

Style 4:

img-96

Style 5:

img-97

Style 6:

img-98

Collection Tabs

The section allows you to create tabs by placing in each - the necessary category from which will be taken to display the products. In addition to adding tabs, you can activate the slider and in each tab with the required number of products will work product sheet scrolling. In addition to the products, you can add an informative banner with a picture

label-warning

When adding a banner, it is necessary that the option "Products in one row on desktop" was set to "2", then the banner will be displayed.

Demonstration of the section with various functions:

With banner

img-99

Tabs

img-100

Collection list

This section allows you to add a collection slider with picture insertion, the pictures will be taken from the added to the collection. You can add a picture of the collection in the collection configuration. Demonstration of the section on different pages:

Home Page

img-101

Collection Page

img-102

Promotion Parallax

Allows you to uniquely decorate the main page of the store with a picture or video with the parallax effect when scrolling. In addition to this in the settings of the block there is an opportunity to set the date from which the display will start and the date when the display will end, the counter will display the amount of time remaining to the end, for example, of the promotion.

img-103

Blog posts

The section provides a choice of five different display styles for blog posts. The section's settings include detailed settings for the slider, the information displayed, and the section as a whole. Demonstration of different section styles:

Style 1

img-104

Style 2

img-105

Style 3

img-106

Style 4

img-107

Style 5

img-108

Brand Manager

In the section you can put a brand that will consist of a specified link, a picture and a name. Brands can be grouped into a slider and set up the slider to your liking.

Demonstration of the view:

img-109

About Us

Three unique section styles are available, with settings for all the necessary elements, such as the link to which each picture leads. Demonstration of the section styles:

Style-1

img-110

Style-2

img-111

Style-3

img-112

HTML Content

In the section configurations you can select one of the two available styles, adjust the number of displayed elements and slider options. Demonstration of the section view:

Style 1

img-113

Style 2

img-114

GDPR EU Cookie Law Banner

The section allows you to notify customers about agreements they need to know about. The section configurations allow you to change the view, such as stretch to full screen, and many other intuitive settings. After the client agrees - the notification is hidden and not displayed thanks to the local caching function.

img-115

Latest Purchase

Allows you to notify customers of recent purchases that have been made in your store, which will help draw attention to the specified product. In the section configurations, you can change the duration of the display per block, as well as the time after which the section blocks will be displayed.

img-116

Advanced Newsletter Popup

The newsletter popup section will help draw the client's attention to the newsletter with, for example, a promo code. In the section configurations, it is possible to specify the position of the picture, set the necessary text. In addition, you can specify a start and end date - when to start displaying and when to end, and much more.

img-117

Testimonials About Us

The section adds the ability to notify visitors to the store about the opinions of customers who have used the store's services previously and left their feedback. In the section configurations you can edit slider, header and other options. The section is also used on the "About Us" page. Demonstration of the section view:

img-118

Lookbook On Homepage

The section provides the ability to advertise products in compatibility with banners by placing a check mark when hovering over which the selected product will appear. In the section configurations you can configure the slider settings and more.

img-119

Product Page

Product information

The section is the main section of the product, in the configurations of which intuitive options can be activated/deactivated. Most of the product settings are set in the blocks of the section

img-120

Product tab

This section adds tabs with a lot of useful information: full product description, product comments label-attention, youtube video tab and also the ability to create custom tabs with the necessary content.

img-121

Product recommendations

The section uses standard Shopify features and allows you to display recommended products on the product page. Learn more about features label-warning

img-122

Product comments

The section allows you to display product comments anywhere after the main product section.label-attention

img-123

Recommendations for product comments

label-attention

Comments are only displayed once per page, for example, if you have comments added to the tabs, please do not add them elsewhere on the page.

1. If you want to display comments in the Product tab section, the Reviews app must be added to that section. With this option, it is not necessary to add the application in other places.

img-124

2. When a product has a second page style, the comments are displayed in the product tabs, in which case the "Reviews" application must be added in a separate section for the comments to work properly

img-125

3. If you want to display comments in a separate section, as demonstrated in our demo on the third product style page, you must add the "Reviews" app to the "Product comments" section (if not present). You don't need to add the appendix elsewhere.

img-126

Collection Page

Product grid

This is the main section of the collection page in which you can configure many options, from filters to the speed of the collection page animation.

img-127

Collection banner

Allows you to add a banner with a picture of the collection. The collection picture is added in the admin panel, in the collection settings.

img-128

Collections List

Featured collections

This section allows you to display selected collections with pictures that you can add in the collection settings (admin panel).

img-129

Collections list page

This section displays all store collections with their images, which are added in the collection settings (admin panel).

img-130

Blogs Page

Blog posts

The main section of the blog page, which configures many options from activating the left column on the blog page to post elements (comments, add date, etc.). The options are accompanied by comments and intuitive headings

img-131

Blog Page

Blog post

The main section of a separate blog post, the basic configurations are set in the section blocks. In the configuration of the section it is available to disable the left column

img-132

About Us Page

Video About Us

The section allows you to add a video and a picture, which will be displayed before the video starts, to the page. In addition, the section allows you to configure a not full screen display to be combined on the same line with the "Html Content About Us" section. View of the section with different settings:

Full screen

img-133

Half screen

img-134

Html Content About Us

The section provides a choice of full screen display, half screen display for combination with the "Video About Us" section. In addition, the section settings contain informative text. View of the section with different parameters:

Full screen

img-135

Half screen

img-134

History About Us

This section allows for an original description of, for example, the principle of the store. In the section settings you can set the desired header, the rest of the settings are set to blocks.

img-136

Our Team

There are two styles to choose from in the section and the section carries information, for example, about the store's employee team. Demonstration of the different styles:

Style 1

img-137

Style 2

img-138

Page Previous

The section allows you to add on various pages a link back to the previous page from which you jumped to the current page. In the configurations of the section are available settings of color elements, setting the font size and text.

img-139

Achievement Counter

The section allows you to nicely display the store's achievements in numbers. In the section settings, you can add/remove shadow blocks, as well as set the section title.

img-140

Contact Us Page

Google map

Adds a Google Map on which you can mark stores. Two display options are available in the section: full screen and half screen for grouping on the same line as the "Contact Information" section. For the section to work correctly, you must first get a key for google map using this link. Detailed information about obtaining the key is described in the official video from Google.Demonstration of the different section display:

Full screen

img-141

Half screen

img-142

Contact Information

The section allows you to show the opening hours of the store, displaying the section can be both full screen and half screen in combination with the section "Google map". In the section settings you can add/remove shadow on the blocks, set the display style, fill color and header. View with different section settings:

Full screen

img-143

Half screen

img-142

Contact Form

Adds a form of communication through the mail and allows you to string the internal text, change the background color or add a picture instead of a background color.

img-144

Contact Hours

The section allows you to add store hours. In the section settings you can select an icon to be displayed next to the time text and set the title.

img-145

Stores Page

Stores

The main section of the stores page, which provides many customization options ranging from header text, to social media icons. Options for customizing the section and blocks:

Different positioning of pictures

img-146

Second setting option

img-147

Lookbook Page

Lookbook

The section lines up images on the grid and allow the original method of advertising marked in the blocks of products. When configuring the section, we recommend using the image sizes used in the demo version of the theme.

img-148

Lookbook Style 2

The section allows you to add an image on which there will be marks of products, and products at the same time will be displayed next to the image and by clicking on the mark - the product is highlighted.

img-149

Portfolio Page

Portfolio

The section allows you to group images according to the words specified in the blocks and display them with a "masonry" effect. In the section settings you can choose the number of images in a row.label-warning

img-150
label-warning

Clicking on an image opens a gallery of all the images in the section. Also the text added in the blocks appears when hovering over the image.

Portfolio Style Two

The section allows you to add images to the grid and display them in an original way. In the section settings you can change the text of the header, subheader and all other text in the header of the section.label-warning

img-151

Portfolio Style Three

Section with a different kind of picture position in the grid. It also allows you to customize all the text that is in the header of the section.label-warning

img-152

Portfolio Style Four

The original section that displays full-screen images as a vertical slider.label-warning

img-153

FAQ Page

FAQ

The main section of the FAQ page gives you a choice of two section styles and allows you to customize many options, from indentation to text color. A demonstration of the two section styles:

First Style

img-154

Second Style

img-155

Page Header

The section allows you to add a header and a subheader to different pages and provides many options for customizing them.

img-156

Store Policies Pages

label-warning

On these pages, the sections may have the same name, but the styling of the sections on each page is different.

Adding sections to these pages

Sections are added to these pages as follows:

1. Go to the admin panel

2. In the navigation panel on the left, click on "Settings" in the lower left corner

img-5

3. Next, in the menu that opens, in the navigation bar on the left, click on "Policies"

4. To add sections to the desired page, in the example in the figure it is the "Refund policy" page, click "Show editor"

5. Paste the copied codelabel-warning

6. Save the changes

img-157

The code for the different "Policies" pages (click on the button next to the desired page to copy):

1. Refund policy

2. Privacy policy

3. Terms of service

4. Shipping policy

5. Terms of sale

6. Legal notice

Page Text

The section contains many options for text settings, the rest of the parameters are configured in the section blocks.

img-158

Page Paragraphs

The section also contains many text settings and is displayed differently on different pages. Demonstration of the view on different pages:

Legal Notice:

img-159

Privacy Policy:

img-160

Refund Policy:

img-161

Shipping Policy:

img-162

Terms Of Service:

img-163

HTML Content

The section contains the main settings - text color settings, all other settings are in the blocks. View on different pages:

Legal Notice

img-164

Refund Policy

img-165

Shipping Policy

img-166

Terms Of Sale

img-167

Terms Of Service

img-168

Page Lists

The section contains the text and text color settings, the blocks set the content of the section elements.

img-169

Achievement counter

The section provides an opportunity to inform the store visitor about the company's achievements in numbers. It looks different on different pages. In the section configurations you can set the section title, on the page "Shipping Policy" and "Terms Of Sale" you can turn off/on the shading on the blocks, on the page "Terms Of Service" more advanced settings as needed. Demonstration of the section view:

Shipping Policy

img-170

Terms Of Service

img-172
<div class="bonrefund-policy-checkout"> <h2 style="margin-bottom: .5rem;">General rules of return and refusal policy</h2> <p style="line-height: 146%;"> In the event of any discrepancy or conflict, the English version will prevail over the translation. Most items purchased from sellers listed on Voitto-demo are returnable within the return window, except those thatare explicitly identified as not returnable.For the products that are returned by the customer, the refund is issued to the original payment method (in case of pre-paid transactions) or to the bank account / as balance (in case of Pay on Delivery orders), the details for making such refund and the timelines are detailed in the refund policy available here. </p> <a class="btn" style="padding: .5rem 2rem;margin-top: 1rem;background: #353535;" href="https://voitto-demo.myshopify.com/policies/refund-policy" target="_blank">Read more</a> </div> <p style="font-size: 0;"> {% section 'bonrefund-policy-header' %} {% section 'bonrefund-policy-lists' %} {% section 'bonrefund-policy-html' %} {% section 'bonrefund-policy-paragraphs' %} {% section 'bonrefund-policy-text' %} {% section 'bonpage-previous' %} </p>
<div class="bonprivacy-policy-checkout"> <h2 style="margin-bottom: .5rem;">Cookies and Web Beacons</h2> <p style="line-height: 146%;">Like any other website, voitto-demo uses 'cookies'. These cookies are used to store information including visitors' preferences, and the pages on the website that the visitor accessed or visited. The information is used to optimize the users' experience by customizing our web page content based on visitors' browser type and/or other information. For more general information on cookies, contact us. </p> <a class="btn" style="padding: .5rem 2rem;margin-top: 1rem;background: #353535;" href="https://voitto-demo.myshopify.com/policies/privacy-policy" target="_blank">Read more</a> </div> <p style="font-size: 0;"> {% section 'bonprivacy-policy-header' %} {% section 'bonprivacy-policy-paragraphs' %} {% section 'bonprivacy-policy-lists' %} {% section 'bonprivacy-policy-text' %} {% section 'bonpage-previous' %} </p>
<div class="bonterms-of-service-checkout"> <h2 style="margin-bottom: .5rem;">Changes Terms and Conditions</h2> <p style="line-height: 146%;">We reserve the right, at Our sole discretion, to modify or replace these Terms at any time. If a revision is material We will make reasonable efforts to provide at least 30 days' notice prior to any new terms taking effect. What constitutes a material change will be determined at Our sole discretion. </p> <a class="btn" style="padding: .5rem 2rem;margin-top: 1rem;background: #353535;" href="https://voitto-demo.myshopify.com/policies/terms-of-service" target="_blank">Read more</a> </div> <p style="font-size: 0;"> {% section 'bonterms-service-header' %} {% section 'bonterms-service-html' %} {% section 'bonterms-service-counter' %} {% section 'bonterms-service-text' %} {% section 'bonterms-service-paragraphs' %} {% section 'bonpage-previous' %} </p>
<div class="bonshipping-policy-checkout"> <h2 style="margin-bottom: .5rem;">Shipping Costs & Delivery Times</h2> <p style="line-height: 146%;">Voitto offers 1-3 business day shipping as our standard shipping option on all merchandise orders. However, due to delays related to demand and COVID-19, Voitto orders may experience delays. Standard business day shipping is FREE on orders $50 and over (excluding taxes) – no promotion code needed. </p> <a class="btn" style="padding: .5rem 2rem; margin-top: 1rem; background: #353535;" href="https://voitto-demo.myshopify.com/policies/shipping-policy" target="_blank">Read more</a> </div> <p style="font-size: 0;"> {% section 'bonshipping-policy-header' %} {% section 'bonshipping-policy-paragraphs' %} {% section 'bonshipping-policy-html' %} {% section 'bonshipping-policy-lists' %} {% section 'bonshipping-policy-counter' %} {% section 'bonshipping-policy-text' %} {% section 'bonpage-previous' %} </p>
<div class="bonterms-sale-checkout"> <h2 style="margin-bottom: .5rem;">General Terms For The Sale</h2> <p style="line-height: 146%;">Sale of any Products or Services is expressly conditioned on Buyer’s assent to these Terms and Conditions. Any acceptance of Seller’s offer is expressly limited to acceptance of these Terms and Conditions and Seller expressly objects to any additional or different terms proposed by Buyer. No Buyer form shall modify these Terms and Conditions, nor shall any course of performance, course of dealing.</p> <a class="btn" style="padding: .5rem 2rem; margin-top: 1rem; background: #353535;" href="https://voitto-demo.myshopify.com/policies/shipping-policy" target="_blank">Read more</a> </div> <p style="font-size: 0;"> {% section 'bonterms-sale-header' %} {% section 'bonterms-sale-paragraphs' %} {% section 'bonterms-sale-html' %} {% section 'bonterms-sale-counter' %} {% section 'bonterms-sale-text' %} {% section 'bonpage-previous' %} </p>