> ## Documentation Index
> Fetch the complete documentation index at: https://docs.nexus.hurterdesignstudio.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Instagram Gallery

> Integrate your Instagram feed seamlessly into your store

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

```liquid theme={null}
<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

```css theme={null}
.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;
}
```

<Button href="/sections/contact-form" size="lg">
  Next: Contact Form
</Button>