Sign up
Quick links
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

How do I decrease the size of the slideshow?

‎01-25-2021 02:16 PM
Brianmonteiro54
Tourist
4 0 1

my site is https://atacadaodosobjetos.com/ the site password is brian

the slide size for pc is too big and i would like to decrease the slide size

 

the slide code is this:

 

Click to expand...
{% if section.blocks.size > 0 %}
 
{% assign- autoplay = section.settings.autoplay -%}
{% assign- autoplaySpeed = section.settings.slideshow_speed -%}
{% assign- fade = section.settings.slideshow_transition -%}
{% assign- dots =  section.settings.dots -%}
 
<section class="home-slideshow" id="slideshow-{{section.id}}" data-loader-script="{{ 'halo.slide-show.js' | asset_url }}">
    <div class="{% if section.settings.layout == 'default' %}container{% elsif section.settings.layout == 'padd_60' %}container-padd60{% else %}container-fluid{% endif %}">
        <div class="row">
            <div class ="no-padd col-12">
                <div class="slideshow {% if section.settings.style_slideshow == 'style_2' %}style_2{% endif %}" data-auto-video="{{ section.settings.auto_playvideo }}"{% if section.blocks.size > 1 %} data-init-slideshow data-dots="{{ dots }}" data-autoplay="{{ autoplay }}" data-autoplay-speed="{{ autoplaySpeed }}" data-fade="{{ fade }}"{% endif %} data-arrows="{{ section.settings.arrow_active }}">
                {% for block in section.blocks %}
                {% if block.settings.dpl_slide_img %}
                <div class="item" id="block-{{block.id}}">
                {% if block.type == 'image' %}
                    {%- assign preview_img = block.settings.image_slide -%}
                    <div class="images-contain">
                        {% if block.settings.image_slide != blank %}
                        {%- assign img_url = block.settings.image_slide | img_url: 'master' -%}
                        <div class="adaptive_height {% if block.settings.image_slide_mb != blank %} slide-pc{% endif %}" style="padding-top: {{ 1 | divided_by: preview_img.aspect_ratio | times: 100 }}%">
                            <a {% if block.settings.lb_product_1 != blank or block.settings.lb_product_2 != blank or block.settings.lb_product_3 != blank %}href="javascript&colon;void(0)"{% else %}href="{{ block.settings.link }}"{% endif %} class="slide-image">
                                <img data-srcset="{{ img_url }}" alt="{{ block.settings.image_slide.alt | default: shop.name }}" class="lazyload" data-sizes="auto">
                            </a>
                        </div>
 
                        {% else %}
 
                        <div class="not_img {% if block.settings.image_slide_mb != blank %} slide-pc{% endif %}">
                            1880 x 720px
                        </div>
                        {% endif %}
 
                        {% if block.settings.image_slide_mb != blank %}
                        {%- assign preview_img_mb = block.settings.image_slide_mb -%}
                        {%- assign img_url_mb = block.settings.image_slide_mb | img_url: 'master' -%}
                        <div class="adaptive_height slide-mobile" style="padding-top: {{ 1 | divided_by: preview_img_mb.aspect_ratio | times: 100 }}%">
                            <a {% if block.settings.lb_product_1 != blank or block.settings.lb_product_2 != blank or block.settings.lb_product_3 != blank %}href="javascript&colon;void(0)"{% else %}href="{{ block.settings.link }}"{% endif %} class="slide-image">
                                <img data-srcset="{{ img_url_mb }}" alt="{{ block.settings.image_slide_mb.alt | default: shop.name }}" class="lazyload" data-sizes="auto">
                            </a>
                        </div>
                        {% endif %}
 
                        {% if block.settings.lb_product_1 != blank %}
                        <div class="select-icon lb-icon-1-{{ block.id }}" data-lookbook-icon data-handle="{{ block.settings.lb_product_1 }}" style="top:{{ block.settings.top_position_1 }}%; left:{{ block.settings.left_position_1 }}%;">
                            <span class="glyphicon"></span>
                        </div>
                        {% endif %}
 
                        {% if block.settings.lb_product_2 != blank %}
                        <div class="select-icon lb-icon-2-{{ block.id }}" data-lookbook-icon data-handle="{{ block.settings.lb_product_2 }}" style="top:{{ block.settings.top_position_2 }}%; left:{{ block.settings.left_position_2 }}%;">
                            <span class="glyphicon"></span>
                        </div>
                        {% endif %}
 
                        {% if block.settings.lb_product_3 != blank %}
                        <div class="select-icon lb-icon-3-{{ block.id }}" data-lookbook-icon data-handle="{{ block.settings.lb_product_3 }}" style="top:{{ block.settings.top_position_3 }}%; left:{{ block.settings.left_position_3 }}%;">
                            <span class="glyphicon"></span>
                        </div>
                        {% endif %}
 
                        <style type="text/css">
                            #slideshow-{{section.id}} .lb-icon-1-{{ block.id }} .glyphicon {
                            background-color: {{ block.settings.dots_bg_color_1 }};
                            }
 
                            #slideshow-{{section.id}} .lb-icon-1-{{ block.id }} .glyphicon:before,
                            #slideshow-{{section.id}} .lb-icon-1-{{ block.id }} .glyphicon:after {
                            background-color: {{ block.settings.dots_color_1 }};
                            }
 
                            #slideshow-{{section.id}} .lb-icon-1-{{ block.id }}:before{
                            color: {{ block.settings.dots_shadow_color_1 }};
                            }
 
                            #slideshow-{{section.id}} .lb-icon-2-{{ block.id }} .glyphicon {
                            background-color: {{ block.settings.dots_bg_color_2 }};
                            }
 
                            #slideshow-{{section.id}} .lb-icon-2-{{ block.id }} .glyphicon:before,
                            #slideshow-{{section.id}} .lb-icon-2-{{ block.id }} .glyphicon:after {
                            background-color: {{ block.settings.dots_color_2 }};
                            }
 
                            #slideshow-{{section.id}} .lb-icon-2-{{ block.id }}:before{
                            color: {{ block.settings.dots_shadow_color_2 }};
                            }
 
                            #slideshow-{{section.id}} .lb-icon-3-{{ block.id }} .glyphicon {
                            background-color: {{ block.settings.dots_bg_color_3 }};
                            }
 
                            #slideshow-{{section.id}} .lb-icon-3-{{ block.id }} .glyphicon:before,
                            #slideshow-{{section.id}} .lb-icon-3-{{ block.id }} .glyphicon:after {
                            background-color: {{ block.settings.dots_color_3 }};
                            }
 
                            #slideshow-{{section.id}} .lb-icon-3-{{ block.id }}:before{
                            color: {{ block.settings.dots_shadow_color_3 }};
                            }
                            
                        </style>
                    </div>
 
 
                {% elsif block.type == 'video' %}
 
                {% if block.settings.style_video == 'youtube' %}
                <div data-video-youtube class="item slide-youtube embed-responsive item-video" id="slide-{{ block.id }}">
                    <div class="fluid-width-video-wrapper">
                        <iframe class="youtube-player" id="player_{{ block.id }}" width="100%" height="100%" data-video-id="{{ block.settings.video_link }}" src="https://www.youtube.com/embed/{{ block.settings.video_link }}?enablejsapi=1&rel=0&autoplay=0&mute=1" frameborder="0" allowfullscreen=""></iframe>
                    </div>
                </div>
 
                {% else %}
 
                <div data-video-mp4 class="item slide-video item-video" id="slide-{{ block.id }}">
                    <div class="fluid-width-video-wrapper">
                        <video class="video" muted playsinline preload="none" autoplay loop>
                            <source type="video/mp4" src="{{ block.settings.video_mp4_link }}">
                        </video>
                    </div>
                </div>
                {% endif %}
 
                {% endif %}
                {% if block.settings.heading != blank or block.settings.slide-des != blank or block.settings.button_slide != blank %}
                <div class="slide-content {% if block.settings.style_content == 'style_2' %}style_2 {% endif %}{% if block.settings.alignment == 'left' %}abs_left{% elsif block.settings.alignment == 'right' %}abs_right{% else %}abs_center{% endif %} {% if block.settings.text_alignment == 'left' %}text_left{% elsif block.settings.text_alignment == 'right' %}text_right{% else %}text_center{% endif %}">
                {% if block.settings.heading != blank or block.settings.sub_heading %}
                {% if block.settings.sub_heading != blank %}
                <h3 class="slide-sub" style="{% if block.settings.font_size_sub_heading != blank %}
                    font-size: {{ block.settings.font_size_sub_heading }};
                    {% endif %}
                    {% if block.settings.color_sub_heading != blank %}
                    color:{{ block.settings.color_sub_heading }};
                    {% endif %}">
                    {% render 'multilang' with block.settings.sub_heading  %}
                </h3>
                {% endif %}
                <h2 class="slide-heading"
                    style="{% if block.settings.font_size_heading != blank %}
                            font-size: {{ block.settings.font_size_heading }};
                            {% endif %}
                            {% if block.settings.color_heading != blank %}
                            color:{{ block.settings.color_heading }};
                            {% endif %}
                            {% if block.settings.sub_heading != blank %}
                            text-transform: capitalize;
                            margin-bottom: 12px;
                            {% endif %}">
                    {% if block.settings.sub_heading == blank %}
                        <span class="line" style="background-color: {{ block.settings.color_heading }};"></span>
                    {% endif %}
                    {% render 'multilang' with block.settings.heading  %}
                </h2>
                {% endif %}
 
                {% if block.settings.slide-des != blank %}
                <p class="slide-text"
                    style="{% if block.settings.font_size_des != blank %}
                            font-size: {{ block.settings.font_size_des }};
                            {% endif %}
                            {% if block.settings.color_des != blank %}
                            color: {{ block.settings.color_des }};
                            {% endif %}">
                    {% render 'multilang' with block.settings.slide-des  %}
                </p>
                <style>
                    @_media (min-width: 769px){
                        {% if block.settings.sub_heading != blank %}
                        .slide-content .slide-text{
                            margin-bottom: 45px;
                        }
                        {% endif %}
                    }
                </style>
                {% endif %}
 
                {% if block.settings.button_slide != blank %}
                <a href="{{ block.settings.link }}" class="slide-button btn{% if block.settings.slide-des == blank %} no-des{% endif %}"
                    style="{% if block.settings.bg_button != blank %}
                            background-color:{{ block.settings.bg_button }};
                            {% endif %}
                            {% if block.settings.border_button != blank %}
                            border-color:{{ block.settings.border_button }};
                            {% endif %}
                            {% if block.settings.color_button != blank %}
                            color:{{ block.settings.color_button }};
                            {% endif %}
                            {% if block.settings.sub_heading != blank %}
                            min-width: 167px;
                            padding: 15px 25px 13px;
                            border-radius: 30px;
                            font-weight: 600;
                            {% endif %}
                            {% if settings.style_button == 'style_button_2' %}
                                padding: 20px 25px 18px;
                            {% endif %}
                            ">
                    {% render 'multilang' with block.settings.button_slide  %}
                </a>
                {% endif %}
                <style>
                    @_media (max-width: 767px) {
                        #block-{{block.id}} .slide-content .slide-heading {
                            color: {{ block.settings.color_heading_mb }} !Important;
                        }
                        #block-{{block.id}} .slide-content .slide-sub {
                            color: {{ block.settings.color_sub_heading_mb }} !Important;
                        }
                        #block-{{block.id}} .slide-content .slide-heading .line {
                            background-color: {{ block.settings.color_heading_mb }} !Important;
                        }
                        #block-{{block.id}} .slide-content .slide-text {
                            color: {{ block.settings.color_des_mb }} !Important;
                        }
                        #block-{{block.id}} .slide-content .slide-button {
                            background-color:{{ block.settings.bg_button_mb }} !Important;
                            border-color:{{ block.settings.border_button_mb }} !Important;
                            color:{{ block.settings.color_button_mb }} !Important;
                        }
                    }
                    #block-{{block.id}} .slide-content.style_2 {
                        background-color: {{ block.settings.bg_color_box }};
                    }
                    #block-{{block.id}} .slide-content.style_2:before {
                        border-color: {{ block.settings.color_border_box }};
                    }
                </style>
                </div>
                {% endif %}
                </div>
                {% endif %}
                {% endfor %}
                </div>
                <div class="custom-arrow-left">
                  <div class="triangle-left"></div>
                </div>
                <div class="custom-arrow-right">
                  <div class="triangle-right"></div>
                </div>
            </div>
        </div>
    </div>
