How To Create Logo Slider with Schema in Shopify

  1. Online Store Themes.
  2. Click How To Create Logo Slider with Schema in Shopify Action button and choose Edit Code from the dropdown.
  3. You will see the option and click on the Add a new section button.
  4. Add a new section Logo-Slider.
  5. After creating the section, the below code.


How to Add a New Page in Magento 2expoundsofttechsolution


How To Create Logo Slider with Schema in Shopify

{% if section.settings.show_brands_slider %}
<div data-section-id="{{ section.id }}"  id="slick-{{ section.id }}" class="slickslider brands-responsive{% if section.settings.slideshow_width == 'contained' %} container mb30 {% else %} mt-30 {% endif %}" data-section-type="brands-slideshow-section">  
  {% for block in section.blocks %}
    <div class="center brand-slide">
      {% if block.settings.brand_link %}<a href="{{ block.settings.brand_link }}">{% endif %}
        <img class="img-section" src="{{ block.settings.slideshow_image | img_url: '133x' }}" alt="{{ block.settings.slideshow_image.alt }}">
      {% if block.settings.brand_link %}</a>{% endif %}
    </div>
  {% endfor %}  
</div>
{% endif %}
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/>

<script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
    <script src=" https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

{% schema %}
 {
    "name": "logo-slider",
    "max_blocks": 20,
    "settings": [
      {
        "type": "select",
        "id": "slideshow_width",
        "label": "Layout",
        "options": [
          {
            "value": "full",
            "label": "Full-width"
          },
          {
            "value": "contained",
            "label": "Contained"
          }
        ],
        "default": "full"
      },
	  {
        "type": "checkbox",
        "id": "show_brands_slider",
        "label": "Enable brands slider",
		"default": true
      },

      {
        "type": "header",
        "content": "Info"
      },
      {
        "type": "paragraph",
        "content": "You may upload up to 25 brands"
      },
	  {
        "type": "paragraph",
        "content": "Please try to use the same pixel size for all images - I've suggested 133px by 73px but you can use whatever other size you want"
      }

	],
     "blocks" : [
      {
        "type": "brand",
        "name": "Brand",
        "settings": [
      {
        "type": "header",
        "content": "Brand"
      },
      {
        "type": "image_picker",
        "id": "slideshow_image",
        "label": "Image",
		"info": "133 x 73px png recommended"
      },
      {
        "type": "url",
        "id": "brand_link",
        "label": "Link URL"
      }
	  ]
 	 }
	],
  "presets": [{
    "name": "logo-slider",
    "category": "Image",
    "settings": {
    },
    "blocks": [
      {
        "type": "brand"
      },
      {
        "type": "brand"
      },
      {
        "type": "brand"
      },
      {
        "type": "brand"
      }
    ]
  }]
 }
{% endschema %}



{% javascript %}
$(document).ready(function(){
			$('.brands-responsive').slick({
				slidesToShow: 4,
				slidesToScroll: 1,
				autoplay: true,
				autoplaySpeed: 1000,
				arrows: false,
				dots: false,
					pauseOnHover: false,
					responsive: [{
					breakpoint: 768,
					settings: {
						slidesToShow: 3
					}
				}, {
					breakpoint: 520,
					settings: {
						slidesToShow: 2
					}
				}]
			});
		});
{% endjavascript %}


{% stylesheet %}
.slick-slide img {
    display: block;
    text-align: center;
    margin: auto;
}
.slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
    padding: 40px 0;
}
{% endstylesheet %}