Adding a separate slideshow on the homepage for mobile

Aaron_mihell1
Excursionist
22 0 5

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 %}

 

KetanKumar
Shopify Partner
14046 1636 5033

@Aaron_mihell1 

do you have added another section so i will show/hide or do you need only one section?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Aaron_mihell1
Excursionist
22 0 5

Hi Ketan,

I'm not exactly sure what you mean?

I only what a different image on the homepage for mobile use.

0 Likes