</section>
 
<style>
    {% assign arrow_color =  section.settings.arrow_color %}
    {% assign arrow_border_color =  section.settings.arrow_border_color %}
    {% assign margin_bottom =  section.settings.margin_bottom %}
    {% assign position_slick_arrow =  section.settings.position_slick_arrow %}
    {% assign arrow_bg_color =  section.settings.arrow_bg_color %}
 
    {% if section.blocks.size > 1 %}
    #slideshow-{{section.id}} .slick-arrow {
        color: {{ arrow_color }};
        border-color: {{ arrow_border_color }};
        background-color: {{ arrow_bg_color }};
    }
 
    #slideshow-{{section.id}} .slick-arrow.slick-prev {
        left: {{ position_slick_arrow }};
    }
 
    #slideshow-{{section.id}} .slick-arrow.slick-next {
        right: {{ position_slick_arrow }};
    }
 
    {% endif %}
 
    {% if section.settings.min_width_banner_button != blank %}
    #slideshow-{{section.id}} .slide-content .slide-button {
        min-width: {{ section.settings.min_width_banner_button }};
    }
    {% endif %}
 
    .fluid-width-video-wrapper {
        padding-top: {{ section.settings.video_height }}!important;
    }
 
    #slideshow-{{section.id}} [data-video-mp4] .fluid-width-video-wrapper:before {
        background: {{ section.settings.bg_video }};
        opacity: {{ section.settings.bg_overlay_opacity | divided_by: 100.00 }};
    }
 
    @_media (max-width: 767px) {
        #slideshow-{{section.id}} {
            margin-bottom: {{ section.settings.margin_bottom_mb }}px;
        }
    }
 
    @_media (min-width: 768px) and (max-width: 1199px) {
        #slideshow-{{section.id}} {
            margin-bottom: {{ section.settings.margin_bottom_tab }}px;
        }
    }
 
    @_media (min-width: 1200px) {
        #slideshow-{{section.id}} {
            margin-bottom: {{ margin_bottom }}px;
        }
    }
 
    @_media (min-width: 768px) {
        {% if section.settings.style_slideshow == 'style_2' %}
            #slideshow-{{section.id}} .slick-dots li button {
                border-color: {{ section.settings.dots_color }};
                background: rgba(255,255,255,0);
                border-width: 1.5px;
            }
 
            #slideshow-{{section.id}} .slick-dots li.slick-active button {
                background: {{ section.settings.dots_active_color }};
                border-color: {{ section.settings.dots_active_color }};
            }
            #slideshow-{{section.id}} .slick-dots {
                background-color: {{ section.settings.bg_dots_color }};
            }
        {% else %}
            #slideshow-{{section.id}} .slick-dots li button {
                border-color: {{ section.settings.dots_color }};
                background: {{ section.settings.dots_color }};
                border-width: 1.5px;
            }
 
            #slideshow-{{section.id}} .slick-dots li.slick-active button {
                background: rgba(255,255,255,0);
                border-color: {{ section.settings.dots_active_color }};
            }
        {% endif %}
 
        {% if section.settings.dots_opacity %}
        #slideshow-{{section.id}} .slick-dots li:not(.slick-active) button {
            opacity: 0.8;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=80)";
            filter: alpha(opacity=80);
        }
        {% endif %}
    }
 
    
