Shopify section for Showcase Instagram app supplied by the app. https://apps.shopify.com/shop-instagram

showcase-product-gallery.liquid

{% comment %}
  *** MAKE SURE TO REMEMBER TO SET THE DEFAULT GALLERY ID ***
{% endcomment %}

{% if section.settings.product-gallery-id != blank and section.settings.enable-product-gallery %}
<div class="showcase-product-gallery">
  {% if section.settings.product-gallery-title != blank %}
  <h2>{{section.settings.product-gallery-title}}</h2>
  {% endif %}
  <script src="https://showcase.abovemarket.com/embed/gallery/{{section.settings.product-gallery-id}}"
          data-gallery-id="{{section.settings.product-gallery-id}}"
          data-product-id="{{ product.id }}"
          data-gallery-style="{{ section.settings.gallery_style }}"
          data-columns="{{ section.settings.columns }}"
          data-rows="{{ section.settings.rows }}"></script>
</div>
{% endif %}

{% schema %}
  {
    "name": "Showcase Product Gallery",
    "settings": [
	  {
		"type": "header",
		"content": "Showcase Product Gallery"
	  },
	  {
		"type": "checkbox",
		"id": "enable-product-gallery",
		"label": "Enable Product Gallery",
		"default": true
	  },
	  {
		"type": "text",
		"id": "product-gallery-id",
		"label": "Gallery ID",
		"default": "8456"
	  },
	  {
		"type": "text",
		"id": "product-gallery-title",
		"label": "Gallery Title",
		"default": "As Styled on Instagram"
	  },
	  {
        "type": "select",
        "id": "gallery_style",
        "label": "Gallery Style",
        "options": [
            {
                "value": "grid",
                "label": "Grid"
            },
            {
                "value": "slider",
                "label": "Slider"
            },
            {
                "value": "collage",
                "label": "Collage"
            }
        ],
        "default": "slider"
      },
      {
        "type": "range",
        "id": "columns",
        "label": "Columns",
        "min": 1,
        "max": 6,
        "step": 1,
        "default": 3
      },
      {
        "type": "range",
        "id": "rows",
        "label": "Rows",
        "min": 1,
        "max": 6,
        "step": 1,
        "default": 4,
        "info": "Row count is only used for grid style galleries"
      },
      {
        "type": "range",
        "id": "limit",
        "label": "Post Limit",
        "min": 0,
        "max": 50,
        "step": 1,
        "default": 0,
        "info": "Set to 0 to disable a limit"
      }
	]
  }
{% endschema %}

{% stylesheet 'scss' %}
.showcase-product-gallery {
  display: none;
  margin: 30px 0;
  padding: 30px 0;
  border-bottom: solid 1px #eee;

  &.visible {
    display: block;
  }

  h1, h2, h3, h4 {
    text-align: center;
  }

  .showcase-gallery .showcase-gallery-title,
  .showcase-gallery .showcase-gallery-description {
	display: none !important;
  }
}
{% endstylesheet %}

<script>
// Define Showcase object
if ((typeof Showcase) === 'undefined') { Showcase = {}; }

// Add event handlers (callbacks)
Showcase.loadMedia = function(media) {
  if (media.length > 0) {
	showcaseQuery('.showcase-product-gallery').addClass('visible');
  }
};
</script>

{%- if section.settings.limit > 0 -%}
<style media="screen">
  #showcase-gallery-{{ section.id }} .showcase-grid-item:nth-of-type(1n+{{ section.settings.limit | plus: 1}}) {
	display: none !important;
  }
</style>
{%- endif -%}