Skip to main content
The Instagram Gallery section allows you to integrate your Instagram feed seamlessly into your store, showcasing your social media content and building engagement.

​
Overview

The Instagram Gallery section provides:
  • Instagram Feed Integration with automatic updates
  • Multiple Layout Options including grid, carousel, and masonry
  • Customizable Display with captions and links
  • Responsive Design optimized for all devices
  • Performance Optimized with lazy loading
  • Social Media Engagement to increase followers

​
Section Settings

​
Instagram Feed

<section class="instagram-gallery">
  <div class="container">
    {% if section.settings.title != blank %}
      <h2 class="instagram-gallery__title">{{ section.settings.title }}</h2>
    {% endif %}
    
    <div class="instagram-gallery__grid">
      {% for block in section.blocks %}
        {% case block.type %}
          {% when 'instagram_post' %}
            <div class="instagram-post" {{ block.shopify_attributes }}>
              <a href="{{ block.settings.instagram_url }}" target="_blank" rel="noopener">
                <img src="{{ block.settings.image | image_url: width: 400 }}" 
                     alt="{{ block.settings.caption | escape }}"
                     loading="lazy"
                     class="instagram-post__image">
              </a>
            </div>
        {% endcase %}
      {% endfor %}
    </div>
  </div>
</section>

​
CSS Styling

.instagram-gallery {
  padding: 4rem 0;
  background: var(--color-surface);
}

.instagram-gallery__title {
  text-align: center;
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 3rem;
  color: var(--color-text-primary);
}

.instagram-gallery__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

.instagram-post {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 0.5rem;
  transition: transform 0.3s ease;
}

.instagram-post:hover {
  transform: scale(1.05);
}

.instagram-post__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}