</style>
{% endif %}
 
 
{% schema %}
    {
        "name": "Slideshow",
        "class": "home-slideshow-sections",
        "max_blocks": 10,
        "settings": [
            {
                "type": "select",
                "id": "layout",
                "label": "Slideshow Layout:",
                "options": [
                    {
                        "value": "default",
                        "label": "Default"
                    },
                    {
                        "value": "padd_60",
                        "label": "Boxed"
                    },
                    {
                        "value": "full",
                        "label": "Full Width"
                    }
                ],
                "default": "full"
            },
            {
                "type": "header",
                "content": "Margin Bottom:"
            },
            {
                "type": "range",
                "id": "margin_bottom_mb",
                "label": "Mobile",
                "min": 0,
                "max": 100,
                "step": 1,
                "default": 20
            },
            {
                "type": "range",
                "id": "margin_bottom_tab",
                "label": "Tablet",
                "min": 0,
                "max": 100,
                "step": 1,
                "default": 20
            },
            {
                "type": "range",
                "id": "margin_bottom",
                "label": "Desktop",
                "min": 0,
                "max": 100,
                "step": 1,
                "default": 30
            },
            {
                "type": "header",
                "content": "Settings for Slideshow"
            },
            {
                "type": "select",
                "id": "style_slideshow",
                "label": "Style Slideshow",
                "default": "style_1",
                "options": [
                {
                    "value": "style_1",
                    "label": "Style 1"
                },
                {
                    "value": "style_2",
                    "label": "Style 2"
                }
                ]
            },
            {
                "type": "checkbox",
                "id": "autoplay",
                "label": "Slideshow Auto Play",
                "default": true
            },
            {
                "type": "select",
                "id": "slideshow_speed",
                "label": "Change slides every",
 
                "options": [
                    { "value": "5000", "label": "5 seconds" },
                    { "value": "6000", "label": "6 seconds" },
                    { "value": "7000", "label": "7 seconds" },
                    { "value": "8000", "label": "8 seconds" },
                    { "value": "9000", "label": "9 seconds" },
                    { "value": "10000", "label": "10 seconds" }
                ],
                "default": "5000"
            },
            {
                "type": "select",
                "id": "slideshow_transition",
                "label": "Slideshow transition effect",
                "options": [
                    {
                    "value": "false",
                    "label": "Slide"
                    },
                    {
                    "value": "true",
                    "label": "Fade"
                    }
                ],
                "default": "true"
            },
            {
                "type" : "radio",
                "id" : "dots",
                "label" : "Show Dots for Slideshow (Desktop)",
                "options": [
                    {
                        "value": "true",
                        "label": "True"
                    },
                    {
                        "value": "false",
                        "label": "False"
                    }
                ],
                "default": "true"
            },
            {
                "type": "color",
                "id": "dots_color",
                "label": "Dots color",
                "default": "#707979",
                "info": "Default Value: #707979"
            },
            {
                "type": "color",
                "id": "dots_active_color",
                "label": "Dots Active color",
                "default": "#505656",
                "info": "Default Value: #505656"
            },
            {
                "type": "checkbox",
                "id": "dots_opacity",
                "label": "Dots Opacity (80%)",
                "default": false
            },
            {
                "type": "color",
                "id": "bg_dots_color",
                "label": "Dots Background Style 2",
                "default": "#bababa",
                "info": "======================="
            },
            {
                "type": "checkbox",
                "id": "arrow_active",
                "label": "Show Arrow for Slideshow (Desktop)",
                "default": true
            },
            {
                "type": "color",
                "id": "arrow_color",
                "label": "Arrow color",
                "default": "#666d6d",
                "info": "Default Value: #666d6d"
            },
            {
                "type": "color",
                "id": "arrow_border_color",
                "label": "Arrow Border color",
                "default": "#666d6d",
                "info": "Default Value: #666d6d"
            },
            {
                "type": "color",
                "id": "arrow_bg_color",
                "label": "Arrow background color",
                "default": "#fff",
                "info": "Default Value: #fff"
            },
            {
                "type" : "text",
                "id" : "position_slick_arrow",
                "label" : "Position Arrow - Unit % or px",
                "default" : "10%"
            },
            {
                "type" : "text",
                "id" : "min_width_banner_button",
                "label" : "Banner Button Width",
                "info": "Ex: 270px"
            },
            {
                "type": "header",
                "content": "Settings for Video"
            },
            {
                "type" : "color",
                "id" : "bg_video",
                "label" : "Background Color video",
                "default" : "#866965"
            },
            {
                "type": "range",
                "id": "bg_overlay_opacity",
                "label":"Opacity",
                "min": 0,
                "max": 100,
                "step": 1,
                "unit": "%",
                "default": 40
            },
            {
                "type": "text",
                "id": "video_height",
                "label": "Slideshow Video Height",
                "default": "41.7%",
                "info": "You can adjust the height of video to be fit with slider image by %. Example: 30%, 47.25%, 51%."
            },
            {
                "type": "checkbox",
                "id": "auto_playvideo",
                "label": "Autoplay video",
                "default": true
            }
        ],
 
        "blocks" : [
            {
                "type": "image",
                "name": "Image SlideShow",
                "settings":[
                    {
                        "type": "checkbox",
                        "id": "dpl_slide_img",
                        "label" : "Enable",
                        "default" : true
                    },
                    {
                        "type": "image_picker",
                        "id": "image_slide",
                        "label" : "Select Image",
                        "info": "Recommended Image: Width x Height (1880 x 720)px"
                    },
                    {
                        "type": "image_picker",
                        "id": "image_slide_mb",
                        "label" : "Select Image Mobile",
                        "info": "Recommended Image: Width x Height (450 x 300)px"
                    },
                    {
                        "type": "header",
                        "content": "Slideshow Layout",
                        "info" : "======================="
                    },
                    {
                        "type": "select",
                        "id": "style_content",
                        "label": "Style Content",
                        "default": "style_1",
                        "options": [
                        {
                            "value": "style_1",
                            "label": "Style 1"
                        },
                        {
                            "value": "style_2",
                            "label": "Style 2"
                        }
                        ]
                    },
                    {
                        "type": "select",
                        "id": "alignment",
                        "label": "Position Content",
                        "default": "left",
                        "options": [
                        {
                            "value": "left",
                            "label": "Left"
                        },
                        {
                            "value": "center",
                            "label": "Center"
                        },
                        {
                            "value": "right",
                            "label": "Right"
                        }
                        ]
                    },
                    {
                        "type": "select",
                        "id": "text_alignment",
                        "label": "Text alignment",
                        "default": "center",
                        "options": [
                        {
                            "value": "left",
                            "label": "Left"
                        },
                        {
                            "value": "center",
                            "label": "Center"
                        },
                        {
                            "value": "right",
                            "label": "Right"
                        }
                        ]
                    },
                    {
                        "type" : "color",
                        "id" : "bg_color_box",
                        "label" : "Background Color Content Style 2",
                        "default" : "#ffffff"
                    },
                    {
                        "type" : "color",
                        "id" : "color_border_box",
                        "label" : "Background Border Content Style 2",
                        "default" : "#bcbcbc"
                    },
                    {
                        "type": "header",
                        "content": "Slideshow Content",
                        "info" : "======================="
                    },
                    {
                        "type" : "text",
                        "id" : "heading",
                        "label" : "Heading",
                        "default" : "Cosmopolis"
                    },
                    {
                        "type" : "text",
                        "id" : "font_size_heading",
                        "label" : "Heading Font Size ",
                        "default" : "40px"
                    },
                    {
                        "type" : "color",
                        "id" : "color_heading",
                        "label" : "Heading Color",
                        "default" : "#232323"
                    },
                    {
                        "type" : "color",
                        "id" : "color_heading_mb",
                        "label" : "Heading Color Mobile",
                        "default" : "#fff"
                    },
                    {
                        "type" : "text",
                        "id" : "sub_heading",
                        "label" : "Sub Heading"
                    },
                    {
                        "type" : "text",
                        "id" : "font_size_sub_heading",
                        "label" : "Sub Heading Font Size ",
                        "default" : "30px"
                    },
                    {
                        "type" : "color",
                        "id" : "color_sub_heading",
                        "label" : "Sub Heading Color",
                        "default" : "#fff"
                    },
                    {
                        "type" : "color",
                        "id" : "color_sub_heading_mb",
                        "label" : "Sub Heading Color Mobile",
                        "default" : "#fff"
                    },
                    {
                        "type" : "textarea",
                        "id" : "slide-des",
                        "label" : "Slide Description",
                        "default": "Quisquemos sodales suscipit tortor ditaemcos condimentum de cosmo lacus meleifend menean diverra loremous."
                    },
                    {
                        "type" : "text",
                        "id" : "font_size_des",
                        "label" : "Description Font Size",
                        "default" : "12px"
                    },
                    {
                        "type" : "color",
                        "id" : "color_des",
                        "label" : "Description Color",
                        "default" : "#232323"
                    },
                    {
                        "type" : "color",
                        "id" : "color_des_mb",
                        "label" : "Description Color mobile",
                        "default" : "#fff"
                    },
                    {
                        "type" : "text",
                        "id" : "button_slide",
                        "label" : "Button Slideshow",
                        "default" : "Shop The Collection"
                    },
                    {
                        "type" : "url",
                        "id" : "link",
                        "label" : "Slide link"
                    },
                    {
                        "type" : "color",
                        "id" : "bg_button",
                        "label" : "Background Button",
                        "default" : "#232323"
                    },
                    {
                        "type" : "color",
                        "id" : "border_button",
                        "label" : "Border Button",
                        "default" : "#232323"
                    },
                    {
                        "type" : "color",
                        "id" : "color_button",
                        "label" : "Button Color",
                        "default" : "#fff"
                    },
                    {
                        "type" : "color",
                        "id" : "bg_button_mb",
                        "label" : "Background Button Mobile",
                        "default" : "#232323"
                    },
                    {
                        "type" : "color",
                        "id" : "border_button_mb",
                        "label" : "Border Button Mobile",
                        "default" : "#232323"
                    },
                    {
                        "type" : "color",
                        "id" : "color_button_mb",
                        "label" : "Button Color Mobile",
                        "default" : "#fff"
                    },
                    {
                        "type": "header",
                        "content": "Slideshow width Lookbook",
                        "info" : "======================="
                    },
                    {
                        "type" : "header",
                        "content" : "Product 1"
                    },
                    {
                        "type" : "product",
                        "id" : "lb_product_1",
                        "label" : "Select Product"
                    },
                    {
                        "type" : "text",
                        "id" : "top_position_1",
                        "label" : "Top Position",
                        "default" : "10",
                        "info" : "Unit %"
                    },
                    {
                        "type" : "text",
                        "id" : "left_position_1",
                        "label" : "Left Position",
                        "default" : "10",
                        "info" : "Unit %"
                    },
                    {
                        "type" : "color",
                        "id" : "dots_color_1",
                        "label" : "Select Icon Color",
                        "default" : "#fff"
                    },
                    {
                        "type" : "color",
                        "id" : "dots_bg_color_1",
                        "label" : "Select Icon Background color",
                        "default" : "#323232"
                    },
                    {
                        "type" : "color",
                        "id" : "dots_shadow_color_1",
                        "label" : "Select Icon Shadow Color",
                        "default" : "#fff",
                        "info" : "======================="
                    },
 
                    {
                        "type" : "header",
                        "content" : "Product 2"
                    },
                    {
                        "type" : "product",
                        "id" : "lb_product_2",
                        "label" : "Select Product"
                    },
                    {
                        "type" : "text",
                        "id" : "top_position_2",
                        "label" : "Top Position",
                        "default" : "10",
                        "info" : "Unit %"
                    },
                    {
                        "type" : "text",
                        "id" : "left_position_2",
                        "label" : "Left Position",
                        "default" : "10",
                        "info" : "Unit %"
                    },
                    {
                        "type" : "color",
                        "id" : "dots_color_2",
                        "label" : "Select Icon Color",
                        "default" : "#fff"
                    },
                    {
                        "type" : "color",
                        "id" : "dots_bg_color_2",
                        "label" : "Select Icon Background color",
                        "default" : "#323232"
                    },
                    {
                        "type" : "color",
                        "id" : "dots_shadow_color_2",
                        "label" : "Select Icon Shadow Color",
                        "default" : "#fff",
                        "info" : "======================="
                    },
 
                    {
                        "type" : "header",
                        "content" : "Product 3"
                    },
                    {
                        "type" : "product",
                        "id" : "lb_product_3",
                        "label" : "Select Product"
                    },
                    {
                        "type" : "text",
                        "id" : "top_position_3",
                        "label" : "Top Position",
                        "default" : "10",
                        "info" : "Unit %"
                    },
                    {
                        "type" : "text",
                        "id" : "left_position_3",
                        "label" : "Left Position",
                        "default" : "10",
                        "info" : "Unit %"
                    },
                    {
                        "type" : "color",
                        "id" : "dots_color_3",
                        "label" : "Select Icon Color",
                        "default" : "#fff"
                    },
                    {
                        "type" : "color",
                        "id" : "dots_bg_color_3",
                        "label" : "Select Icon Background color",
                        "default" : "#323232"
                    },
                    {
                        "type" : "color",
                        "id" : "dots_shadow_color_3",
                        "label" : "Select Icon Shadow Color",
                        "default" : "#fff",
                        "info" : "======================="
                    }
                ]
            },
            {
                "type": "video",
                "name": "Video Slider",
                "settings": [
{
                        "type": "checkbox",
                        "id": "dpl_slide_img",
                        "label" : "Enable",
                        "default" : true
                    },
                    {
                        "type" : "radio",
                        "id" : "style_video",
                        "label" : "Style Video",
                        "options": [
                            {
                                "value": "youtube",
                                "label": "Youtube"
                            },
                            {
                                "value": "mp4",
                                "label": "Mp4"
                            }
                        ],
                        "default": "youtube"
                    },
                    {
                        "type": "header",
                        "content": "Youtube"
                    },
                    {
                        "type": "text",
                        "id": "video_link",
                        "label": "YouTube video ID",
                        "default": "eTCtDW7O1aM",
                        "info": "[Find your YouTube video ID](https://www.youtube.com/watch?v=liJVSwOiiwg)."
                    },
                    {
                        "type": "header",
                        "content": "MP4"
                    },
                    {
                        "type": "text",
                        "id": "video_mp4_link",
                        "label": "Video link"
                    },
                    {
                        "type": "header",
                        "content": "Slideshow Content",
                        "info" : "Use for MP4 Video"
                    },
                    {
                        "type": "select",
                        "id": "alignment",
                        "label": "Text alignment",
                        "default": "left",
                        "options": [
                        {
                            "value": "left",
                            "label": "Left"
                        },
                        {
                            "value": "center",
                            "label": "Center"
                        },
                        {
                            "value": "right",
                            "label": "Right"
                        }
                        ]
                    },
                    {
                        "type" : "text",
                        "id" : "heading",
                        "label" : "Heading",
                        "default" : "Cosmopolis"
                    },
                    {
                        "type" : "text",
                        "id" : "font_size_heading",
                        "label" : "Heading Font Size ",
                        "default" : "40px"
                    },
                    {
                        "type" : "color",
                        "id" : "color_heading",
                        "label" : "Heading Color",
                        "default" : "#232323"
                    },
                    {
                        "type" : "color",
                        "id" : "color_heading_mb",
                        "label" : "Heading Color Mobile",
                        "default" : "#fff"
                    },
                    {
                        "type" : "textarea",
                        "id" : "slide-des",
                        "label" : "Slide Description",
                        "default": "Quisquemos sodales suscipit tortor ditaemcos condimentum de cosmo lacus meleifend menean diverra loremous."
                    },
                    {
                        "type" : "text",
                        "id" : "font_size_des",
                        "label" : "Description Font Size",
                        "default" : "12px"
                    },
                    {
                        "type" : "color",
                        "id" : "color_des",
                        "label" : "Description Color",
                        "default" : "#232323"
                    },
                    {
                        "type" : "color",
                        "id" : "color_des_mb",
                        "label" : "Description Color Mobile",
                        "default" : "#fff"
                    },
                    {
                        "type" : "text",
                        "id" : "button_slide",
                        "label" : "Button Slideshow",
                        "default" : "Shop The Collection"
                    },
                    {
                        "type" : "url",
                        "id" : "link",
                        "label" : "Slide link"
                    },
                    {
                        "type" : "color",
                        "id" : "bg_button",
                        "label" : "Background Button",
                        "default" : "#232323"
                    },
                    {
                        "type" : "color",
                        "id" : "border_button",
                        "label" : "Border Button",
                        "default" : "#232323"
                    },
                    {
                        "type" : "color",
                        "id" : "color_button",
                        "label" : "Button Color",
                        "default" : "#fff"
                    },
                    {
                        "type" : "color",
                        "id" : "bg_button_mb",
                        "label" : "Background Button Mobile",
                        "default" : "#232323"
                    },
                    {
                        "type" : "color",
                        "id" : "border_button_mb",
                        "label" : "Border Button Mobile",
                        "default" : "#232323"
                    },
                    {
                        "type" : "color",
                        "id" : "color_button_mb",
                        "label" : "Button Color Mobile",
                        "default" : "#fff"
                    }
                ]
            }
        ],
        "presets": [{
            "name": "Slideshow",
            "category": "Slideshow",
            "blocks": [
                {
                    "type": "image"
                }
            ]
        }]
    }
{% endschema %}

 

 

 

 

