Hi. I want to add a separate slideshow image for my homepage on mobile but I am unsure on how to do it. I am using a third party theme but know the rough area on where to look to make the changes.
I think i need to be looking in the section-slideshow.liquid file but am unsure what code I need to add. Preferably I want to add code to then allow me to make the changes within the visual editor if possible.
If anyone could help, that would be great? Thanks
Site link: www.furfree.co.uk
Here is the code I believe I need to make changes to:
<div data-section-id="{{ section.id }}" data-section-type="section-slideshow-v5" style="{% if section.settings.margin_top != blank %}margin-top: {{section.settings.margin_top}}px;{%endif%} {% if section.settings.margin_bottom != blank %}margin-bottom: {{section.settings.margin_bottom}}px;{% endif %} {% if section.settings.sections_layout == "dark" %}background: {{section.settings.sections_bg_color}};{% endif %}">
<div class="section-slideshow-v5">
<div class="js-slideshow-v5">
{% if section.blocks.size > 0 %}
{% for block in section.blocks %}
{% if block.type == "slideshow" %}
<div class="itemv-slide-h5">
<div class=" {% if section.settings.select_effect == 'no_effect' %} info-sideh5-no-effect {% elsif section.settings.select_effect == 'Effect_1' %} info-sideh5 {% elsif section.settings.select_effect == 'Effect_2' %} info-sideh5 effect2 {% endif %}">
<div class="picture-slideshow">
{% if block.settings.block_banerimage != blank %}
<a href="{{block.setting.block_url}}">
<img class="w-100" src="{{block.settings.block_banerimage | img_url: 'master'}}" class="img-responsive img_slideh1" alt="">
</a>
{% else %}
<a href="">
<img class="w-100" src="//placehold.it/1920x1000" class="img-responsive img_slideh1" alt="slideshow">
</a>
{% endif %}
</div>
<div class="{% if block.settings.select_position_content == 'left' %} box-content {% elsif block.settings.select_position_content == 'center' %} box-content-center {% elsif block.settings.select_position_content == 'right' %} box-content-right {% endif %} " >
{% if block.settings.block_title_top and block.settings.block_title_top2 and block.settings.block_buton != blank %}
<div class="box-info box-info-{{block.id}}">
<div class="box-title">
{% if block.settings.block_title_top != blank %}
<h3 class="titlebig mb-0" style="color:{{block.settings.color_block_title_top}};">{{ block.settings.block_title_top }}</h3>
{% endif %}
</div>
<div class="box-title2">
{% if block.settings.block_title_top2 != blank %}
<h3 class="title-small mb-0" style="color:{{block.settings.color_block_title_top2}};">{{ block.settings.block_title_top2 }}</h3>
{% endif %}
</div>
{% if block.settings.block_buton != blank %}
<a class="mt-4 button-main1 button-shop-{{block.id}} " href="{{block.settings.block_url}}">
{{ block.settings.block_buton }}
</a>
{% endif %}
</div>
{% endif %}
</div>
</div>
</div>
{% endif %}
{% endfor %}
{% endif %}
</div>
</div>
</div>
<script>
jQuery(document).ready(function($)
{
$('.js-slideshow-v5').slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 3500,
dots: true,
arrows: true,
{% if section.settings.select_effect == 'Effect_1' or section.settings.select_effect == 'Effect_2'%}
fade : true,
{% endif %}
prevArrow:'<button type="button" class="prev-slide slick-arrow"><i class="fa fa-long-arrow-left"></i> </button>',
nextArrow:'<button type="button" class="next-slide slick-arrow"><i class="fa fa-long-arrow-right"></i></button>',
responsive: [
{
breakpoint: 1200,
settings: {
infinite: true,
dots: true ,
arrows: false
}
},
{
breakpoint: 1024,
settings: {
dots: true ,
arrows: false
}
},
{
breakpoint:600,
settings: {
dots: true ,
arrows: false,
autoplay: true,
}
}
]
});
})
</script>
<style>
{% if section.blocks.size > 0 %}
{% for block in section.blocks %}
{% if block.type == "slideshow" %}
.section-slideshow-v5 .button-shop-{{block.id}} {
color : {{block.settings.color_button}} !important;
background: {{block.settings.bg_color_button}};
}
.section-slideshow-v5 .button-shop-{{block.id}}:hover {
color : {{block.settings.color_button_hover}} !important;
background: {{block.settings.bg_color_button_hover}};
}
{% endif %}
{% endfor %}
{% endif %}
</style>
{% schema %}
{
"name": "Slideshow v5",
"class": "index-section",
"settings": [
{
"type": "select",
"id": "select_effect",
"label": "Effect Slide",
"options": [
{
"value": "no_effect",
"label": "No Effect"
},
{
"value": "Effect_1",
"label": "Effect #1"
},
{
"value": "Effect_2",
"label": "Effect #2"
}
],
"default": "no_effect"
},
{
"type": "header",
"content": "Section Space"
},
{
"type": "text",
"id": "margin_top",
"label": "Margin Top",
"info": "Defined in pixels. Do not add the 'px' unit."
},
{
"type": "text",
"id": "margin_bottom",
"label": "Margin Bottom",
"info": "Defined in pixels. Do not add the 'px' unit."
}
],
"blocks": [
{
"type": "slideshow",
"name": "slideshow",
"settings": [
{
"type": "header",
"content": "Image Slide"
},
{
"type": "image_picker",
"id": "block_banerimage",
"label": "Image slideshow",
"info": "1881 x 967px recommended"
},
{
"type": "header",
"content": "Position Content"
},
{
"type": "select",
"id": "select_position_content",
"label": "Choose the position content",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
],
"default": "left"
},
{
"type": "text",
"id": "block_title_top",
"label": "Title sideshow top",
"default": "Basic Collection"
},
{
"type": "color",
"id": "color_block_title_top",
"label": "Color Title sideshow top 1",
"default": "#010101"
},
{
"type": "text",
"id": "block_title_top2",
"label": "Title sideshow top 2",
"default": "Style Destination"
},
{
"type": "color",
"id": "color_block_title_top2",
"label": "Color Title sideshow top 2",
"default": "#010101"
},
{
"type": "text",
"id": "block_buton",
"label": "Button slideshow",
"default": "Shop now"
},
{
"type": "color",
"id": "color_button",
"label": "Color button",
"default": "#fff"
},
{
"type": "color",
"id": "bg_color_button",
"label": "Color hover button",
"default": "#000"
},
{
"type": "color",
"id": "color_button_hover",
"label": "Color button hover",
"default": "#fff"
},
{
"type": "color",
"id": "bg_color_button_hover",
"label": "Background button hover",
"default": "#bdb099"
},
{
"type": "url",
"id": "block_url",
"label": "URL slideshow",
"default": "/collections/all"
}
]
}
],
"presets": [
{
"name": "Slideshow v5",
"category": "Slideshow",
"blocks": [
{
"type": "slideshow",
"settings": {
"block_title_top": "Go Electric Bike",
"block_title_top2": "One electric bike that does it all",
"block_buton": "Shop now"
}
},
{
"type": "slideshow",
"settings": {
"block_title_top": "The best E-bike",
"block_title_top2": "The electric bike for urban riders",
"block_buton": "Shop now"
}
}
]
}
]
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}
