<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
    <system>
        <section id="weltpixel_owl_carousel_config" translate="label" type="text" sortOrder="180" showInDefault="1" showInWebsite="1" showInStore="1">
            <label>OWL Product Carousels Pro</label>
            <tab>weltpixel</tab>
            <resource>WeltPixel_OwlCarouselSlider::owlcarouselslider_settings</resource>
            <group id="general_module_information" translate="label" type="text" sortOrder="0" showInDefault="1" showInWebsite="1" showInStore="1">
                <label>Responsive Banner Slider and OWL Carousel PRO</label>
                <attribute type="expanded">1</attribute>
                <fieldset_css>weltpixel-module-information-header active</fieldset_css>
                <field id="separator_product_dimensions" translate="button_label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                    <frontend_model>WeltPixel\Backend\Block\Adminhtml\System\Config\ModuleInformation</frontend_model>
                    <button_label>WeltPixel_OwlCarouselSlider</button_label>
                </field>
            </group>
            <group id="general" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                <label>General Configuration for OWL Product Carousels and Banner Sliders</label>
                <field id="breakpoint_1" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Breakpoint 1</label>
                    <comment>Add breakpoint. Ex.: 320. Applied to resolutions higher than set value. </comment>
                    <tooltip>Below, in each carousel, you are able to set, for example, the items number in the carousels for each breakpoint.
                        For example, you can set to display 2 items on mobile screens, 3 items on tablets and 4 items on desktop.
                    </tooltip>
                </field>
                <field id="breakpoint_2" translate="label" type="text" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Breakpoint 2</label>
                    <comment>Add breakpoint. Ex.: 768. Applied to resolutions higher than set value.</comment>
                </field>
                <field id="breakpoint_3" translate="label" type="text" sortOrder="30" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Breakpoint 3</label>
                    <comment>Add breakpoint. Ex.: 1024. Applied to resolutions higher than set value.</comment>
                </field>
                <field id="breakpoint_4" translate="label" type="text" sortOrder="40" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Breakpoint 4</label>
                    <comment>Add breakpoint. Ex.: 1280. Applied to resolutions higher than set value.</comment>
                </field>
                <field id="display_wishlist" translate="label comment" type="select" sortOrder="50" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Display wishlist</label>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                    <comment><![CDATA[Display/Hide wishlist. <br/> This setting applies only to Related, Cross-Sell and Up-Sell carousels. For the rest, there are specific settings at the individual Product Carousel level.]]></comment>
                </field>
                <field id="display_compare" translate="label comment" type="select" sortOrder="60" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Display compare</label>
                    <comment><![CDATA[Display/Hide compare. <br/> This setting applies only to Related, Cross-Sell and Up-Sell carousels. For the rest, there are specific settings at the individual Product Carousel level.]]></comment>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                </field>
            </group>

            <!--New Products Section-->

            <group id="new_products" translate="label" type="text" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1">
                <label>New Products Carousel Settings</label>

                <field id="status" translate="label" type="select" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Enable New Product Carousel</label>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                    <comment>In order for carousel to be displayed, make sure you have products defined as "New" and the carousel is inserted in your page/block. Insert the
                        carousel by following the documentation.</comment>
                    <tooltip>New Products Carousel - will be populated with products defined as 'New' in your magento catalog.</tooltip>
                </field>
                <field id="title" translate="label" type="text" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Title</label>
                    <comment>Insert custom title to be displayed on the carousel. For no title leave field empty.</comment>
                </field>
                <field id="show_price" translate="label" type="select" sortOrder="30" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Show Price</label>
                    <comment>Show/Hide the product price for products in the carousel</comment>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                </field>
                <field id="show_addto" translate="label comment" type="select" sortOrder="40" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Show Add To Cart</label>
                    <comment>Show/Hide ‘Add to cart’ button for products in the carousel.</comment>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                </field>
                <field id="show_wishlist" translate="label comment" type="select" sortOrder="50" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Show Wishlist</label>
                    <comment>Show/Hide wishlist icon for products in the carousel.</comment>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                </field>
                <field id="show_compare" translate="label comment" type="select" sortOrder="60" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Show Compare</label>
                    <comment>Show/Hide Compare icon for products in the carousel</comment>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                </field>
                <field id="show_reviews_ratings" translate="label comment" type="select" sortOrder="65" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Show Reviews and Ratings</label>
                    <comment>Show/Hide Reviews and Ratings for products in the carousel</comment>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                </field>
                <field id="random_sort" translate="label comment" type="select" sortOrder="70" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Sort Order</label>
                    <comment>Sort Order of the products in the carousel.</comment>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\SortOrder</source_model>
                </field>
                <field id="max_items" translate="label" type="text" sortOrder="80" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Max Items</label>
                    <comment>The total number of products to be loaded in the carousel.</comment>
                </field>
                <field id="slide_by" translate="label" type="text" sortOrder="83" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Slide By</label>
                    <comment><![CDATA[ Insert how many items to slide at once. Default value: 1 <br> Note: On breakpoints the value will auto adjust to visible items. ]]></comment>
                    <validate>validate-number validate-greater-than-zero validate-no-empty</validate>
                </field>
                <!--Separator Slider-->

                <field id="separatorSlider" translate="label" type="text" sortOrder="85" showInDefault="1" showInWebsite="1" showInStore="1">
                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorslide</frontend_model>
                </field>
                <field id="loop" translate="label" type="select" sortOrder="140" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Loop</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>Inifnity loop. Duplicate last and first items to get loop illusion.</comment>
                </field>
                <field id="margin" translate="label" type="text" sortOrder="150" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Margin</label>
                    <comment>Set right margin for each item in carousel. Example: for a margin of 30px enter 30 in the field.</comment>
                </field>
                <field id="lazyLoad" translate="label" type="select" sortOrder="160" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>LazyLoad</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>Lazy Load delays loading of images. Images outside of viewport are not loaded until user scrolls to them.</comment>
                </field>
                <field id="autoplay" translate="label" type="select" sortOrder="170" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Autoplay</label>
                    <comment>Autoplay the carousel.</comment>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                </field>
                <field id="autoplayTimeout" translate="label" type="text" sortOrder="180" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>AutoplayTimeout</label>
                    <depends>
                        <field id="autoplay">1</field>
                    </depends>
                    <comment>Autoplay interval timeout. Set time between changing products (in milliseconds, for Example: 4000, for 4 seconds))</comment>
                </field>
                <field id="autoplayHoverPause" translate="label" type="select" sortOrder="190" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>AutoplayHoverPause</label>
                    <comment>Set the autoplay to pause on mouse hover.</comment>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <depends>
                        <field id="autoplay">1</field>
                    </depends>
                </field>
                <field id="navSpeed" translate="label comment" type="text" sortOrder="191" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Next/Prev button Transition Speed</label>
                    <comment>Set the speed for the transition animation when clicking the Next/Prev buttons. Insert value in ms. Write “4000” for a 4 second timeout.</comment>
                </field>
                <field id="dotsSpeed" translate="label comment" type="text" sortOrder="192" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Dots Transition Speed</label>
                    <comment>Set the speed for the transition animation when clicking the Dots. Insert value in ms. Write “4000” for a 4 second timeout.</comment>
                </field>
                <field id="rtl" translate="label comment" type="select" sortOrder="193" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Direction Right To Left</label>
                    <comment>If True, each banner will slide from right to left.</comment>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                </field>
                <field id="nav_design" translate="label comment" type="select" sortOrder="194" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Prev/Next buttons design</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\PrevNextDesign</source_model>
                </field>
                <field id="nav_prev_label" translate="label comment" type="text" sortOrder="195" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Prev Label</label>
                    <comment>Insert custom label for  previous button. If empty, only arrows are displayed.</comment>
                    <depends>
                        <field id="nav_design">2</field>
                    </depends>
                </field>
                <field id="nav_next_label" translate="label comment" type="text" sortOrder="195" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Next Label</label>
                    <comment>Insert custom label for next button. If empty, only arrows are displayed.</comment>
                    <depends>
                        <field id="nav_design">2</field>
                    </depends>
                </field>

                <!--Separator Breakpoints-->

                <field id="Separatorbreakpoint" translate="label" type="text" sortOrder="195" showInDefault="1" showInWebsite="1" showInStore="1">
                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
                </field>

                <!--Separator Breakpoint 1-->
                <field id="s_1" translate="label" type="text" sortOrder="197" showInDefault="1" showInWebsite="1" showInStore="1">
                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
                </field>

                <field id="nav_brk1" translate="label" type="select" sortOrder="200" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Next/Prev Buttons</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, next/prev buttons are displayed.</comment>
                </field>
                <field id="dots_brk1" translate="label" type="select" sortOrder="205" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Dots</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, dots are displayed under carousel.</comment>
                </field>
                <field id="dotsEach_brk1" translate="label comment" type="select" sortOrder="206" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Show Dots for each Item</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, Show dots for each item.</comment>
                    <depends>
                        <field id="dots_brk1">1</field>
                    </depends>
                </field>
                <field id="items_brk1" translate="label" type="text" sortOrder="210" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Items</label>
                    <comment>The number of items you want to see on the screen. This value should be smaller than Max Items. </comment>
                </field>
                <field id="center_brk1" translate="label" type="select" sortOrder="220" showInDefault="1" showInWebsite="1" showInStore="1">
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <label>Center</label>
                    <comment>If True, carousel is centered on the screen. Works well even with an odd number of items.</comment>
                </field>
                <field id="stagePadding_brk1" translate="label" type="text" sortOrder="230" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>StagePadding</label>
                    <depends>
                        <field id="center_brk1">0</field>
                    </depends>
                    <comment>Padding left and right on stage (can see neighbours).</comment>
                </field>

                <!--Separatorbreakpoint 2-->
                <field id="s_2" translate="label" type="text" sortOrder="235" showInDefault="1" showInWebsite="1" showInStore="1">
                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
                </field>

                <field id="nav_brk2" translate="label" type="select" sortOrder="240" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Next/Prev Buttons</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, next/prev buttons are displayed.</comment>
                </field>
                <field id="dots_brk2" translate="label" type="select" sortOrder="245" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Dots</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, dots are displayed under carousel.</comment>
                </field>
                <field id="dotsEach_brk2" translate="label comment" type="select" sortOrder="246" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Show Dots for each Item</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, Show dots for each item.</comment>
                    <depends>
                        <field id="dots_brk2">1</field>
                    </depends>
                </field>
                <field id="items_brk2" translate="label" type="text" sortOrder="250" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Items</label>
                    <comment>The number of items you want to see on the screen. This value should be smaller than Max Items. </comment>
                </field>
                <field id="center_brk2" translate="label" type="select" sortOrder="260" showInDefault="1" showInWebsite="1" showInStore="1">
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <label>Center</label>
                    <comment>If True, carousel is centered on the screen. Works well even with an odd number of items.</comment>
                </field>
                <field id="stagePadding_brk2" translate="label" type="text" sortOrder="270" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>StagePadding</label>
                    <depends>
                        <field id="center_brk2">0</field>
                    </depends>
                    <comment>Padding left and right on stage (can see neighbours).</comment>
                </field>

                <!--Separatorbreakpoint 3-->
                <field id="s_3" translate="label" type="text" sortOrder="275" showInDefault="1" showInWebsite="1" showInStore="1">
                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
                </field>

                <field id="nav_brk3" translate="label" type="select" sortOrder="280" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Next/Prev Buttons</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, next/prev buttons are displayed.</comment>
                </field>
                <field id="dots_brk3" translate="label" type="select" sortOrder="285" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Dots</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, dots are displayed under carousel.</comment>
                </field>
                <field id="dotsEach_brk3" translate="label comment" type="select" sortOrder="286" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Show Dots for each Item</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, Show dots for each item.</comment>
                    <depends>
                        <field id="dots_brk3">1</field>
                    </depends>
                </field>
                <field id="items_brk3" translate="label" type="text" sortOrder="290" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Items</label>
                    <comment>The number of items you want to see on the screen. This value should be smaller than Max Items. </comment>
                </field>
                <field id="center_brk3" translate="label" type="select" sortOrder="300" showInDefault="1" showInWebsite="1" showInStore="1">
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <label>Center</label>
                    <comment>If True, carousel is centered on the screen. Works well even with an odd number of items.</comment>
                </field>
                <field id="stagePadding_brk3" translate="label" type="text" sortOrder="310" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>StagePadding</label>
                    <depends>
                        <field id="center_brk3">0</field>
                    </depends>
                    <comment>Padding left and right on stage (can see neighbours).</comment>
                </field>

                <!--Separatorbreakpoint 3-->
                <field id="s_4" translate="label" type="text" sortOrder="315" showInDefault="1" showInWebsite="1" showInStore="1">
                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
                </field>

                <field id="nav_brk4" translate="label" type="select" sortOrder="320" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Next/Prev Buttons</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, next/prev buttons are displayed.</comment>
                </field>
                <field id="dots_brk4" translate="label" type="select" sortOrder="325" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Dots</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, dots are displayed under carousel.</comment>
                </field>
                <field id="dotsEach_brk4" translate="label comment" type="select" sortOrder="326" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Show Dots for each Item</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, Show dots for each item.</comment>
                    <depends>
                        <field id="dots_brk4">1</field>
                    </depends>
                </field>
                <field id="items_brk4" translate="label" type="text" sortOrder="330" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Items</label>
                    <comment>The number of items you want to see on the screen. This value should be smaller than Max Items. </comment>
                </field>
                <field id="center_brk4" translate="label" type="select" sortOrder="340" showInDefault="1" showInWebsite="1" showInStore="1">
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <label>Center</label>
                    <comment>If True, carousel is centered on the screen. Works well even with an odd number of items.</comment>
                </field>
                <field id="stagePadding_brk4" translate="label" type="text" sortOrder="350" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>StagePadding</label>
                    <depends>
                        <field id="center_brk4">0</field>
                    </depends>
                    <comment>Padding left and right on stage (can see neighbours).</comment>
                </field>
            </group>

            <!--Best sell Products Section-->

            <group id="bestsell_products" translate="label" type="text" sortOrder="30" showInDefault="1" showInWebsite="1" showInStore="1">
                <label>Best Sell Products Carousel Settings</label>

                <field id="status" translate="label" type="select" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Enable Best Sell Products Carousel</label>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                    <comment>In order for carousel to be displayed make sure the carousel is inserted in your page/block
                        and there are a few orders placed. Insert the carousel by following the documentation.
                    </comment>
                    <tooltip>Best Sell Products Carousel - will be dynamically populated with best selling products
                        based on your magento admin statistics (make sure magento statistics are activated and products
                        are visible in catalog in order to show up.)
                    </tooltip>
                </field>
                <field id="title" translate="label" type="text" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Title</label>
                    <comment>Insert custom title to be displayed on the carousel. For no title leave field empty.</comment>
                </field>
                <field id="period" translate="label" type="select" sortOrder="22" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Period</label>
                    <comment>Select the period for Best Sell products. Be sure to refresh lifetime statistics of Reports > Statistics > Refresh Statistics > Bestsellers whenever you change this setting.</comment>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\BestSellPeriod</source_model>
                </field>
                <field id="show_price" translate="label" type="select" sortOrder="30" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Show Price</label>
                    <comment>Show/Hide the product price for products in the carousel</comment>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                </field>
                <field id="show_addto" translate="label" type="select" sortOrder="40" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Show Add To Cart</label>
                    <comment>Show/Hide ‘Add to cart’ button for products in the carousel.</comment>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                </field>
                <field id="show_wishlist" translate="label" type="select" sortOrder="50" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Show Wishlist</label>
                    <comment>Show/Hide wishlist icon for products in the carousel.</comment>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                </field>
                <field id="show_compare" translate="label" type="select" sortOrder="60" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Show Compare</label>
                    <comment>Show/Hide Compare icon for products in the carousel</comment>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                </field>
                <field id="show_reviews_ratings" translate="label comment" type="select" sortOrder="65" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Show Reviews and Ratings</label>
                    <comment>Show/Hide Reviews and Ratings for products in the carousel</comment>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                </field>
                <field id="random_sort" translate="label" type="select" sortOrder="70" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Sort Order</label>
                    <comment>Sort Order of the products in the carousel.</comment>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\SortOrder</source_model>
                </field>
                <field id="max_items" translate="label" type="text" sortOrder="80" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Max Items</label>
                    <comment>The total number of products to be loaded in the carousel.</comment>
                </field>
                <field id="slide_by" translate="label" type="text" sortOrder="83" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Slide By</label>
                    <comment><![CDATA[ Insert how many items to slide at once. Default value: 1 <br> Note: On breakpoints the value will auto adjust to visible items. ]]></comment>
                    <validate>validate-number validate-greater-than-zero validate-no-empty</validate>
                </field>

                <!--Separator Slider-->

                <field id="separatorSlider" translate="label" type="text" sortOrder="85" showInDefault="1" showInWebsite="1" showInStore="1">
                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorslide</frontend_model>
                </field>
                <field id="loop" translate="label" type="select" sortOrder="140" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Loop</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>Inifnity loop. Duplicate last and first items to get loop illusion.</comment>
                </field>
                <field id="margin" translate="label" type="text" sortOrder="150" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Margin</label>
                    <comment>Set right margin for each item in carousel. Example: for a margin of 30px enter 30 in the field.</comment>
                </field>
                <field id="lazyLoad" translate="label" type="select" sortOrder="160" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>LazyLoad</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>Lazy Load delays loading of images. Images outside of viewport are not loaded until user scrolls to them.</comment>
                </field>
                <field id="autoplay" translate="label" type="select" sortOrder="170" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Autoplay</label>
                    <comment>Autoplay the carousel.</comment>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                </field>
                <field id="autoplayTimeout" translate="label" type="text" sortOrder="180" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>AutoplayTimeout</label>
                    <depends>
                        <field id="autoplay">1</field>
                    </depends>
                    <comment>Autoplay interval timeout. Set time between changing products (in milliseconds,
                        for Example: 4000, for 4 seconds))</comment>
                </field>
                <field id="autoplayHoverPause" translate="label" type="select" sortOrder="190" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>AutoplayHoverPause</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <depends>
                        <field id="autoplay">1</field>
                    </depends>
                    <comment>Set the autoplay to pause on mouse hover.</comment>
                </field>
                <field id="navSpeed" translate="label comment" type="text" sortOrder="191" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Next/Prev button Transition Speed</label>
                    <comment>Set the speed for the transition animation when clicking the Next/Prev buttons. Insert value in ms. Write “4000” for a 4 second timeout.</comment>
                </field>
                <field id="dotsSpeed" translate="label comment" type="text" sortOrder="192" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Dots Transition Speed</label>
                    <comment>Set the speed for the transition animation when clicking the Dots. Insert value in ms. Write “4000” for a 4 second timeout.</comment>
                </field>
                <field id="rtl" translate="label comment" type="select" sortOrder="193" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Direction Right To Left</label>
                    <comment>If True, each banner will slide from right to left.</comment>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                </field>
                <field id="nav_design" translate="label comment" type="select" sortOrder="194" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Prev/Next buttons design</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\PrevNextDesign</source_model>
                </field>
                <field id="nav_prev_label" translate="label comment" type="text" sortOrder="195" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Prev Label</label>
                    <comment>Insert custom label for  previous button. If empty, only arrows are displayed.</comment>
                    <depends>
                        <field id="nav_design">2</field>
                    </depends>
                </field>
                <field id="nav_next_label" translate="label comment" type="text" sortOrder="195" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Next Label</label>
                    <comment>Insert custom label for next button. If empty, only arrows are displayed.</comment>
                    <depends>
                        <field id="nav_design">2</field>
                    </depends>
                </field>

                <!--Separator Breakpoints-->

                <field id="Separatorbreakpoint" translate="label" type="text" sortOrder="195" showInDefault="1" showInWebsite="1" showInStore="1">
                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
                </field>

                <!--Separator Breakpoint 1-->
                <field id="s_1" translate="label" type="text" sortOrder="197" showInDefault="1" showInWebsite="1" showInStore="1">
                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
                </field>

                <field id="nav_brk1" translate="label" type="select" sortOrder="200" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Next/Prev Buttons</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, next/prev buttons are displayed.</comment>
                </field>
                <field id="dots_brk1" translate="label" type="select" sortOrder="205" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Dots</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, dots are displayed under carousel.</comment>
                </field>
                <field id="dotsEach_brk1" translate="label comment" type="select" sortOrder="206" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Show Dots for each Item</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, Show dots for each item.</comment>
                    <depends>
                        <field id="dots_brk1">1</field>
                    </depends>
                </field>
                <field id="items_brk1" translate="label" type="text" sortOrder="210" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Items</label>
                    <comment>The number of items you want to see on the screen. This value should be smaller than Max Items. </comment>
                </field>
                <field id="center_brk1" translate="label" type="select" sortOrder="220" showInDefault="1" showInWebsite="1" showInStore="1">
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <label>Center</label>
                    <comment>If True, carousel is centered on the screen. Works well even with an odd number of items. Carousel Breakpoint options overwrites this option. Please check below Breakpoint Carousel Options.</comment>
                </field>
                <field id="stagePadding_brk1" translate="label" type="text" sortOrder="230" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>StagePadding</label>
                    <depends>
                        <field id="center_brk1">0</field>
                    </depends>
                    <comment>Padding left and right on stage (can see neighbours).</comment>
                </field>

                <!--Separatorbreakpoint 2-->
                <field id="s_2" translate="label" type="text" sortOrder="235" showInDefault="1" showInWebsite="1" showInStore="1">
                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
                </field>

                <field id="nav_brk2" translate="label" type="select" sortOrder="240" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Next/Prev Buttons</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, next/prev buttons are displayed.</comment>
                </field>
                <field id="dots_brk2" translate="label" type="select" sortOrder="245" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Dots</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, dots are displayed under carousel.</comment>
                </field>
                <field id="dotsEach_brk2" translate="label comment" type="select" sortOrder="246" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Show Dots for each Item</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, Show dots for each item.</comment>
                    <depends>
                        <field id="dots_brk2">1</field>
                    </depends>
                </field>
                <field id="items_brk2" translate="label" type="text" sortOrder="250" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Items</label>
                    <comment>The number of items you want to see on the screen. This value should be smaller than Max Items. </comment>
                </field>
                <field id="center_brk2" translate="label" type="select" sortOrder="260" showInDefault="1" showInWebsite="1" showInStore="1">
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <label>Center</label>
                    <comment>If True, carousel is centered on the screen. Works well even with an odd number of items. Carousel Breakpoint options overwrites this option. Please check below Breakpoint Carousel Options.</comment>
                </field>
                <field id="stagePadding_brk2" translate="label" type="text" sortOrder="270" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>StagePadding</label>
                    <depends>
                        <field id="center_brk2">0</field>
                    </depends>
                    <comment>Padding left and right on stage (can see neighbours).</comment>
                </field>

                <!--Separatorbreakpoint 3-->
                <field id="s_3" translate="label" type="text" sortOrder="275" showInDefault="1" showInWebsite="1" showInStore="1">
                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
                </field>

                <field id="nav_brk3" translate="label" type="select" sortOrder="280" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Next/Prev Buttons</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, next/prev buttons are displayed.</comment>
                </field>
                <field id="dots_brk3" translate="label" type="select" sortOrder="285" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Dots</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, dots are displayed under carousel.</comment>
                </field>
                <field id="dotsEach_brk3" translate="label comment" type="select" sortOrder="286" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Show Dots for each Item</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, Show dots for each item.</comment>
                    <depends>
                        <field id="dots_brk3">1</field>
                    </depends>
                </field>
                <field id="items_brk3" translate="label" type="text" sortOrder="290" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Items</label>
                    <comment>The number of items you want to see on the screen. This value should be smaller than Max Items. </comment>
                </field>
                <field id="center_brk3" translate="label" type="select" sortOrder="300" showInDefault="1" showInWebsite="1" showInStore="1">
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <label>Center</label>
                    <comment>If True, carousel is centered on the screen. Works well even with an odd number of items. Carousel Breakpoint options overwrites this option. Please check below Breakpoint Carousel Options.</comment>
                </field>
                <field id="stagePadding_brk3" translate="label" type="text" sortOrder="310" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>StagePadding</label>
                    <depends>
                        <field id="center_brk3">0</field>
                    </depends>
                    <comment>Padding left and right on stage (can see neighbours).</comment>
                </field>

                <!--Separatorbreakpoint 3-->
                <field id="s_4" translate="label" type="text" sortOrder="315" showInDefault="1" showInWebsite="1" showInStore="1">
                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
                </field>

                <field id="nav_brk4" translate="label" type="select" sortOrder="320" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Next/Prev Buttons</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, next/prev buttons are displayed.</comment>
                </field>
                <field id="dots_brk4" translate="label" type="select" sortOrder="325" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Dots</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, dots are displayed under carousel.</comment>
                </field>
                <field id="dotsEach_brk4" translate="label comment" type="select" sortOrder="326" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Show Dots for each Item</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, Show dots for each item.</comment>
                    <depends>
                        <field id="dots_brk4">1</field>
                    </depends>
                </field>
                <field id="items_brk4" translate="label" type="text" sortOrder="330" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Items</label>
                    <comment>The number of items you want to see on the screen. This value should be smaller than Max Items. </comment>
                </field>
                <field id="center_brk4" translate="label" type="select" sortOrder="340" showInDefault="1" showInWebsite="1" showInStore="1">
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <label>Center</label>
                    <comment>If True, carousel is centered on the screen. Works well even with an odd number of items. Carousel Breakpoint options overwrites this option. Please check below Breakpoint Carousel Options.</comment>
                </field>
                <field id="stagePadding_brk4" translate="label" type="text" sortOrder="350" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>StagePadding</label>
                    <depends>
                        <field id="center_brk4">0</field>
                    </depends>
                    <comment>Padding left and right on stage (can see neighbours).</comment>
                </field>
            </group>

            <!--Sell Products Section-->

            <group id="sell_products" translate="label" type="text" sortOrder="40" showInDefault="1" showInWebsite="1" showInStore="1">
                <label>Sale Products Carousel Settings</label>

                <field id="status" translate="label" type="select" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Enable Sale Products Carousel</label>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                    <comment>In order for carousel to be displayed, make sure you have products defined as "Sale" and the carousel is inserted in your page/block. Insert the carousel by
                        following the documentation.
                    </comment>
                    <tooltip>
                        Sale Products Carousel - will be populated with products defined as Sale in your magento catalog.
                    </tooltip>
                </field>
                <field id="title" translate="label" type="text" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Title</label>
                    <comment>Insert custom title to be displayed on the carousel. For no title leave field empty.</comment>
                </field>
                <field id="show_price" translate="label" type="select" sortOrder="30" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Show Price</label>
                    <comment>Show/Hide the product price for products in the carousel</comment>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                </field>
                <field id="show_addto" translate="label" type="select" sortOrder="40" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Show Add To Cart</label>
                    <comment>Show/Hide ‘Add to cart’ button for products in the carousel.</comment>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                </field>
                <field id="show_wishlist" translate="label" type="select" sortOrder="50" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Show Wishlist</label>
                    <comment>Show/Hide wishlist icon for products in the carousel.</comment>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                </field>
                <field id="show_compare" translate="label" type="select" sortOrder="60" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Show Compare</label>
                    <comment>Show/Hide Compare icon for products in the carousel</comment>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                </field>
                <field id="show_reviews_ratings" translate="label comment" type="select" sortOrder="65" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Show Reviews and Ratings</label>
                    <comment>Show/Hide Reviews and Ratings for products in the carousel</comment>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                </field>
                <field id="random_sort" translate="label" type="select" sortOrder="70" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Sort Order</label>
                    <comment>Sort Order of the products in the carousel.</comment>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\SortOrder</source_model>
                </field>
                <field id="max_items" translate="label" type="text" sortOrder="80" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Max Items</label>
                    <comment>The total number of products to be loaded in the carousel.</comment>
                </field>
                <field id="slide_by" translate="label" type="text" sortOrder="83" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Slide By</label>
                    <comment><![CDATA[ Insert how many items to slide at once. Default value: 1 <br> Note: On breakpoints the value will auto adjust to visible items. ]]></comment>
                    <validate>validate-number validate-greater-than-zero validate-no-empty</validate>
                </field>

                <!--Separator Slider-->

                <field id="separatorSlider" translate="label" type="text" sortOrder="85" showInDefault="1" showInWebsite="1" showInStore="1">
                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorslide</frontend_model>
                </field>
                <field id="loop" translate="label" type="select" sortOrder="140" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Loop</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>Inifnity loop. Duplicate last and first items to get loop illusion.</comment>
                </field>
                <field id="margin" translate="label" type="text" sortOrder="150" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Margin</label>
                    <comment>Set right margin for each item in carousel. Example: for a margin of 30px enter 30 in the field.</comment>
                </field>
                <field id="lazyLoad" translate="label" type="select" sortOrder="160" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>LazyLoad</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>Lazy Load delays loading of images. Images outside of viewport are not loaded until user scrolls to them.</comment>
                </field>
                <field id="autoplay" translate="label" type="select" sortOrder="170" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Autoplay</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                </field>
                <field id="autoplayTimeout" translate="label" type="text" sortOrder="180" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>AutoplayTimeout</label>
                    <depends>
                        <field id="autoplay">1</field>
                    </depends>
                    <comment>Autoplay interval timeout. Set time between changing products (in milliseconds, for Example: 4000, for 4 seconds))</comment>
                </field>
                <field id="autoplayHoverPause" translate="label" type="select" sortOrder="190" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>AutoplayHoverPause</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <depends>
                        <field id="autoplay">1</field>
                    </depends>
                    <comment>Set the autoplay to pause on mouse hover.</comment>
                </field>
                <field id="navSpeed" translate="label comment" type="text" sortOrder="191" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Next/Prev button Transition Speed</label>
                    <comment>Set the speed for the transition animation when clicking the Next/Prev buttons. Insert value in ms. Write “4000” for a 4 second timeout.</comment>
                </field>
                <field id="dotsSpeed" translate="label comment" type="text" sortOrder="192" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Dots Transition Speed</label>
                    <comment>Set the speed for the transition animation when clicking the Dots. Insert value in ms. Write “4000” for a 4 second timeout.</comment>
                </field>
                <field id="rtl" translate="label comment" type="select" sortOrder="193" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Direction Right To Left</label>
                    <comment>If True, each banner will slide from right to left.</comment>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                </field>
                <field id="nav_design" translate="label comment" type="select" sortOrder="194" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Prev/Next buttons design</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\PrevNextDesign</source_model>
                </field>
                <field id="nav_prev_label" translate="label comment" type="text" sortOrder="195" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Prev Label</label>
                    <comment>Insert custom label for  previous button. If empty, only arrows are displayed.</comment>
                    <depends>
                        <field id="nav_design">2</field>
                    </depends>
                </field>
                <field id="nav_next_label" translate="label comment" type="text" sortOrder="195" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Next Label</label>
                    <comment>Insert custom label for next button. If empty, only arrows are displayed.</comment>
                    <depends>
                        <field id="nav_design">2</field>
                    </depends>
                </field>

                <!--Separator Breakpoints-->

                <field id="Separatorbreakpoint" translate="label" type="text" sortOrder="195" showInDefault="1" showInWebsite="1" showInStore="1">
                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
                </field>

                <!--Separator Breakpoint 1-->
                <field id="s_1" translate="label" type="text" sortOrder="197" showInDefault="1" showInWebsite="1" showInStore="1">
                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
                </field>

                <field id="nav_brk1" translate="label" type="select" sortOrder="200" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Next/Prev Buttons</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, next/prev buttons are displayed.</comment>
                </field>
                <field id="dots_brk1" translate="label" type="select" sortOrder="205" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Dots</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, dots are displayed under carousel.</comment>
                </field>
                <field id="dotsEach_brk1" translate="label comment" type="select" sortOrder="206" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Show Dots for each Item</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, Show dots for each item.</comment>
                    <depends>
                        <field id="dots_brk1">1</field>
                    </depends>
                </field>
                <field id="items_brk1" translate="label" type="text" sortOrder="210" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Items</label>
                    <comment>The number of items you want to see on the screen. This value should be smaller than Max Items. </comment>
                </field>
                <field id="center_brk1" translate="label" type="select" sortOrder="220" showInDefault="1" showInWebsite="1" showInStore="1">
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <label>Center</label>
                    <comment>If True, carousel is centered on the screen. Works well even with an odd number of items.</comment>
                </field>
                <field id="stagePadding_brk1" translate="label" type="text" sortOrder="230" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>StagePadding</label>
                    <depends>
                        <field id="center_brk1">0</field>
                    </depends>
                    <comment>Padding left and right on stage (can see neighbours).</comment>
                </field>

                <!--Separatorbreakpoint 2-->
                <field id="s_2" translate="label" type="text" sortOrder="235" showInDefault="1" showInWebsite="1" showInStore="1">
                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
                </field>

                <field id="nav_brk2" translate="label" type="select" sortOrder="240" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Next/Prev Buttons</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, next/prev buttons are displayed.</comment>
                </field>
                <field id="dots_brk2" translate="label" type="select" sortOrder="245" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Dots</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, dots are displayed under carousel.</comment>
                </field>
                <field id="dotsEach_brk2" translate="label comment" type="select" sortOrder="246" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Show Dots for each Item</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, Show dots for each item.</comment>
                    <depends>
                        <field id="dots_brk2">1</field>
                    </depends>
                </field>
                <field id="items_brk2" translate="label" type="text" sortOrder="250" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Items</label>
                    <comment>The number of items you want to see on the screen. This value should be smaller than Max Items. </comment>
                </field>
                <field id="center_brk2" translate="label" type="select" sortOrder="260" showInDefault="1" showInWebsite="1" showInStore="1">
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <label>Center</label>
                    <comment>If True, carousel is centered on the screen. Works well even with an odd number of items.</comment>
                </field>
                <field id="stagePadding_brk2" translate="label" type="text" sortOrder="270" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>StagePadding</label>
                    <depends>
                        <field id="center_brk2">0</field>
                    </depends>
                    <comment>Padding left and right on stage (can see neighbours).</comment>
                </field>

                <!--Separatorbreakpoint 3-->
                <field id="s_3" translate="label" type="text" sortOrder="275" showInDefault="1" showInWebsite="1" showInStore="1">
                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
                </field>

                <field id="nav_brk3" translate="label" type="select" sortOrder="280" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Next/Prev Buttons</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, next/prev buttons are displayed.</comment>
                </field>
                <field id="dots_brk3" translate="label" type="select" sortOrder="285" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Dots</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, dots are displayed under carousel.</comment>
                </field>
                <field id="dotsEach_brk3" translate="label comment" type="select" sortOrder="286" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Show Dots for each Item</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, Show dots for each item.</comment>
                    <depends>
                        <field id="dots_brk3">1</field>
                    </depends>
                </field>
                <field id="items_brk3" translate="label" type="text" sortOrder="290" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Items</label>
                    <comment>The number of items you want to see on the screen. This value should be smaller than Max Items. </comment>
                </field>
                <field id="center_brk3" translate="label" type="select" sortOrder="300" showInDefault="1" showInWebsite="1" showInStore="1">
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <label>Center</label>
                    <comment>If True, carousel is centered on the screen. Works well even with an odd number of items.</comment>
                </field>
                <field id="stagePadding_brk3" translate="label" type="text" sortOrder="310" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>StagePadding</label>
                    <depends>
                        <field id="center_brk3">0</field>
                    </depends>
                    <comment>Padding left and right on stage (can see neighbours).</comment>
                </field>

                <!--Separatorbreakpoint 3-->
                <field id="s_4" translate="label" type="text" sortOrder="315" showInDefault="1" showInWebsite="1" showInStore="1">
                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
                </field>

                <field id="nav_brk4" translate="label" type="select" sortOrder="320" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Next/Prev Buttons</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, next/prev buttons are displayed.</comment>
                </field>
                <field id="dots_brk4" translate="label" type="select" sortOrder="325" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Dots</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, dots are displayed under carousel.</comment>
                </field>
                <field id="dotsEach_brk4" translate="label comment" type="select" sortOrder="326" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Show Dots for each Item</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, Show dots for each item.</comment>
                    <depends>
                        <field id="dots_brk4">1</field>
                    </depends>
                </field>
                <field id="items_brk4" translate="label" type="text" sortOrder="330" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Items</label>
                    <comment>The number of items you want to see on the screen. This value should be smaller than Max Items. </comment>
                </field>
                <field id="center_brk4" translate="label" type="select" sortOrder="340" showInDefault="1" showInWebsite="1" showInStore="1">
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <label>Center</label>
                    <comment>If True, carousel is centered on the screen. Works well even with an odd number of items.</comment>
                </field>
                <field id="stagePadding_brk4" translate="label" type="text" sortOrder="350" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>StagePadding</label>
                    <depends>
                        <field id="center_brk4">0</field>
                    </depends>
                    <comment>Padding left and right on stage (can see neighbours).</comment>
                </field>
            </group>

            <!--Recently Products Section-->

            <group id="recently_viewed" translate="label" type="text" sortOrder="50" showInDefault="1" showInWebsite="1" showInStore="1">
                <label>Recently Viewed Products Carousel Settings</label>

                <field id="status" translate="label" type="select" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Enable Recently Viewed Products Carousel</label>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                    <comment>In order for carousel to be displayed, users must be logged in and visited at least
                        one product, and the carousel is inserted in your page/block. Insert the carousel by following
                        the documentation.
                    </comment>
                    <tooltip>Recently Viewed Products Carousel - will be dynamically populated with products that users
                        visit in your store while they are logged in
                    </tooltip>
                </field>
                <field id="title" translate="label" type="text" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Title</label>
                    <comment>Insert custom title to be displayed on the carousel. For no title leave field empty.</comment>
                </field>
                <field id="show_price" translate="label" type="select" sortOrder="30" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Show Price</label>
                    <comment>Show/Hide the product price for products in the carousel</comment>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                </field>
                <field id="show_addto" translate="label" type="select" sortOrder="40" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Show Add To Cart</label>
                    <comment>Show/Hide ‘Add to cart’ button for products in the carousel.</comment>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                </field>
                <field id="show_wishlist" translate="label" type="select" sortOrder="50" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Show Wishlist</label>
                    <comment>Show/Hide wishlist icon for products in the carousel.</comment>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                </field>
                <field id="show_compare" translate="label" type="select" sortOrder="60" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Show Compare</label>
                    <comment>Show/Hide Compare icon for products in the carousel</comment>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                </field>
                <field id="show_reviews_ratings" translate="label comment" type="select" sortOrder="65" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Show Reviews and Ratings</label>
                    <comment>Show/Hide Reviews and Ratings for products in the carousel</comment>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                </field>
                <field id="random_sort" translate="label" type="select" sortOrder="70" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Sort Order</label>
                    <comment>Sort Order of the products in the carousel.</comment>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\SortOrderRecentlyViewed</source_model>
                </field>
                <field id="max_items" translate="label" type="text" sortOrder="80" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Max Items</label>
                    <comment>The total number of products to be loaded in the carousel.</comment>
                </field>
                <field id="slide_by" translate="label" type="text" sortOrder="83" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Slide By</label>
                    <comment><![CDATA[ Insert how many items to slide at once. Default value: 1 <br> Note: On breakpoints the value will auto adjust to visible items. ]]></comment>
                    <validate>validate-number validate-greater-than-zero validate-no-empty</validate>
                </field>
                <!--Separator Slider-->

                <field id="separatorSlider" translate="label" type="text" sortOrder="85" showInDefault="1" showInWebsite="1" showInStore="1">
                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorslide</frontend_model>
                </field>
                <field id="loop" translate="label" type="select" sortOrder="140" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Loop</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>Inifnity loop. Duplicate last and first items to get loop illusion.</comment>
                </field>
                <field id="margin" translate="label" type="text" sortOrder="150" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Margin</label>
                    <comment>Set right margin for each item in carousel. Example: for a margin of 30px enter 30 in the field.</comment>
                </field>
                <field id="lazyLoad" translate="label" type="select" sortOrder="160" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>LazyLoad</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>Lazy Load delays loading of images. Images outside of viewport are not loaded until user scrolls to them.</comment>
                </field>
                <field id="autoplay" translate="label" type="select" sortOrder="170" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Autoplay</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                </field>
                <field id="autoplayTimeout" translate="label" type="text" sortOrder="180" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>AutoplayTimeout</label>
                    <depends>
                        <field id="autoplay">1</field>
                    </depends>
                    <comment>Autoplay interval timeout. Set time between changing products (in milliseconds, for Example: 4000, for 4 seconds))</comment>
                </field>
                <field id="autoplayHoverPause" translate="label" type="select" sortOrder="190" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>AutoplayHoverPause</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <depends>
                        <field id="autoplay">1</field>
                    </depends>
                    <comment>Set the autoplay to pause on mouse hover.</comment>
                </field>
                <field id="navSpeed" translate="label comment" type="text" sortOrder="191" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Next/Prev button Transition Speed</label>
                    <comment>Set the speed for the transition animation when clicking the Next/Prev buttons. Insert value in ms. Write “4000” for a 4 second timeout.</comment>
                </field>
                <field id="dotsSpeed" translate="label comment" type="text" sortOrder="192" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Dots Transition Speed</label>
                    <comment>Set the speed for the transition animation when clicking the Dots. Insert value in ms. Write “4000” for a 4 second timeout.</comment>
                </field>
                <field id="rtl" translate="label comment" type="select" sortOrder="193" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Direction Right To Left</label>
                    <comment>If True, each banner will slide from right to left.</comment>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                </field>
                <field id="nav_design" translate="label comment" type="select" sortOrder="194" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Prev/Next buttons design</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\PrevNextDesign</source_model>
                </field>
                <field id="nav_prev_label" translate="label comment" type="text" sortOrder="195" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Prev Label</label>
                    <comment>Insert custom label for  previous button. If empty, only arrows are displayed.</comment>
                    <depends>
                        <field id="nav_design">2</field>
                    </depends>
                </field>
                <field id="nav_next_label" translate="label comment" type="text" sortOrder="195" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Next Label</label>
                    <comment>Insert custom label for next button. If empty, only arrows are displayed.</comment>
                    <depends>
                        <field id="nav_design">2</field>
                    </depends>
                </field>

                <!--Separator Breakpoints-->

                <field id="Separatorbreakpoint" translate="label" type="text" sortOrder="195" showInDefault="1" showInWebsite="1" showInStore="1">
                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
                </field>

                <!--Separator Breakpoint 1-->
                <field id="s_1" translate="label" type="text" sortOrder="197" showInDefault="1" showInWebsite="1" showInStore="1">
                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
                </field>

                <field id="nav_brk1" translate="label" type="select" sortOrder="200" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Next/Prev Buttons</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, next/prev buttons are displayed.</comment>
                </field>
                <field id="dots_brk1" translate="label" type="select" sortOrder="205" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Dots</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, dots are displayed under carousel.</comment>
                </field>
                <field id="dotsEach_brk1" translate="label comment" type="select" sortOrder="206" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Show Dots for each Item</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, Show dots for each item.</comment>
                    <depends>
                        <field id="dots_brk1">1</field>
                    </depends>
                </field>
                <field id="items_brk1" translate="label" type="text" sortOrder="210" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Items</label>
                    <comment>The number of items you want to see on the screen. This value should be smaller than Max Items. </comment>
                </field>
                <field id="center_brk1" translate="label" type="select" sortOrder="220" showInDefault="1" showInWebsite="1" showInStore="1">
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <label>Center</label>
                    <comment>If True, carousel is centered on the screen. Works well even with an odd number of items.</comment>
                </field>
                <field id="stagePadding_brk1" translate="label" type="text" sortOrder="230" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>StagePadding</label>
                    <depends>
                        <field id="center_brk1">0</field>
                    </depends>
                    <comment>Padding left and right on stage (can see neighbours).</comment>
                </field>

                <!--Separatorbreakpoint 2-->
                <field id="s_2" translate="label" type="text" sortOrder="235" showInDefault="1" showInWebsite="1" showInStore="1">
                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
                </field>

                <field id="nav_brk2" translate="label" type="select" sortOrder="240" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Next/Prev Buttons</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, next/prev buttons are displayed.</comment>
                </field>
                <field id="dots_brk2" translate="label" type="select" sortOrder="245" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Dots</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, dots are displayed under carousel.</comment>
                </field>
                <field id="dotsEach_brk2" translate="label comment" type="select" sortOrder="246" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Show Dots for each Item</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, Show dots for each item.</comment>
                    <depends>
                        <field id="dots_brk2">1</field>
                    </depends>
                </field>
                <field id="items_brk2" translate="label" type="text" sortOrder="250" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Items</label>
                    <comment>The number of items you want to see on the screen. This value should be smaller than Max Items. </comment>
                </field>
                <field id="center_brk2" translate="label" type="select" sortOrder="260" showInDefault="1" showInWebsite="1" showInStore="1">
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <label>Center</label>
                    <comment>If True, carousel is centered on the screen. Works well even with an odd number of items.</comment>
                </field>
                <field id="stagePadding_brk2" translate="label" type="text" sortOrder="270" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>StagePadding</label>
                    <depends>
                        <field id="center_brk2">0</field>
                    </depends>
                    <comment>Padding left and right on stage (can see neighbours).</comment>
                </field>

                <!--Separatorbreakpoint 3-->
                <field id="s_3" translate="label" type="text" sortOrder="275" showInDefault="1" showInWebsite="1" showInStore="1">
                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
                </field>

                <field id="nav_brk3" translate="label" type="select" sortOrder="280" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Next/Prev Buttons</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, next/prev buttons are displayed.</comment>
                </field>
                <field id="dots_brk3" translate="label" type="select" sortOrder="285" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Dots</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, dots are displayed under carousel.</comment>
                </field>
                <field id="dotsEach_brk3" translate="label comment" type="select" sortOrder="286" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Show Dots for each Item</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, Show dots for each item.</comment>
                    <depends>
                        <field id="dots_brk3">1</field>
                    </depends>
                </field>
                <field id="items_brk3" translate="label" type="text" sortOrder="290" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Items</label>
                    <comment>The number of items you want to see on the screen. This value should be smaller than Max Items. </comment>
                </field>
                <field id="center_brk3" translate="label" type="select" sortOrder="300" showInDefault="1" showInWebsite="1" showInStore="1">
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <label>Center</label>
                    <comment>If True, carousel is centered on the screen. Works well even with an odd number of items.</comment>
                </field>
                <field id="stagePadding_brk3" translate="label" type="text" sortOrder="310" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>StagePadding</label>
                    <depends>
                        <field id="center_brk3">0</field>
                    </depends>
                    <comment>Padding left and right on stage (can see neighbours).</comment>
                </field>

                <!--Separatorbreakpoint 4-->
                <field id="s_4" translate="label" type="text" sortOrder="315" showInDefault="1" showInWebsite="1" showInStore="1">
                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
                </field>

                <field id="nav_brk4" translate="label" type="select" sortOrder="320" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Next/Prev Buttons</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, next/prev buttons are displayed.</comment>
                </field>
                <field id="dots_brk4" translate="label" type="select" sortOrder="325" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Dots</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, dots are displayed under carousel.</comment>
                </field>
                <field id="dotsEach_brk4" translate="label comment" type="select" sortOrder="326" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Show Dots for each Item</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, Show dots for each item.</comment>
                    <depends>
                        <field id="dots_brk4">1</field>
                    </depends>
                </field>
                <field id="items_brk4" translate="label" type="text" sortOrder="330" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Items</label>
                    <comment>The number of items you want to see on the screen. This value should be smaller than Max Items. </comment>
                </field>
                <field id="center_brk4" translate="label" type="select" sortOrder="340" showInDefault="1" showInWebsite="1" showInStore="1">
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <label>Center</label>
                    <comment>If True, carousel is centered on the screen. Works well even with an odd number of items.</comment>
                </field>
                <field id="stagePadding_brk4" translate="label" type="text" sortOrder="350" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>StagePadding</label>
                    <depends>
                        <field id="center_brk4">0</field>
                    </depends>
                    <comment>Padding left and right on stage (can see neighbours).</comment>
                </field>
            </group>

            <!--Related Products Section-->

            <group id="related_products" translate="label" type="text" sortOrder="60" showInDefault="1" showInWebsite="1" showInStore="1">
                <label>Related Products Carousel Settings</label>

                <field id="status" translate="label" type="select" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Enable Related Products Carousel</label>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                    <comment>If Enabled, the products will be displayed on product page in a carousel instead of
                        default product grid. Make sure you have defined Related Products in your catalog.
                    </comment>
                    <tooltip>
                        Related Products Carousel - makes sense only on product page, will be populated with related
                        products defined in magento catalog for each specific product.
                    </tooltip>
                </field>
                <field id="title" translate="label" type="text" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Title</label>
                    <comment>Insert custom title to be displayed on the carousel. For no title leave field empty.</comment>
                </field>

                <!--Separator Slider-->

                <field id="separatorSlider" translate="label" type="text" sortOrder="25" showInDefault="1" showInWebsite="1" showInStore="1">
                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorslide</frontend_model>
                </field>
                <field id="loop" translate="label" type="select" sortOrder="80" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Loop</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>Inifnity loop. Duplicate last and first items to get loop illusion.</comment>
                </field>
                <field id="margin" translate="label" type="text" sortOrder="90" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Margin</label>
                    <comment>Set right margin for each item in carousel. Example: for a margin of 30px enter 30 in the field.</comment>
                </field>
                <field id="slide_by" translate="label" type="text" sortOrder="95" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Slide By</label>
                    <comment><![CDATA[ Insert how many items to slide at once. Default value: 1 <br> Note: On breakpoints the value will auto adjust to visible items. ]]></comment>
                    <validate>validate-number validate-greater-than-zero validate-no-empty</validate>
                </field>
                <field id="lazyLoad" translate="label" type="select" sortOrder="100" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>LazyLoad</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>Lazy Load delays loading of images. Images outside of viewport are not loaded until user scrolls to them.</comment>
                </field>
                <field id="autoplay" translate="label" type="select" sortOrder="110" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Autoplay</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                </field>
                <field id="autoplayTimeout" translate="label" type="text" sortOrder="120" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>AutoplayTimeout</label>
                    <depends>
                        <field id="autoplay">1</field>
                    </depends>
                    <comment>Autoplay interval timeout. Set time between changing products (in milliseconds, for Example: 4000, for 4 seconds))</comment>
                </field>
                <field id="autoplayHoverPause" translate="label" type="select" sortOrder="130" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>AutoplayHoverPause</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <depends>
                        <field id="autoplay">1</field>
                    </depends>
                    <comment>Set the autoplay to pause on mouse hover.</comment>
                </field>
                <field id="navSpeed" translate="label comment" type="text" sortOrder="131" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Next/Prev button Transition Speed</label>
                    <comment>Set the speed for the transition animation when clicking the Next/Prev buttons. Insert value in ms. Write “4000” for a 4 second timeout.</comment>
                </field>
                <field id="dotsSpeed" translate="label comment" type="text" sortOrder="132" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Dots Transition Speed</label>
                    <comment>Set the speed for the transition animation when clicking the Dots. Insert value in ms. Write “4000” for a 4 second timeout.</comment>
                </field>
                <field id="rtl" translate="label comment" type="select" sortOrder="133" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Direction Right To Left</label>
                    <comment>If True, each banner will slide from right to left.</comment>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                </field>
                <field id="nav_design" translate="label comment" type="select" sortOrder="134" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Prev/Next buttons design</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\PrevNextDesign</source_model>
                </field>
                <field id="nav_prev_label" translate="label comment" type="text" sortOrder="135" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Prev Label</label>
                    <comment>Insert custom label for  previous button. If empty, only arrows are displayed.</comment>
                    <depends>
                        <field id="nav_design">2</field>
                    </depends>
                </field>
                <field id="nav_next_label" translate="label comment" type="text" sortOrder="135" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Next Label</label>
                    <comment>Insert custom label for next button. If empty, only arrows are displayed.</comment>
                    <depends>
                        <field id="nav_design">2</field>
                    </depends>
                </field>

                <!--Separator Breakpoints-->

                <field id="Separatorbreakpoint" translate="label" type="text" sortOrder="135" showInDefault="1" showInWebsite="1" showInStore="1">
                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
                </field>

                <!--Separator Breakpoint 1-->
                <field id="s_1" translate="label" type="text" sortOrder="137" showInDefault="1" showInWebsite="1" showInStore="1">
                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
                </field>

                <field id="nav_brk1" translate="label" type="select" sortOrder="140" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Next/Prev Buttons</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, next/prev buttons are displayed.</comment>
                </field>
                <field id="dots_brk1" translate="label" type="select" sortOrder="145" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Dots</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, dots are displayed under carousel.</comment>
                </field>
                <field id="dotsEach_brk1" translate="label comment" type="select" sortOrder="146" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Show Dots for each Item</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, Show dots for each item.</comment>
                    <depends>
                        <field id="dots_brk1">1</field>
                    </depends>
                </field>
                <field id="items_brk1" translate="label" type="text" sortOrder="150" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Items</label>
                    <comment>The number of items you want to see on the screen. This value should be smaller than Max Items. </comment>
                </field>
                <field id="center_brk1" translate="label" type="select" sortOrder="160" showInDefault="1" showInWebsite="1" showInStore="1">
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <label>Center</label>
                    <comment>If True, carousel is centered on the screen. Works well even with an odd number of items.</comment>
                </field>
                <field id="stagePadding_brk1" translate="label" type="text" sortOrder="170" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>StagePadding</label>
                    <depends>
                        <field id="center_brk1">0</field>
                    </depends>
                    <comment>Padding left and right on stage (can see neighbours).</comment>
                </field>

                <!--Separatorbreakpoint 2-->
                <field id="s_2" translate="label" type="text" sortOrder="175" showInDefault="1" showInWebsite="1" showInStore="1">
                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
                </field>

                <field id="nav_brk2" translate="label" type="select" sortOrder="180" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Next/Prev Buttons</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, next/prev buttons are displayed.</comment>
                </field>
                <field id="dots_brk2" translate="label" type="select" sortOrder="185" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Dots</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, dots are displayed under carousel.</comment>
                </field>
                <field id="dotsEach_brk2" translate="label comment" type="select" sortOrder="186" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Show Dots for each Item</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, Show dots for each item.</comment>
                    <depends>
                        <field id="dots_brk2">1</field>
                    </depends>
                </field>
                <field id="items_brk2" translate="label" type="text" sortOrder="190" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Items</label>
                    <comment>The number of items you want to see on the screen. This value should be smaller than Max Items. </comment>
                </field>
                <field id="center_brk2" translate="label" type="select" sortOrder="200" showInDefault="1" showInWebsite="1" showInStore="1">
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <label>Center</label>
                    <comment>If True, carousel is centered on the screen. Works well even with an odd number of items.</comment>
                </field>
                <field id="stagePadding_brk2" translate="label" type="text" sortOrder="210" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>StagePadding</label>
                    <depends>
                        <field id="center_brk2">0</field>
                    </depends>
                    <comment>Padding left and right on stage (can see neighbours).</comment>
                </field>

                <!--Separatorbreakpoint 3-->
                <field id="s_3" translate="label" type="text" sortOrder="215" showInDefault="1" showInWebsite="1" showInStore="1">
                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
                </field>

                <field id="nav_brk3" translate="label" type="select" sortOrder="220" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Next/Prev Buttons</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, next/prev buttons are displayed.</comment>
                </field>
                <field id="dots_brk3" translate="label" type="select" sortOrder="225" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Dots</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, dots are displayed under carousel.</comment>
                </field>
                <field id="dotsEach_brk3" translate="label comment" type="select" sortOrder="226" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Show Dots for each Item</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, Show dots for each item.</comment>
                    <depends>
                        <field id="dots_brk3">1</field>
                    </depends>
                </field>
                <field id="items_brk3" translate="label" type="text" sortOrder="230" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Items</label>
                    <comment>The number of items you want to see on the screen. This value should be smaller than Max Items. </comment>
                </field>
                <field id="center_brk3" translate="label" type="select" sortOrder="240" showInDefault="1" showInWebsite="1" showInStore="1">
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <label>Center</label>
                    <comment>If True, carousel is centered on the screen. Works well even with an odd number of items.</comment>
                </field>
                <field id="stagePadding_brk3" translate="label" type="text" sortOrder="250" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>StagePadding</label>
                    <depends>
                        <field id="center_brk3">0</field>
                    </depends>
                    <comment>Padding left and right on stage (can see neighbours).</comment>
                </field>

                <!--Separatorbreakpoint 3-->
                <field id="s_4" translate="label" type="text" sortOrder="255" showInDefault="1" showInWebsite="1" showInStore="1">
                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
                </field>

                <field id="nav_brk4" translate="label" type="select" sortOrder="260" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Next/Prev Buttons</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, next/prev buttons are displayed.</comment>
                </field>
                <field id="dots_brk4" translate="label" type="select" sortOrder="265" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Dots</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, dots are displayed under carousel.</comment>
                </field>
                <field id="dotsEach_brk4" translate="label comment" type="select" sortOrder="266" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Show Dots for each Item</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, Show dots for each item.</comment>
                    <depends>
                        <field id="dots_brk4">1</field>
                    </depends>
                </field>
                <field id="items_brk4" translate="label" type="text" sortOrder="270" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Items</label>
                    <comment>The number of items you want to see on the screen. This value should be smaller than Max Items. </comment>
                </field>
                <field id="center_brk4" translate="label" type="select" sortOrder="280" showInDefault="1" showInWebsite="1" showInStore="1">
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <label>Center</label>
                    <comment>If True, carousel is centered on the screen. Works well even with an odd number of items.</comment>
                </field>
                <field id="stagePadding_brk4" translate="label" type="text" sortOrder="290" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>StagePadding</label>
                    <depends>
                        <field id="center_brk4">0</field>
                    </depends>
                    <comment>Padding left and right on stage (can see neighbours).</comment>
                </field>
            </group>

            <!--Up-sells Products Section-->

            <group id="upsell_products" translate="label" type="text" sortOrder="70" showInDefault="1" showInWebsite="1" showInStore="1">
                <label>Up-Sells Products Carousel Settings</label>

                <field id="status" translate="label" type="select" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Enable Up-Sells Products Carousel</label>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                    <comment>If Enabled, the products will be displayed on product page in a carousel instead of
                        default product grid. Make sure you have defined Up-Sells Products in your catalog.
                    </comment>
                    <tooltip>
                        Note If no products are available to populate a carousel then the carousel will not be displayed in frontend
                    </tooltip>
                </field>
                <field id="title" translate="label" type="text" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Title</label>
                    <comment>Insert custom title to be displayed on the carousel. For no title leave field empty.</comment>
                </field>

                <!--Separator Slider-->

                <field id="separatorSlider" translate="label" type="text" sortOrder="25" showInDefault="1" showInWebsite="1" showInStore="1">
                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorslide</frontend_model>
                </field>
                <field id="loop" translate="label" type="select" sortOrder="80" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Loop</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>Inifnity loop. Duplicate last and first items to get loop illusion.</comment>
                </field>
                <field id="margin" translate="label" type="text" sortOrder="90" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Margin</label>
                    <comment>Set right margin for each item in carousel. Example: for a margin of 30px enter 30 in the field.</comment>
                </field>
                <field id="slide_by" translate="label" type="text" sortOrder="95" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Slide By</label>
                    <comment><![CDATA[ Insert how many items to slide at once. Default value: 1 <br> Note: On breakpoints the value will auto adjust to visible items. ]]></comment>
                    <validate>validate-number validate-greater-than-zero validate-no-empty</validate>
                </field>
                <field id="lazyLoad" translate="label" type="select" sortOrder="100" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>LazyLoad</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>Lazy Load delays loading of images. Images outside of viewport are not loaded until user scrolls to them.</comment>
                </field>
                <field id="autoplay" translate="label" type="select" sortOrder="110" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Autoplay</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                </field>
                <field id="autoplayTimeout" translate="label" type="text" sortOrder="120" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>AutoplayTimeout</label>
                    <depends>
                        <field id="autoplay">1</field>
                    </depends>
                    <comment>Autoplay interval timeout. Set time between changing products (in milliseconds, for Example: 4000, for 4 seconds))</comment>
                </field>
                <field id="autoplayHoverPause" translate="label" type="select" sortOrder="130" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>AutoplayHoverPause</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <depends>
                        <field id="autoplay">1</field>
                    </depends>
                    <comment>Set the autoplay to pause on mouse hover.</comment>
                </field>
                <field id="navSpeed" translate="label comment" type="text" sortOrder="131" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Next/Prev button Transition Speed</label>
                    <comment>Set the speed for the transition animation when clicking the Next/Prev buttons. Insert value in ms. Write “4000” for a 4 second timeout.</comment>
                </field>
                <field id="dotsSpeed" translate="label comment" type="text" sortOrder="132" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Dots Transition Speed</label>
                    <comment>Set the speed for the transition animation when clicking the Dots. Insert value in ms. Write “4000” for a 4 second timeout.</comment>
                </field>
                <field id="rtl" translate="label comment" type="select" sortOrder="133" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Direction Right To Left</label>
                    <comment>If True, each banner will slide from right to left.</comment>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                </field>
                <field id="nav_design" translate="label comment" type="select" sortOrder="134" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Prev/Next buttons design</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\PrevNextDesign</source_model>
                </field>
                <field id="nav_prev_label" translate="label comment" type="text" sortOrder="135" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Prev Label</label>
                    <comment>Insert custom label for  previous button. If empty, only arrows are displayed.</comment>
                    <depends>
                        <field id="nav_design">2</field>
                    </depends>
                </field>
                <field id="nav_next_label" translate="label comment" type="text" sortOrder="135" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Next Label</label>
                    <comment>Insert custom label for next button. If empty, only arrows are displayed.</comment>
                    <depends>
                        <field id="nav_design">2</field>
                    </depends>
                </field>

                <!--Separator Breakpoints-->

                <field id="Separatorbreakpoint" translate="label" type="text" sortOrder="135" showInDefault="1" showInWebsite="1" showInStore="1">
                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
                </field>

                <!--Separator Breakpoint 1-->
                <field id="s_1" translate="label" type="text" sortOrder="137" showInDefault="1" showInWebsite="1" showInStore="1">
                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
                </field>

                <field id="nav_brk1" translate="label" type="select" sortOrder="140" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Next/Prev Buttons</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, next/prev buttons are displayed.</comment>
                </field>
                <field id="dots_brk1" translate="label" type="select" sortOrder="145" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Dots</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, dots are displayed under carousel.</comment>
                </field>
                <field id="dotsEach_brk1" translate="label comment" type="select" sortOrder="146" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Show Dots for each Item</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, Show dots for each item.</comment>
                    <depends>
                        <field id="dots_brk1">1</field>
                    </depends>
                </field>
                <field id="items_brk1" translate="label" type="text" sortOrder="150" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Items</label>
                    <comment>The number of items you want to see on the screen. This value should be smaller than Max Items. </comment>
                </field>
                <field id="center_brk1" translate="label" type="select" sortOrder="160" showInDefault="1" showInWebsite="1" showInStore="1">
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <label>Center</label>
                    <comment>If True, carousel is centered on the screen. Works well even with an odd number of items.</comment>
                </field>
                <field id="stagePadding_brk1" translate="label" type="text" sortOrder="170" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>StagePadding</label>
                    <depends>
                        <field id="center_brk1">0</field>
                    </depends>
                    <comment>Padding left and right on stage (can see neighbours).</comment>
                </field>

                <!--Separatorbreakpoint 2-->
                <field id="s_2" translate="label" type="text" sortOrder="175" showInDefault="1" showInWebsite="1" showInStore="1">
                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
                </field>

                <field id="nav_brk2" translate="label" type="select" sortOrder="180" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Next/Prev Buttons</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, next/prev buttons are displayed.</comment>
                </field>
                <field id="dots_brk2" translate="label" type="select" sortOrder="185" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Dots</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, dots are displayed under carousel.</comment>
                </field>
                <field id="dotsEach_brk2" translate="label comment" type="select" sortOrder="186" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Show Dots for each Item</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, Show dots for each item.</comment>
                    <depends>
                        <field id="dots_brk2">1</field>
                    </depends>
                </field>
                <field id="items_brk2" translate="label" type="text" sortOrder="190" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Items</label>
                    <comment>The number of items you want to see on the screen. This value should be smaller than Max Items. </comment>
                </field>
                <field id="center_brk2" translate="label" type="select" sortOrder="200" showInDefault="1" showInWebsite="1" showInStore="1">
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <label>Center</label>
                    <comment>If True, carousel is centered on the screen. Works well even with an odd number of items.</comment>
                </field>
                <field id="stagePadding_brk2" translate="label" type="text" sortOrder="210" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>StagePadding</label>
                    <depends>
                        <field id="center_brk2">0</field>
                    </depends>
                    <comment>Padding left and right on stage (can see neighbours).</comment>
                </field>

                <!--Separatorbreakpoint 3-->
                <field id="s_3" translate="label" type="text" sortOrder="215" showInDefault="1" showInWebsite="1" showInStore="1">
                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
                </field>

                <field id="nav_brk3" translate="label" type="select" sortOrder="220" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Next/Prev Buttons</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, next/prev buttons are displayed.</comment>
                </field>
                <field id="dots_brk3" translate="label" type="select" sortOrder="225" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Dots</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, dots are displayed under carousel.</comment>
                </field>
                <field id="dotsEach_brk3" translate="label comment" type="select" sortOrder="226" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Show Dots for each Item</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, Show dots for each item.</comment>
                    <depends>
                        <field id="dots_brk3">1</field>
                    </depends>
                </field>
                <field id="items_brk3" translate="label" type="text" sortOrder="230" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Items</label>
                    <comment>The number of items you want to see on the screen. This value should be smaller than Max Items. </comment>
                </field>
                <field id="center_brk3" translate="label" type="select" sortOrder="240" showInDefault="1" showInWebsite="1" showInStore="1">
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <label>Center</label>
                    <comment>If True, carousel is centered on the screen. Works well even with an odd number of items.</comment>
                </field>
                <field id="stagePadding_brk3" translate="label" type="text" sortOrder="250" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>StagePadding</label>
                    <depends>
                        <field id="center_brk3">0</field>
                    </depends>
                    <comment>Padding left and right on stage (can see neighbours).</comment>
                </field>

                <!--Separatorbreakpoint 3-->
                <field id="s_4" translate="label" type="text" sortOrder="255" showInDefault="1" showInWebsite="1" showInStore="1">
                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
                </field>

                <field id="nav_brk4" translate="label" type="select" sortOrder="260" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Next/Prev Buttons</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, next/prev buttons are displayed.</comment>
                </field>
                <field id="dots_brk4" translate="label" type="select" sortOrder="265" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Dots</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, dots are displayed under carousel.</comment>
                </field>
                <field id="dotsEach_brk4" translate="label comment" type="select" sortOrder="266" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Show Dots for each Item</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, Show dots for each item.</comment>
                    <depends>
                        <field id="dots_brk4">1</field>
                    </depends>
                </field>
                <field id="items_brk4" translate="label" type="text" sortOrder="270" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Items</label>
                    <comment>The number of items you want to see on the screen. This value should be smaller than Max Items. </comment>
                </field>
                <field id="center_brk4" translate="label" type="select" sortOrder="280" showInDefault="1" showInWebsite="1" showInStore="1">
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <label>Center</label>
                    <comment>If True, carousel is centered on the screen. Works well even with an odd number of items.</comment>
                </field>
                <field id="stagePadding_brk4" translate="label" type="text" sortOrder="290" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>StagePadding</label>
                    <depends>
                        <field id="center_brk4">0</field>
                    </depends>
                    <comment>Padding left and right on stage (can see neighbours).</comment>
                </field>
            </group>

            <!--Cross-sell Products Section-->

            <group id="crosssell_products" translate="label" type="text" sortOrder="80" showInDefault="1" showInWebsite="1" showInStore="1">
                <label>Cross-Sell Products Carousel Settings</label>

                <field id="status" translate="label" type="select" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Enable Cross-Sell Products Carousel</label>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                    <comment>If Enabled, the products will be displayed on product page in a carousel instead of default product grid. Make sure you have defined Cross-Sells Products in your catalog.</comment>
                </field>
                <field id="title" translate="label" type="text" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Title</label>
                    <comment>Insert custom title to be displayed on the carousel. For no title leave field empty.</comment>
                </field>

                <!--Separator Slider-->

                <field id="separatorSlider" translate="label" type="text" sortOrder="25" showInDefault="1" showInWebsite="1" showInStore="1">
                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorslide</frontend_model>
                </field>
                <field id="loop" translate="label" type="select" sortOrder="80" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Loop</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>Inifnity loop. Duplicate last and first items to get loop illusion.</comment>
                </field>
                <field id="margin" translate="label" type="text" sortOrder="90" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Margin</label>
                    <comment>Set right margin for each item in carousel. Example: for a margin of 30px enter 30 in the field.</comment>
                </field>
                <field id="slide_by" translate="label" type="text" sortOrder="95" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Slide By</label>
                    <comment><![CDATA[ Insert how many items to slide at once. Default value: 1 <br> Note: On breakpoints the value will auto adjust to visible items. ]]></comment>
                    <validate>validate-number validate-greater-than-zero validate-no-empty</validate>
                </field>
                <field id="lazyLoad" translate="label" type="select" sortOrder="100" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>LazyLoad</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>Lazy Load delays loading of images. Images outside of viewport are not loaded until user scrolls to them.</comment>
                </field>
                <field id="autoplay" translate="label" type="select" sortOrder="110" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Autoplay</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                </field>
                <field id="autoplayTimeout" translate="label" type="text" sortOrder="120" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>AutoplayTimeout</label>
                    <depends>
                        <field id="autoplay">1</field>
                    </depends>
                    <comment>Autoplay interval timeout. Set time between changing products (in milliseconds, for Example: 4000, for 4 seconds))</comment>
                </field>
                <field id="autoplayHoverPause" translate="label" type="select" sortOrder="130" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>AutoplayHoverPause</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <depends>
                        <field id="autoplay">1</field>
                    </depends>
                    <comment>Set the autoplay to pause on mouse hover.</comment>
                </field>
                <field id="navSpeed" translate="label comment" type="text" sortOrder="131" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Next/Prev button Transition Speed</label>
                    <comment>Set the speed for the transition animation when clicking the Next/Prev buttons. Insert value in ms. Write “4000” for a 4 second timeout.</comment>
                </field>
                <field id="dotsSpeed" translate="label comment" type="text" sortOrder="132" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Dots Transition Speed</label>
                    <comment>Set the speed for the transition animation when clicking the Dots. Insert value in ms. Write “4000” for a 4 second timeout.</comment>
                </field>
                <field id="rtl" translate="label comment" type="select" sortOrder="133" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Direction Right To Left</label>
                    <comment>If True, each banner will slide from right to left.</comment>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                </field>
                <field id="nav_design" translate="label comment" type="select" sortOrder="134" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Prev/Next buttons design</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\PrevNextDesign</source_model>
                </field>
                <field id="nav_prev_label" translate="label comment" type="text" sortOrder="135" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Prev Label</label>
                    <comment>Insert custom label for  previous button. If empty, only arrows are displayed.</comment>
                    <depends>
                        <field id="nav_design">2</field>
                    </depends>
                </field>
                <field id="nav_next_label" translate="label comment" type="text" sortOrder="135" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Next Label</label>
                    <comment>Insert custom label for next button. If empty, only arrows are displayed.</comment>
                    <depends>
                        <field id="nav_design">2</field>
                    </depends>
                </field>

                <!--Separator Breakpoints-->

                <field id="Separatorbreakpoint" translate="label" type="text" sortOrder="135" showInDefault="1" showInWebsite="1" showInStore="1">
                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
                </field>

                <!--Separator Breakpoint 1-->
                <field id="s_1" translate="label" type="text" sortOrder="137" showInDefault="1" showInWebsite="1" showInStore="1">
                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
                </field>

                <field id="nav_brk1" translate="label" type="select" sortOrder="140" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Next/Prev Buttons</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, next/prev buttons are displayed.</comment>
                </field>
                <field id="dots_brk1" translate="label" type="select" sortOrder="145" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Dots</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, dots are displayed under carousel.</comment>
                </field>
                <field id="dotsEach_brk1" translate="label comment" type="select" sortOrder="146" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Show Dots for each Item</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, Show dots for each item.</comment>
                    <depends>
                        <field id="dots_brk1">1</field>
                    </depends>
                </field>
                <field id="items_brk1" translate="label" type="text" sortOrder="150" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Items</label>
                    <comment>The number of items you want to see on the screen. This value should be smaller than Max Items. </comment>
                </field>
                <field id="center_brk1" translate="label" type="select" sortOrder="160" showInDefault="1" showInWebsite="1" showInStore="1">
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <label>Center</label>
                    <comment>If True, carousel is centered on the screen. Works well even with an odd number of items.</comment>
                </field>
                <field id="stagePadding_brk1" translate="label" type="text" sortOrder="170" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>StagePadding</label>
                    <depends>
                        <field id="center_brk1">0</field>
                    </depends>
                    <comment>Padding left and right on stage (can see neighbours).</comment>
                </field>

                <!--Separatorbreakpoint 2-->
                <field id="s_2" translate="label" type="text" sortOrder="175" showInDefault="1" showInWebsite="1" showInStore="1">
                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
                </field>

                <field id="nav_brk2" translate="label" type="select" sortOrder="180" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Next/Prev Buttons</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, next/prev buttons are displayed.</comment>
                </field>
                <field id="dots_brk2" translate="label" type="select" sortOrder="185" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Dots</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, dots are displayed under carousel.</comment>
                </field>
                <field id="dotsEach_brk2" translate="label comment" type="select" sortOrder="186" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Show Dots for each Item</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, Show dots for each item.</comment>
                    <depends>
                        <field id="dots_brk2">1</field>
                    </depends>
                </field>
                <field id="items_brk2" translate="label" type="text" sortOrder="190" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Items</label>
                    <comment>The number of items you want to see on the screen. This value should be smaller than Max Items. </comment>
                </field>
                <field id="center_brk2" translate="label" type="select" sortOrder="200" showInDefault="1" showInWebsite="1" showInStore="1">
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <label>Center</label>
                    <comment>If True, carousel is centered on the screen. Works well even with an odd number of items.</comment>
                </field>
                <field id="stagePadding_brk2" translate="label" type="text" sortOrder="210" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>StagePadding</label>
                    <depends>
                        <field id="center_brk2">0</field>
                    </depends>
                    <comment>Padding left and right on stage (can see neighbours).</comment>
                </field>

                <!--Separatorbreakpoint 3-->
                <field id="s_3" translate="label" type="text" sortOrder="215" showInDefault="1" showInWebsite="1" showInStore="1">
                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
                </field>

                <field id="nav_brk3" translate="label" type="select" sortOrder="220" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Next/Prev Buttons</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, next/prev buttons are displayed.</comment>
                </field>
                <field id="dots_brk3" translate="label" type="select" sortOrder="225" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Dots</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, dots are displayed under carousel.</comment>
                </field>
                <field id="dotsEach_brk3" translate="label comment" type="select" sortOrder="226" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Show Dots for each Item</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, Show dots for each item.</comment>
                    <depends>
                        <field id="dots_brk3">1</field>
                    </depends>
                </field>
                <field id="items_brk3" translate="label" type="text" sortOrder="230" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Items</label>
                    <comment>The number of items you want to see on the screen. This value should be smaller than Max Items. </comment>
                </field>
                <field id="center_brk3" translate="label" type="select" sortOrder="240" showInDefault="1" showInWebsite="1" showInStore="1">
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <label>Center</label>
                    <comment>If True, carousel is centered on the screen. Works well even with an odd number of items.</comment>
                </field>
                <field id="stagePadding_brk3" translate="label" type="text" sortOrder="250" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>StagePadding</label>
                    <depends>
                        <field id="center_brk3">0</field>
                    </depends>
                    <comment>Padding left and right on stage (can see neighbours).</comment>
                </field>

                <!--Separatorbreakpoint 3-->
                <field id="s_4" translate="label" type="text" sortOrder="255" showInDefault="1" showInWebsite="1" showInStore="1">
                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
                </field>

                <field id="nav_brk4" translate="label" type="select" sortOrder="260" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Next/Prev Buttons</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, next/prev buttons are displayed.</comment>
                </field>
                <field id="dots_brk4" translate="label" type="select" sortOrder="265" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Dots</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, dots are displayed under carousel.</comment>
                </field>
                <field id="dotsEach_brk4" translate="label comment" type="select" sortOrder="266" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Show Dots for each Item</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, Show dots for each item.</comment>
                    <depends>
                        <field id="dots_brk4">1</field>
                    </depends>
                </field>
                <field id="items_brk4" translate="label" type="text" sortOrder="270" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Items</label>
                    <comment>The number of items you want to see on the screen. This value should be smaller than Max Items. </comment>
                </field>
                <field id="center_brk4" translate="label" type="select" sortOrder="280" showInDefault="1" showInWebsite="1" showInStore="1">
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <label>Center</label>
                    <comment>If True, carousel is centered on the screen. Works well even with an odd number of items.</comment>
                </field>
                <field id="stagePadding_brk4" translate="label" type="text" sortOrder="290" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>StagePadding</label>
                    <depends>
                        <field id="center_brk4">0</field>
                    </depends>
                    <comment>Padding left and right on stage (can see neighbours).</comment>
                </field>
            </group>
            <group id="category_products" translate="label" type="text" sortOrder="90" showInDefault="1" showInWebsite="1" showInStore="1">
                <label>Custom Category Products Carousel Settings</label>

                <field id="status" translate="label" type="select" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Enable Custom Category Products Carousel</label>
                    <comment>Custom Category Carousel - carousel will be populated with products from specified category. </comment>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                </field>
                <field id="title" translate="label" type="text" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Title</label>
                    <comment>Insert custom title to be displayed on the carousel. For no title leave field empty.</comment>
                </field>
                <field id="show_price" translate="label" type="select" sortOrder="30" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Show Price</label>
                    <comment>Show/Hide the product price for products in the carousel</comment>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                </field>
                <field id="show_addto" translate="label" type="select" sortOrder="40" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Show Add To Cart</label>
                    <comment>Show/Hide ‘Add to cart’ button for products in the carousel.</comment>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                </field>
                <field id="show_wishlist" translate="label" type="select" sortOrder="50" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Show Wishlist</label>
                    <comment>Show/Hide wishlist icon for products in the carousel.</comment>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                </field>
                <field id="show_compare" translate="label" type="select" sortOrder="60" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Show Compare</label>
                    <comment>Show/Hide Compare icon for products in the carousel</comment>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                </field>
                <field id="show_reviews_ratings" translate="label comment" type="select" sortOrder="65" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Show Reviews and Ratings</label>
                    <comment>Show/Hide Reviews and Ratings for products in the carousel</comment>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                </field>
                <field id="random_sort" translate="label" type="select" sortOrder="70" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Sort Order</label>
                    <comment>Sort Order of the products in the carousel.</comment>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\SortOrder</source_model>
                </field>
                <field id="max_items" translate="label" type="text" sortOrder="80" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Max Items</label>
                    <comment>The total number of products to be loaded in the carousel.</comment>
                </field>
                <field id="slide_by" translate="label" type="text" sortOrder="83" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Slide By</label>
                    <comment><![CDATA[ Insert how many items to slide at once. Default value: 1 <br> Note: On breakpoints the value will auto adjust to visible items. ]]></comment>
                    <validate>validate-number validate-greater-than-zero validate-no-empty</validate>
                </field>

                <!--Separator Slider-->

                <field id="separatorSlider" translate="label" type="text" sortOrder="85" showInDefault="1" showInWebsite="1" showInStore="1">
                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorslide</frontend_model>
                </field>
                <field id="loop" translate="label" type="select" sortOrder="140" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Loop</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>Inifnity loop. Duplicate last and first items to get loop illusion.</comment>
                </field>
                <field id="margin" translate="label" type="text" sortOrder="150" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Margin</label>
                    <comment>Set right margin for each item in carousel. Example: for a margin of 30px enter 30 in the field.</comment>
                </field>
                <field id="lazyLoad" translate="label" type="select" sortOrder="160" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>LazyLoad</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>Lazy Load delays loading of images. Images outside of viewport are not loaded until user scrolls to them.</comment>
                </field>
                <field id="autoplay" translate="label" type="select" sortOrder="170" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Autoplay</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                </field>
                <field id="autoplayTimeout" translate="label" type="text" sortOrder="180" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>AutoplayTimeout</label>
                    <depends>
                        <field id="autoplay">1</field>
                    </depends>
                    <comment>Autoplay interval timeout. Set time between changing products (in milliseconds, for Example: 4000, for 4 seconds))</comment>
                </field>
                <field id="autoplayHoverPause" translate="label" type="select" sortOrder="190" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>AutoplayHoverPause</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <depends>
                        <field id="autoplay">1</field>
                    </depends>
                    <comment>Set the autoplay to pause on mouse hover.</comment>
                </field>
                <field id="navSpeed" translate="label comment" type="text" sortOrder="191" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Next/Prev button Transition Speed</label>
                    <comment>Set the speed for the transition animation when clicking the Next/Prev buttons. Insert value in ms. Write “4000” for a 4 second timeout.</comment>
                </field>
                <field id="dotsSpeed" translate="label comment" type="text" sortOrder="192" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Dots Transition Speed</label>
                    <comment>Set the speed for the transition animation when clicking the Dots. Insert value in ms. Write “4000” for a 4 second timeout.</comment>
                </field>
                <field id="rtl" translate="label comment" type="select" sortOrder="193" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Direction Right To Left</label>
                    <comment>If True, each banner will slide from right to left.</comment>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                </field>
                <field id="nav_design" translate="label comment" type="select" sortOrder="194" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Prev/Next buttons design</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\PrevNextDesign</source_model>
                </field>
                <field id="nav_prev_label" translate="label comment" type="text" sortOrder="195" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Prev Label</label>
                    <comment>Insert custom label for  previous button. If empty, only arrows are displayed.</comment>
                    <depends>
                        <field id="nav_design">2</field>
                    </depends>
                </field>
                <field id="nav_next_label" translate="label comment" type="text" sortOrder="195" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Next Label</label>
                    <comment>Insert custom label for next button. If empty, only arrows are displayed.</comment>
                    <depends>
                        <field id="nav_design">2</field>
                    </depends>
                </field>

                <!--Separator Breakpoints-->

                <field id="Separatorbreakpoint" translate="label" type="text" sortOrder="195" showInDefault="1" showInWebsite="1" showInStore="1">
                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
                </field>

                <!--Separator Breakpoint 1-->
                <field id="s_1" translate="label" type="text" sortOrder="197" showInDefault="1" showInWebsite="1" showInStore="1">
                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
                </field>

                <field id="nav_brk1" translate="label" type="select" sortOrder="200" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Next/Prev Buttons</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, next/prev buttons are displayed.</comment>
                </field>
                <field id="dots_brk1" translate="label" type="select" sortOrder="205" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Dots</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, dots are displayed under carousel.</comment>
                </field>
                <field id="dotsEach_brk1" translate="label comment" type="select" sortOrder="206" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Show Dots for each Item</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, Show dots for each item.</comment>
                    <depends>
                        <field id="dots_brk1">1</field>
                    </depends>
                </field>
                <field id="items_brk1" translate="label" type="text" sortOrder="210" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Items</label>
                    <comment>The number of items you want to see on the screen. This value should be smaller than Max Items. </comment>
                </field>
                <field id="center_brk1" translate="label" type="select" sortOrder="220" showInDefault="1" showInWebsite="1" showInStore="1">
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <label>Center</label>
                    <comment>If True, carousel is centered on the screen. Works well even with an odd number of items. Carousel Breakpoint options overwrites this option. Please check below Breakpoint Carousel Options.</comment>
                </field>
                <field id="stagePadding_brk1" translate="label" type="text" sortOrder="230" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>StagePadding</label>
                    <depends>
                        <field id="center_brk1">0</field>
                    </depends>
                    <comment>Padding left and right on stage (can see neighbours).</comment>
                </field>

                <!--Separatorbreakpoint 2-->
                <field id="s_2" translate="label" type="text" sortOrder="235" showInDefault="1" showInWebsite="1" showInStore="1">
                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
                </field>

                <field id="nav_brk2" translate="label" type="select" sortOrder="240" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Next/Prev Buttons</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, next/prev buttons are displayed.</comment>
                </field>
                <field id="dots_brk2" translate="label" type="select" sortOrder="245" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Dots</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, dots are displayed under carousel.</comment>
                </field>
                <field id="dotsEach_brk2" translate="label comment" type="select" sortOrder="246" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Show Dots for each Item</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, Show dots for each item.</comment>
                    <depends>
                        <field id="dots_brk2">1</field>
                    </depends>
                </field>
                <field id="items_brk2" translate="label" type="text" sortOrder="250" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Items</label>
                    <comment>The number of items you want to see on the screen. This value should be smaller than Max Items. </comment>
                </field>
                <field id="center_brk2" translate="label" type="select" sortOrder="260" showInDefault="1" showInWebsite="1" showInStore="1">
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <label>Center</label>
                    <comment>If True, carousel is centered on the screen. Works well even with an odd number of items. Carousel Breakpoint options overwrites this option. Please check below Breakpoint Carousel Options.</comment>
                </field>
                <field id="stagePadding_brk2" translate="label" type="text" sortOrder="270" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>StagePadding</label>
                    <depends>
                        <field id="center_brk2">0</field>
                    </depends>
                    <comment>Padding left and right on stage (can see neighbours).</comment>
                </field>

                <!--Separatorbreakpoint 3-->
                <field id="s_3" translate="label" type="text" sortOrder="275" showInDefault="1" showInWebsite="1" showInStore="1">
                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
                </field>

                <field id="nav_brk3" translate="label" type="select" sortOrder="280" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Next/Prev Buttons</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, next/prev buttons are displayed.</comment>
                </field>
                <field id="dots_brk3" translate="label" type="select" sortOrder="285" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Dots</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, dots are displayed under carousel.</comment>
                </field>
                <field id="dotsEach_brk3" translate="label comment" type="select" sortOrder="286" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Show Dots for each Item</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, Show dots for each item.</comment>
                    <depends>
                        <field id="dots_brk3">1</field>
                    </depends>
                </field>
                <field id="items_brk3" translate="label" type="text" sortOrder="290" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Items</label>
                    <comment>The number of items you want to see on the screen. This value should be smaller than Max Items. </comment>
                </field>
                <field id="center_brk3" translate="label" type="select" sortOrder="300" showInDefault="1" showInWebsite="1" showInStore="1">
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <label>Center</label>
                    <comment>If True, carousel is centered on the screen. Works well even with an odd number of items. Carousel Breakpoint options overwrites this option. Please check below Breakpoint Carousel Options.</comment>
                </field>
                <field id="stagePadding_brk3" translate="label" type="text" sortOrder="310" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>StagePadding</label>
                    <depends>
                        <field id="center_brk3">0</field>
                    </depends>
                    <comment>Padding left and right on stage (can see neighbours).</comment>
                </field>

                <!--Separatorbreakpoint 3-->
                <field id="s_4" translate="label" type="text" sortOrder="315" showInDefault="1" showInWebsite="1" showInStore="1">
                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
                </field>

                <field id="nav_brk4" translate="label" type="select" sortOrder="320" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Next/Prev Buttons</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, next/prev buttons are displayed.</comment>
                </field>
                <field id="dots_brk4" translate="label" type="select" sortOrder="325" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Dots</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, dots are displayed under carousel.</comment>
                </field>
                <field id="dotsEach_brk4" translate="label comment" type="select" sortOrder="326" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Show Dots for each Item</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, Show dots for each item.</comment>
                    <depends>
                        <field id="dots_brk4">1</field>
                    </depends>
                </field>
                <field id="items_brk4" translate="label" type="text" sortOrder="330" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Items</label>
                    <comment>The number of items you want to see on the screen. This value should be smaller than Max Items. </comment>
                </field>
                <field id="center_brk4" translate="label" type="select" sortOrder="340" showInDefault="1" showInWebsite="1" showInStore="1">
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <label>Center</label>
                    <comment>If True, carousel is centered on the screen. Works well even with an odd number of items. Carousel Breakpoint options overwrites this option. Please check below Breakpoint Carousel Options.</comment>
                </field>
                <field id="stagePadding_brk4" translate="label" type="text" sortOrder="350" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>StagePadding</label>
                    <depends>
                        <field id="center_brk4">0</field>
                    </depends>
                    <comment>Padding left and right on stage (can see neighbours).</comment>
                </field>
            </group>
            <group id="conditions_based_products" translate="label" type="text" sortOrder="94" showInDefault="1" showInWebsite="1" showInStore="1">
                <label>Conditions Based Products Carousel Settings</label>

                <field id="status" translate="label" type="select" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Enable Condition Based Products Carousel</label>
                    <comment>Condition Based Products Carousel - carousel will be populated with products from specified conditions. </comment>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                </field>
                <field id="title" translate="label" type="text" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Title</label>
                    <comment>Insert custom title to be displayed on the carousel. For no title leave field empty.</comment>
                </field>
                <field id="show_price" translate="label" type="select" sortOrder="30" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Show Price</label>
                    <comment>Show/Hide the product price for products in the carousel</comment>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                </field>
                <field id="show_addto" translate="label" type="select" sortOrder="40" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Show Add To Cart</label>
                    <comment>Show/Hide ‘Add to cart’ button for products in the carousel.</comment>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                </field>
                <field id="show_wishlist" translate="label" type="select" sortOrder="50" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Show Wishlist</label>
                    <comment>Show/Hide wishlist icon for products in the carousel.</comment>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                </field>
                <field id="show_compare" translate="label" type="select" sortOrder="60" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Show Compare</label>
                    <comment>Show/Hide Compare icon for products in the carousel</comment>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                </field>
                <field id="show_reviews_ratings" translate="label comment" type="select" sortOrder="65" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Show Reviews and Ratings</label>
                    <comment>Show/Hide Reviews and Ratings for products in the carousel</comment>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                </field>
                <field id="random_sort" translate="label" type="select" sortOrder="70" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Sort Order</label>
                    <comment>Sort Order of the products in the carousel.</comment>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\SortOrder</source_model>
                </field>
                <field id="max_items" translate="label" type="text" sortOrder="80" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Max Items</label>
                    <comment>The total number of products to be loaded in the carousel.</comment>
                </field>
                <field id="slide_by" translate="label" type="text" sortOrder="83" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Slide By</label>
                    <comment><![CDATA[ Insert how many items to slide at once. Default value: 1 <br> Note: On breakpoints the value will auto adjust to visible items. ]]></comment>
                    <validate>validate-number validate-greater-than-zero validate-no-empty</validate>
                </field>

                <!--Separator Slider-->

                <field id="separatorSlider" translate="label" type="text" sortOrder="85" showInDefault="1" showInWebsite="1" showInStore="1">
                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorslide</frontend_model>
                </field>
                <field id="loop" translate="label" type="select" sortOrder="140" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Loop</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>Inifnity loop. Duplicate last and first items to get loop illusion.</comment>
                </field>
                <field id="margin" translate="label" type="text" sortOrder="150" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Margin</label>
                    <comment>Set right margin for each item in carousel. Example: for a margin of 30px enter 30 in the field.</comment>
                </field>
                <field id="lazyLoad" translate="label" type="select" sortOrder="160" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>LazyLoad</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>Lazy Load delays loading of images. Images outside of viewport are not loaded until user scrolls to them.</comment>
                </field>
                <field id="autoplay" translate="label" type="select" sortOrder="170" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Autoplay</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                </field>
                <field id="autoplayTimeout" translate="label" type="text" sortOrder="180" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>AutoplayTimeout</label>
                    <depends>
                        <field id="autoplay">1</field>
                    </depends>
                    <comment>Autoplay interval timeout. Set time between changing products (in milliseconds, for Example: 4000, for 4 seconds))</comment>
                </field>
                <field id="autoplayHoverPause" translate="label" type="select" sortOrder="190" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>AutoplayHoverPause</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <depends>
                        <field id="autoplay">1</field>
                    </depends>
                    <comment>Set the autoplay to pause on mouse hover.</comment>
                </field>
                <field id="navSpeed" translate="label comment" type="text" sortOrder="191" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Next/Prev button Transition Speed</label>
                    <comment>Set the speed for the transition animation when clicking the Next/Prev buttons. Insert value in ms. Write “4000” for a 4 second timeout.</comment>
                </field>
                <field id="dotsSpeed" translate="label comment" type="text" sortOrder="192" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Dots Transition Speed</label>
                    <comment>Set the speed for the transition animation when clicking the Dots. Insert value in ms. Write “4000” for a 4 second timeout.</comment>
                </field>
                <field id="rtl" translate="label comment" type="select" sortOrder="193" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Direction Right To Left</label>
                    <comment>If True, each banner will slide from right to left.</comment>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                </field>
                <field id="nav_design" translate="label comment" type="select" sortOrder="194" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Prev/Next buttons design</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\PrevNextDesign</source_model>
                </field>
                <field id="nav_prev_label" translate="label comment" type="text" sortOrder="195" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Prev Label</label>
                    <comment>Insert custom label for  previous button. If empty, only arrows are displayed.</comment>
                    <depends>
                        <field id="nav_design">2</field>
                    </depends>
                </field>
                <field id="nav_next_label" translate="label comment" type="text" sortOrder="195" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Next Label</label>
                    <comment>Insert custom label for next button. If empty, only arrows are displayed.</comment>
                    <depends>
                        <field id="nav_design">2</field>
                    </depends>
                </field>

                <!--Separator Breakpoints-->

                <field id="Separatorbreakpoint" translate="label" type="text" sortOrder="196" showInDefault="1" showInWebsite="1" showInStore="1">
                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
                </field>

                <!--Separator Breakpoint 1-->
                <field id="s_1" translate="label" type="text" sortOrder="197" showInDefault="1" showInWebsite="1" showInStore="1">
                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
                </field>

                <field id="nav_brk1" translate="label" type="select" sortOrder="200" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Next/Prev Buttons</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, next/prev buttons are displayed.</comment>
                </field>
                <field id="dots_brk1" translate="label" type="select" sortOrder="205" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Dots</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, dots are displayed under carousel.</comment>
                </field>
                <field id="dotsEach_brk1" translate="label comment" type="select" sortOrder="206" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Show Dots for each Item</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, Show dots for each item.</comment>
                    <depends>
                        <field id="dots_brk1">1</field>
                    </depends>
                </field>
                <field id="items_brk1" translate="label" type="text" sortOrder="210" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Items</label>
                    <comment>The number of items you want to see on the screen. This value should be smaller than Max Items. </comment>
                </field>
                <field id="center_brk1" translate="label" type="select" sortOrder="220" showInDefault="1" showInWebsite="1" showInStore="1">
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <label>Center</label>
                    <comment>If True, carousel is centered on the screen. Works well even with an odd number of items. Carousel Breakpoint options overwrites this option. Please check below Breakpoint Carousel Options.</comment>
                </field>
                <field id="stagePadding_brk1" translate="label" type="text" sortOrder="230" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>StagePadding</label>
                    <depends>
                        <field id="center_brk1">0</field>
                    </depends>
                    <comment>Padding left and right on stage (can see neighbours).</comment>
                </field>

                <!--Separatorbreakpoint 2-->
                <field id="s_2" translate="label" type="text" sortOrder="235" showInDefault="1" showInWebsite="1" showInStore="1">
                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
                </field>

                <field id="nav_brk2" translate="label" type="select" sortOrder="240" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Next/Prev Buttons</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, next/prev buttons are displayed.</comment>
                </field>
                <field id="dots_brk2" translate="label" type="select" sortOrder="245" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Dots</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, dots are displayed under carousel.</comment>
                </field>
                <field id="dotsEach_brk2" translate="label comment" type="select" sortOrder="246" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Show Dots for each Item</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, Show dots for each item.</comment>
                    <depends>
                        <field id="dots_brk2">1</field>
                    </depends>
                </field>
                <field id="items_brk2" translate="label" type="text" sortOrder="250" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Items</label>
                    <comment>The number of items you want to see on the screen. This value should be smaller than Max Items. </comment>
                </field>
                <field id="center_brk2" translate="label" type="select" sortOrder="260" showInDefault="1" showInWebsite="1" showInStore="1">
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <label>Center</label>
                    <comment>If True, carousel is centered on the screen. Works well even with an odd number of items. Carousel Breakpoint options overwrites this option. Please check below Breakpoint Carousel Options.</comment>
                </field>
                <field id="stagePadding_brk2" translate="label" type="text" sortOrder="270" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>StagePadding</label>
                    <depends>
                        <field id="center_brk2">0</field>
                    </depends>
                    <comment>Padding left and right on stage (can see neighbours).</comment>
                </field>

                <!--Separatorbreakpoint 3-->
                <field id="s_3" translate="label" type="text" sortOrder="275" showInDefault="1" showInWebsite="1" showInStore="1">
                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
                </field>

                <field id="nav_brk3" translate="label" type="select" sortOrder="280" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Next/Prev Buttons</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, next/prev buttons are displayed.</comment>
                </field>
                <field id="dots_brk3" translate="label" type="select" sortOrder="285" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Dots</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, dots are displayed under carousel.</comment>
                </field>
                <field id="dotsEach_brk3" translate="label comment" type="select" sortOrder="286" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Show Dots for each Item</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, Show dots for each item.</comment>
                    <depends>
                        <field id="dots_brk3">1</field>
                    </depends>
                </field>
                <field id="items_brk3" translate="label" type="text" sortOrder="290" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Items</label>
                    <comment>The number of items you want to see on the screen. This value should be smaller than Max Items. </comment>
                </field>
                <field id="center_brk3" translate="label" type="select" sortOrder="300" showInDefault="1" showInWebsite="1" showInStore="1">
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <label>Center</label>
                    <comment>If True, carousel is centered on the screen. Works well even with an odd number of items. Carousel Breakpoint options overwrites this option. Please check below Breakpoint Carousel Options.</comment>
                </field>
                <field id="stagePadding_brk3" translate="label" type="text" sortOrder="310" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>StagePadding</label>
                    <depends>
                        <field id="center_brk3">0</field>
                    </depends>
                    <comment>Padding left and right on stage (can see neighbours).</comment>
                </field>

                <!--Separatorbreakpoint 3-->
                <field id="s_4" translate="label" type="text" sortOrder="315" showInDefault="1" showInWebsite="1" showInStore="1">
                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
                </field>

                <field id="nav_brk4" translate="label" type="select" sortOrder="320" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Next/Prev Buttons</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, next/prev buttons are displayed.</comment>
                </field>
                <field id="dots_brk4" translate="label" type="select" sortOrder="325" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Dots</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, dots are displayed under carousel.</comment>
                </field>
                <field id="dotsEach_brk4" translate="label comment" type="select" sortOrder="326" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Show Dots for each Item</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, Show dots for each item.</comment>
                    <depends>
                        <field id="dots_brk4">1</field>
                    </depends>
                </field>
                <field id="items_brk4" translate="label" type="text" sortOrder="330" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Items</label>
                    <comment>The number of items you want to see on the screen. This value should be smaller than Max Items. </comment>
                </field>
                <field id="center_brk4" translate="label" type="select" sortOrder="340" showInDefault="1" showInWebsite="1" showInStore="1">
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <label>Center</label>
                    <comment>If True, carousel is centered on the screen. Works well even with an odd number of items. Carousel Breakpoint options overwrites this option. Please check below Breakpoint Carousel Options.</comment>
                </field>
                <field id="stagePadding_brk4" translate="label" type="text" sortOrder="350" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>StagePadding</label>
                    <depends>
                        <field id="center_brk4">0</field>
                    </depends>
                    <comment>Padding left and right on stage (can see neighbours).</comment>
                </field>
            </group>
            <group id="reviews_widget" translate="label" type="text" sortOrder="100" showInDefault="1" showInWebsite="1" showInStore="1">
                <label>Product Reviews Carousel Settings</label>

                <field id="info" translate="label" type="label" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                    <comment><![CDATA[ Showing Product Reviews in OWL carousel requires an additional extension, <a target="_blank" href="https://www.weltpixel.com/magento-2-product-reviews-and-rating-extension.html">Magento 2 Product Reviews & Rating</a>. Please make sure to download and install it to enable this functionality. ]]></comment>
                </field>
                <field id="title" translate="label" type="text" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Title</label>
                    <comment>Insert custom title to be displayed on the carousel. For no title leave field empty.</comment>
                </field>
                <field id="random_sort" translate="label" type="select" sortOrder="70" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Random Sort</label>
                    <comment>If enabled, the reviews in the carousel are displayed in random order on each refresh.</comment>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                </field>
                <field id="max_items" translate="label" type="text" sortOrder="80" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Max Items</label>
                    <comment>The total number of reviews to be loaded in the carousel.</comment>
                </field>
                <field id="review_title_max_chars" translate="label comment" type="text" sortOrder="81" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Max characters in the review title</label>
                    <comment>The total number of characters to be displayed in the carousel for the review title (Leave empty or 0 to display the full title).</comment>
                    <validate>validate-number</validate>
                </field>
                <field id="review_content_max_chars" translate="label comment" type="text" sortOrder="82" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Max characters in the review content</label>
                    <comment>The total number of characters to be displayed in the carousel for the review content (Leave empty or 0 to display the full content).</comment>
                    <validate>validate-number</validate>
                </field>
                <field id="slide_by" translate="label" type="text" sortOrder="83" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Slide By</label>
                    <comment><![CDATA[ Insert how many items to slide at once. Default value: 1 <br> Note: On breakpoints the value will auto adjust to visible items. ]]></comment>
                    <validate>validate-number validate-greater-than-zero validate-no-empty</validate>
                </field>

                <!--Separator Slider-->

                <field id="separatorSlider" translate="label" type="text" sortOrder="85" showInDefault="1" showInWebsite="1" showInStore="1">
                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorslide</frontend_model>
                </field>
                <field id="loop" translate="label" type="select" sortOrder="140" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Loop</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>Inifnity loop. Duplicate last and first items to get loop illusion.</comment>
                </field>
                <field id="margin" translate="label" type="text" sortOrder="150" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Margin</label>
                    <comment>Set right margin for each item in carousel. Example: for a margin of 30px enter 30 in the field.</comment>
                </field>
                <field id="lazyLoad" translate="label" type="select" sortOrder="160" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>LazyLoad</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>Lazy Load delays loading of images. Images outside of viewport are not loaded until user scrolls to them.</comment>
                </field>
                <field id="autoplay" translate="label" type="select" sortOrder="170" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Autoplay</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                </field>
                <field id="autoplayTimeout" translate="label" type="text" sortOrder="180" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>AutoplayTimeout</label>
                    <depends>
                        <field id="autoplay">1</field>
                    </depends>
                    <comment>Autoplay interval timeout. Set time between changing products (in milliseconds, for Example: 4000, for 4 seconds))</comment>
                </field>
                <field id="autoplayHoverPause" translate="label" type="select" sortOrder="190" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>AutoplayHoverPause</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <depends>
                        <field id="autoplay">1</field>
                    </depends>
                    <comment>Set the autoplay to pause on mouse hover.</comment>
                </field>
                <field id="autoheight" translate="label" type="select" sortOrder="192" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Auto Height</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                </field>
                <field id="navSpeed" translate="label comment" type="text" sortOrder="193" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Next/Prev button Transition Speed</label>
                    <comment>Set the speed for the transition animation when clicking the Next/Prev buttons. Insert value in ms. Write “4000” for a 4 second timeout.</comment>
                </field>
                <field id="dotsSpeed" translate="label comment" type="text" sortOrder="194" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Dots Transition Speed</label>
                    <comment>Set the speed for the transition animation when clicking the Dots. Insert value in ms. Write “4000” for a 4 second timeout.</comment>
                </field>
                <field id="rtl" translate="label comment" type="select" sortOrder="195" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Direction Right To Left</label>
                    <comment>If True, each banner will slide from right to left.</comment>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                </field>

                <!--Separator Breakpoints-->

                <field id="Separatorbreakpoint" translate="label" type="text" sortOrder="196" showInDefault="1" showInWebsite="1" showInStore="1">
                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
                </field>

                <!--Separator Breakpoint 1-->
                <field id="s_1" translate="label" type="text" sortOrder="197" showInDefault="1" showInWebsite="1" showInStore="1">
                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
                </field>

                <field id="nav_brk1" translate="label" type="select" sortOrder="200" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Next/Prev Buttons</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, next/prev buttons are displayed.</comment>
                </field>
                <field id="dots_brk1" translate="label" type="select" sortOrder="205" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Dots</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, dots are displayed under carousel.</comment>
                </field>
                <field id="dotsEach_brk1" translate="label comment" type="select" sortOrder="206" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Show Dots for each Item</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, Show dots for each item.</comment>
                    <depends>
                        <field id="dots_brk1">1</field>
                    </depends>
                </field>
                <field id="items_brk1" translate="label" type="text" sortOrder="210" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Items</label>
                    <comment>The number of items you want to see on the screen. This value should be smaller than Max Items. </comment>
                </field>
                <field id="center_brk1" translate="label" type="select" sortOrder="220" showInDefault="1" showInWebsite="1" showInStore="1">
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <label>Center</label>
                    <comment>If True, carousel is centered on the screen. Works well even with an odd number of items. Carousel Breakpoint options overwrites this option. Please check below Breakpoint Carousel Options.</comment>
                </field>
                <field id="stagePadding_brk1" translate="label" type="text" sortOrder="230" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>StagePadding</label>
                    <depends>
                        <field id="center_brk1">0</field>
                    </depends>
                    <comment>Padding left and right on stage (can see neighbours).</comment>
                </field>

                <!--Separatorbreakpoint 2-->
                <field id="s_2" translate="label" type="text" sortOrder="235" showInDefault="1" showInWebsite="1" showInStore="1">
                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
                </field>

                <field id="nav_brk2" translate="label" type="select" sortOrder="240" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Next/Prev Buttons</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, next/prev buttons are displayed.</comment>
                </field>
                <field id="dots_brk2" translate="label" type="select" sortOrder="245" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Dots</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, dots are displayed under carousel.</comment>
                </field>
                <field id="dotsEach_brk2" translate="label comment" type="select" sortOrder="246" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Show Dots for each Item</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, Show dots for each item.</comment>
                    <depends>
                        <field id="dots_brk2">1</field>
                    </depends>
                </field>
                <field id="items_brk2" translate="label" type="text" sortOrder="250" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Items</label>
                    <comment>The number of items you want to see on the screen. This value should be smaller than Max Items. </comment>
                </field>
                <field id="center_brk2" translate="label" type="select" sortOrder="260" showInDefault="1" showInWebsite="1" showInStore="1">
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <label>Center</label>
                    <comment>If True, carousel is centered on the screen. Works well even with an odd number of items. Carousel Breakpoint options overwrites this option. Please check below Breakpoint Carousel Options.</comment>
                </field>
                <field id="stagePadding_brk2" translate="label" type="text" sortOrder="270" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>StagePadding</label>
                    <depends>
                        <field id="center_brk2">0</field>
                    </depends>
                    <comment>Padding left and right on stage (can see neighbours).</comment>
                </field>

                <!--Separatorbreakpoint 3-->
                <field id="s_3" translate="label" type="text" sortOrder="275" showInDefault="1" showInWebsite="1" showInStore="1">
                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
                </field>

                <field id="nav_brk3" translate="label" type="select" sortOrder="280" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Next/Prev Buttons</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, next/prev buttons are displayed.</comment>
                </field>
                <field id="dots_brk3" translate="label" type="select" sortOrder="285" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Dots</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, dots are displayed under carousel.</comment>
                </field>
                <field id="dotsEach_brk3" translate="label comment" type="select" sortOrder="286" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Show Dots for each Item</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, Show dots for each item.</comment>
                    <depends>
                        <field id="dots_brk3">1</field>
                    </depends>
                </field>
                <field id="items_brk3" translate="label" type="text" sortOrder="290" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Items</label>
                    <comment>The number of items you want to see on the screen. This value should be smaller than Max Items. </comment>
                </field>
                <field id="center_brk3" translate="label" type="select" sortOrder="300" showInDefault="1" showInWebsite="1" showInStore="1">
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <label>Center</label>
                    <comment>If True, carousel is centered on the screen. Works well even with an odd number of items. Carousel Breakpoint options overwrites this option. Please check below Breakpoint Carousel Options.</comment>
                </field>
                <field id="stagePadding_brk3" translate="label" type="text" sortOrder="310" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>StagePadding</label>
                    <depends>
                        <field id="center_brk3">0</field>
                    </depends>
                    <comment>Padding left and right on stage (can see neighbours).</comment>
                </field>

                <!--Separatorbreakpoint 3-->
                <field id="s_4" translate="label" type="text" sortOrder="315" showInDefault="1" showInWebsite="1" showInStore="1">
                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
                </field>

                <field id="nav_brk4" translate="label" type="select" sortOrder="320" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Next/Prev Buttons</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, next/prev buttons are displayed.</comment>
                </field>
                <field id="dots_brk4" translate="label" type="select" sortOrder="325" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Dots</label>
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <comment>If True, dots are displayed under carousel.</comment>
                    <depends>
                        <field id="dots_brk4">1</field>
                    </depends>
                </field>
                <field id="items_brk4" translate="label" type="text" sortOrder="330" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Items</label>
                    <comment>The number of items you want to see on the screen. This value should be smaller than Max Items. </comment>
                </field>
                <field id="center_brk4" translate="label" type="select" sortOrder="340" showInDefault="1" showInWebsite="1" showInStore="1">
                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
                    <label>Center</label>
                    <comment>If True, carousel is centered on the screen. Works well even with an odd number of items. Carousel Breakpoint options overwrites this option. Please check below Breakpoint Carousel Options.</comment>
                </field>
                <field id="stagePadding_brk4" translate="label" type="text" sortOrder="350" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>StagePadding</label>
                    <depends>
                        <field id="center_brk4">0</field>
                    </depends>
                    <comment>Padding left and right on stage (can see neighbours).</comment>
                </field>
            </group>

        </section>
        <section id="weltpixel_owl_slider_config" translate="label" type="text" sortOrder="181" showInDefault="1" showInWebsite="1" showInStore="1">
            <label>Owl Slider Pro</label>
            <tab>weltpixel</tab>
            <resource>WeltPixel_OwlCarouselSlider::owlcarouselslider_settings</resource>
            <group id="general_module_information" translate="label" type="text" sortOrder="0" showInDefault="1" showInWebsite="1" showInStore="1">
                <label>Responsive Banner Slider and OWL Carousel PRO</label>
                <attribute type="expanded">1</attribute>
                <fieldset_css>weltpixel-module-information-header active</fieldset_css>
                <field id="separator_product_dimensions" translate="button_label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                    <frontend_model>WeltPixel\Backend\Block\Adminhtml\System\Config\ModuleInformation</frontend_model>
                    <button_label>WeltPixel_OwlCarouselSlider</button_label>
                </field>
            </group>
            <group id="general" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                <label>General Settings</label>
                <field id="separatorGeneralSlider" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\SeparatorGeneralSlider</frontend_model>
                </field>
                <field id="enable_google_tracking" translate="label" type="select" sortOrder="50" showInDefault="1" showInWebsite="1" showInStore="1" >
                    <label>Enable Google Analytics Tracking</label>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                    <comment><![CDATA[<b>Hint:</b> Requires Installation of <a href="https://www.weltpixel.com/google-analytics-4-ga4-with-gtm-support-for-magento-2.html" target="_blank" >Google Analytics 4 (GA4) With GTM Support Extension</a>. This feature will allow you to track Banner Click-Through-Rate (CTR) and revenue generated by the banner. ]]></comment>
                </field>
                <field id="separatorGeneralCarousel" translate="label" type="text" sortOrder="55" showInDefault="1" showInWebsite="1" showInStore="1">
                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\SeparatorGeneralCarousel</frontend_model>
                </field>
                <field id="enable_hover_image" translate="label tooltip comment" type="select" sortOrder="60" showInDefault="1" showInWebsite="1" showInStore="1" >
                    <label>Enable Hover Image on products</label>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                    <tooltip>Select the hover image Product -> Edit -> Images -> Listing Hover Image</tooltip>
                    <comment>Enable Hover Image for products in carousel. Select the hover image per product.
                        Go to Product -> Edit the product-> Images -> Listing Hover Image</comment>
                </field>
                <field id="mobile_breakpoint" translate="label comment" type="text" sortOrder="70" showInDefault="1" showInWebsite="1" showInStore="1" >
                    <label>Mobile Breakpoint</label>
                    <validate>required validate-number</validate>
                    <comment>Specify a valid number ( Ex: 778 ). At this breakpoint the mobile / desktop banner images will be switched.</comment>
                </field>
                <field id="default_loader" translate="label comment" type="select" sortOrder="70" showInDefault="1" showInWebsite="1" showInStore="1" >
                    <label>Use Default Loading Image</label>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                    <comment>Use default loading image before sliders are rendered</comment>
                </field>
                <field id="loader_image" translate="label comment" type="image" sortOrder="80" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Custom Loading Image</label>
                    <backend_model>Magento\Config\Model\Config\Backend\Image</backend_model>
                    <upload_dir config="system/filesystem/media" scope_info="1">weltpixel/owlcarouselslider/loaderimage</upload_dir>
                    <base_url type="media" scope_info="1">weltpixel/owlcarouselslider/loaderimage</base_url>
                    <comment><![CDATA[ Select image displayed before carousel is displayed. It is recommended to upload a gif. ]]></comment>
                    <depends>
                        <field id="default_loader">0</field>
                    </depends>
                </field>
            </group>
        </section>
    </system>
</config>