0 Likes
Reply
‎01-25-2021 05:27 PM
Dirk
Shopify Staff
Shopify Staff
760 83 175

Hey, @Brianmonteiro54 

Have you tried adjusting your slideshow layout from your theme editor? You can change it from full-width to default which will lower the height of the slideshow:

 

If there is anything else I can help you with, please let me know.

 

Dirk | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Reply
‎01-25-2021 07:45 PM
Brianmonteiro54
Tourist
4 0 1

Yes, but in the theme editor there is no way to reduce it the way I would like, then it is necessary to be directly in the code

0 Likes
Reply
‎01-26-2021 01:15 AM
diego_ezfy
Shopify Partner
1628 243 325

@Brianmonteiro54 

This is not the best way to solve this, but in your current case it's the easiest way. 


1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > theme.min.css and paste this at the bottom of the file:

 

 

@media (min-width: 749px){
.home-slideshow-sections{
transform: scale(0.8) !important;
margin-top: -21px !important;
margin-bottom: -20px !important;
}
}

 

 


You can control the values as per your wish.

0.8 = the size of the image
-21px = top spacing, can be either positive or negative
-20px = bottom spacing, can be either positive or negative

It will affect only desktop and larger devices, mobile will remain the same.

Additionally, since you're using just one single image and not a slideshow, this custom section may be useful to you.

Please let me know whether it works.

Kind regards,
Diego

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Using a free theme? Improve it with copy/paste code snippets clicking here.
◦ Looking to hire an experienced developer? Same day response: ezfycode@gmail.com.
0 Likes
Reply
Most Liked Authors
View all badges
Quick links
Facebook Twitter Youtube Instagram Linkedin Pinterest
Terms of Service Privacy Policy