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;
}