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

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
14338 1669 5164

@Aaron_mihell1 


Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

or add just two section i will give code show hide

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,

The link my store is www.furfree.co.uk

thank you for the help.

0 Likes
KetanKumar
Shopify Partner
14338 1669 5164

@Aaron_mihell1 

are fixed this?

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 haven't managed to figure this problem out.

Would you be able to help?

Thank you

0 Likes
KetanKumar
Shopify Partner
14338 1669 5164

@Aaron_mihell1 

Yes, sure i can see 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

I just want to have a different image fo mobile on the slideshow of my homepage.

The code I have added is for the editing the slideshow. If you need any other code, let me know?

I'm not sure what you mean by 'you can only see one section'?

0 Likes
KetanKumar
Shopify Partner
14338 1669 5164

@Aaron_mihell1 

can you please add one more section below main slideshow

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

Could you elaborate please? Do you mean within the code or on the website?

0 Likes
KetanKumar
Shopify Partner
14338 1669 5164

@Aaron_mihell1 

It can be done by doing some code customization. please send me a personal message and we can discuss what you'd like

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