How To Add Instagram Feed to Shopify Store

Want to add an Instagram feed to your Shopify store without installing any app? This free custom Instagram feed section lets you display your Instagram posts directly on your homepage or any page — giving your store instant social proof and a polished, professional look. No API tokens, no monthly fees, no app bloat. Just one Liquid file, fully customizable from the Shopify Customizer. Works with Dawn, Horizon, and all free Shopify 2.0 themes.

Whether you’re running a clothing brand, beauty store, or dropshipping business — showing real Instagram content on your store builds trust fast. Visitors see your brand is active, real customers are using your products, and your social presence is strong. This section supports 4 layout modes (grid, carousel, masonry, and Instagram Stories strip), hover overlays with likes and comments, a Follow button with Instagram gradient styling, and 60+ Customizer settings. Let’s set it up in under 5 minutes.

Watch the Video Tutorial

Prefer to follow along visually? Watch the full walkthrough:

What This Free Instagram Feed Section Includes

This isn’t a basic embed or a stripped-down widget. This is a fully-featured Instagram feed section built from scratch with Shopify Liquid, CSS, and vanilla JavaScript — here’s what’s packed inside:

4 Layout Modes
Grid, Carousel (swipeable), Masonry (Pinterest), Story Strip (round avatars)
Hover Overlays
Show likes, comments, captions, and Instagram icon on hover
Post Type Badges
Video, Reel, and Carousel badge icons on each post
Follow Button
Instagram gradient, solid, or outline styles with pill/rounded/square shapes
5 Hover Effects
Zoom In, Zoom Out, Lift, Tilt, or None — with adjustable speed
Carousel Autoplay
Auto-scroll with adjustable speed, pauses on hover
6 Aspect Ratios
1:1 Square, 4:5 Portrait, 9:16 Reel, 3:4, 4:3, 16:9
Fully Responsive
Separate column controls for desktop, tablet, and mobile

Step 1: Create a New Section File in Your Shopify Theme

Open Your Theme Code

  1. From your Shopify admin, go to Online Store > Themes.
  2. Click the three dots on your current theme > “Edit code”.
  3. In the left sidebar, scroll to the Sections folder.
  4. Click “Add a new section”.
  5. Name it: instagram-feed-ecomranks
  6. Delete any default code Shopify puts in the file.

Step 2: Copy & Paste the Instagram Feed Code

Click the Copy Code button below, then paste it into your new instagram-feed-ecomranks.liquid file and click Save.

instagram-feed-ecomranks.liquid
{% comment %}
  Custom Instagram Feed Section -- EcomRanks
  Fiverr: https://fvrr.co/3BsbtyA
{% endcomment %}

{%- assign s = section.settings -%}

<style>
  /* Full CSS with 60+ customizable properties */
  /* 4 layout modes: Grid, Carousel, Masonry, Story Strip */
  /* 5 hover effects with adjustable speed */
  /* Responsive columns for desktop, tablet, mobile */
  /* Overlay with likes, comments, captions */
  /* Follow button with gradient/solid/outline styles */
  /* All driven by Customizer settings */
</style>

<section class="ecr-ig-section">
  <!-- Header: subheading, heading, @handle, description -->
  <!-- Feed: grid/carousel/masonry/story layout -->
  <!-- Post items with image, badges, hover overlay -->
  <!-- Carousel arrows (prev/next) -->
  <!-- Follow on Instagram button -->
  <!-- EcomRanks credit -->
</section>

<script>
  /* Carousel navigation with smooth scroll */
  /* Arrow button state management */
  /* Optional autoplay with pause-on-hover */
</script>

{% schema %}
  /* 60+ settings: Heading, Layout, Carousel Options,
     Hover Effects, Follow Button, Section Style,
     EcomRanks Credit */
  /* Block: Instagram Post (image, link, type, caption,
     likes, comments) */
{% endschema %}

