Adding a separate homepage slide show for mobile.

Aaron_Mihell
New Member
4 0 0

Hi. I want to add a separate slide show 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 %}

 

0 Likes
neeravmakwana
Shopify Partner
164 29 32

Hi Aaron, Can you please check if this is what you're looking for: 

https://community.shopify.com/c/Shopify-Design/Changing-the-hero-sliding-image-for-mobile-only-Brook...

0 Likes