Important: The code block above is a preview. Click Copy Code to get the complete working file with all 1,070+ lines of code.

Step 3: Add the Instagram Feed Section in the Customizer

Open Customize

  1. Go to Online Store > Themes > Customize.
  2. Navigate to the page where you want the Instagram feed (Home, Product, Collection, etc.).
  3. Click “Add section”.
  4. Search for “Insta Feed – EcomRanks”.
  5. Add Instagram Post blocks — upload your post images and paste the Instagram post URLs.
  6. Enter your Instagram handle (without the @) in the section settings.
  7. Click Save.

Step 4: Configure Your Instagram Feed Settings

The section comes with 60+ settings organized into clear groups:

Heading Subheading text, main heading, Instagram handle, description, alignment, and font sizes
Layout Choose Grid, Carousel, Masonry, or Story Strip. Set columns per breakpoint, gap, corner radius, and aspect ratio
Carousel Options Enable auto-scroll with adjustable speed (3-10 seconds). Pauses on hover automatically
Hover Effects 5 animations (Zoom In, Zoom Out, Lift, Tilt, None), adjustable speed, overlay with icon/stats/caption
Follow Button Instagram Gradient, Solid, or Outline style. Pill, Rounded, or Square shape. Optional Instagram icon
Section Style Background color, text color, accent color, max width, padding controls (top, bottom, sides)
Post Blocks Up to 16 posts, each with image, link, post type (Photo/Video/Reel/Carousel), caption, likes, and comments

Need Custom Shopify Development?

I build custom Shopify sections, full theme customizations, and conversion-optimized stores. If you need something beyond this free code – I am here to help.

Hire Me on Fiverr Free Website Audit

Don’t Have a Shopify Store Yet?

Start your Shopify store for just $1/month – 3-day free trial + $1/month for 3 months (90 days total).

Start Your Shopify Store

Frequently Asked Questions About Shopify Instagram Feed Sections

Does this Instagram feed section work on mobile?

Yes, it’s fully responsive. You can set separate column counts for desktop, tablet, and mobile. On mobile, the Carousel layout becomes swipeable by touch, and the Story Strip scrolls horizontally. All layouts look great on any screen size.

Can I use this Instagram feed on product pages or collection pages?

Yes. The section is enabled on all templates — homepage, product pages, collection pages, blog pages, and any other page in your store. Just go to that page in the Customizer and add the section.

Does this work with all Shopify themes?

Yes, it works with Dawn, Horizon, Sense, Refresh, Craft, Studio, and all free Shopify 2.0 themes. For older or heavily customized themes, minor CSS adjustments may be needed. If you run into any theme-specific issues, hire me on Fiverr and I’ll fix it for you.

Do I need an Instagram API token or app for this?

No. This section does not connect to the Instagram API at all. You manually add your post images and links, which means there are no expired tokens, no broken feeds, and no dependency on third-party apps. You have full control over what shows up.

Can I add multiple Instagram feed sections on one page?

Yes. Each section instance gets a unique ID, so you can add multiple feeds on the same page — for example, one grid layout at the top and a carousel further down. They won’t conflict with each other.

How many Instagram posts can I display?

Up to 16 posts per section. Each post is added as a block with its own image, link, post type badge (Photo, Video, Reel, or Carousel), caption, and engagement stats.

I need help setting this up or want more custom features added.

No problem! Reach out to me on WhatsApp for a quick chat, or hire me on Fiverr for custom Shopify development — I build custom sections, full theme overhauls, and conversion-optimized stores.

Let’s Build Your Dream Shopify Store

I’m a Shopify developer specializing in theme customization, CRO, and custom sections. Small tweak or full store build – I’m here to help.

Hire on Fiverr Hire on Upwork WhatsApp
Subscribe on YouTube ecomranks.net [email protected]

Built by EcomRanks – Shopify Development & CRO


Leave a Comment

Your email address will not be published. Required fields are marked *