Instagram feed for hair and beauty salon websites: a portfolio that updates itself

Why a salon feed is different from other businesses

Most businesses add an Instagram feed to show that they are active. A salon has a stronger reason: the feed is proof of skill. A client who wants a copper balayage, a textured bob, gel extensions or a lash lift is looking for evidence that someone at your salon does exactly that, and does it well.

Salon clients also choose people, not just places. So the most useful salon feed is often not a single feed of everything, but a set of smaller feeds: one on each stylist’s profile, one on each service page, and a short one near the booking button.

Social Feed by grip space shows posts from your salon’s own Instagram account and lets you filter them per widget, mainly by words in the caption. That is the key to everything in this guide: if your captions say who did the work and what it was, the website can sort the posts for you.

Start with a caption habit, not with the widget

The caption keyword filter is simple: a post appears if its caption contains one of the words you list (or, in the opposite mode, is hidden if it does). It does not look at tagged accounts, the location tag, comments or text inside the photo. So before you set up anything on the website, decide on a short, fixed set of tags that your team adds to every portfolio post.

A practical scheme uses two kinds of hashtags: one for the person and one for the service.

Why the “by” prefix? Keyword matching finds the keyword anywhere in the caption, including inside longer words, and ignores upper and lower case. A stylist called Ann would match “anniversary”, “announcement” and “Joanna” if you filtered on “ann”. A tag like “#byann” is unlikely to appear by accident. The same goes for short service words: “cut” also matches “shortcut”, and “nail” matches “nailed it”.

Your existing posts do not need to be reposted. Instagram lets you edit the caption of a post you have already shared, so you can add the stylist and service tags to your best older work. Start with the posts you would show a new client first. Note that Instagram may show an “Edited” label on captions you change.

Plan your pages: which feed goes where

Because each widget has its own embed code and its own filters, you can give each page of your website a feed that matches its purpose. Here is a typical layout for a hair salon; beauty, nail and lash studios can swap in their own services.

For general advice on placement and page speed that applies to any website, see where to put an Instagram feed on your website. To decide between grid and slider, see grid or slider for an Instagram feed.

Stylist profile pages: a portfolio per person

A stylist page usually has a photo, a short bio, specialties, price level and a “Book with …” button. A feed of that stylist’s recent work turns the page from a name card into a portfolio, and it keeps itself current: when the stylist’s new work is posted with their tag, it appears on their page.

Put the feed after the bio and the booking button, not before. Someone who already wants Maya should not have to scroll past twenty photos to book. A simple structure looks like this, with your own widget code in the last line:

<h2>Maya’s recent work</h2>
<p>Maya specializes in lived-in color and curly cuts.</p>
<a href="/book/?stylist=maya">Book with Maya</a>

<script type="text/javascript" src="https://n246.grip.space/api/v1/instagram/widget/xxxxxxxx"></script>

Set up the first stylist’s widget completely, including layout, columns, click action and header. Then use “Duplicate” in the dashboard to copy it for each other stylist and change only the caption keyword and the widget name. That way every profile page looks the same and you only design once.

Turn the account header off on stylist pages. The header shows the salon’s Instagram name, profile picture and a follow button, which is right for the homepage but slightly confusing above a single person’s work.

Service pages: show results for the exact service

Someone reading your balayage page wants balayage, not a blowout or a manicure. A feed filtered by service keywords shows only relevant results, and it answers questions text cannot, like how blonde “lived-in blonde” really is.

You can list several keywords in one widget, separated by commas. A post appears if its caption contains any of them. For a color page, “#balayage, #foilayage, #babylights” collects all three; for a nails page, “#gelx, #biab, #nailart” works the same way. Keep the written description and prices above the feed.

If you post a lot, add a date range. “Last year” keeps the page current without dropping to only a few posts, and “Last 90 days” suits busy services where trends change quickly. If a service is rare, such as corrective color or bridal trials, leave the date range at “Any time” so the page is never empty.

The booking page: a small reminder, not a gallery

On a booking page, the visitor has already decided to book. A big gallery here is a distraction; a short slider of recent work near the booking form or button is a reassurance. A slider keeps the feed to one row, and visitors can swipe or use the arrow buttons to see more.

Many salons take bookings through a booking system that runs on its own pages or in its own embedded widget. You can normally only add the Instagram feed to pages of your own website, not to pages hosted by the booking provider, so place the feed on your page that holds or links to the booking system. If you want it on a page hosted by your booking provider, check with that provider whether it allows custom scripts; many do not.

On the booking page, also turn off hover icons and choose the lightbox as the click action. The lightbox shows the photo larger with its caption and keeps visitors on your site, one tap away from booking.

Before-and-after posts and carousels

Before-and-after posts are a salon staple, and they are usually carousels: several images in one post. The grid and the slider show one tile per post, using the first image of the carousel. Two settings decide how carousels behave:

1. Carousel posts (multiple images): choose “All images in the lightbox”. When a visitor opens the post, arrows let them browse every image, so they can see the before, the after and the angles.
2. Include carousel posts (multiple images): leave this switched on for portfolio feeds. Switch it off only for a feed where you want single images, for example a homepage that should look like a clean mood board.

Since the tile shows the first image, think about which image comes first when you post. Putting the finished result first gives a stronger tile on your website; putting the “before” first makes a better reveal on Instagram. If you post the before first, visitors on your site will see a lot of “before” photos in the grid. Instagram does not let you reorder images in a carousel after sharing, so this is a decision for future posts.

Framing hair and beauty photos for square tiles

Tiles in the grid and slider are always square, cropped from the center of the image. Many salon photos are tall portraits: a full length of hair, a back view, a head-to-shoulder shot. In a square tile, the top and bottom are cut off, which can remove the root color or the ends, the two things a color client wants to see.

1. Hair: keep the part of the hair that shows the work in the middle third of the frame. For long hair, a shot from slightly further away crops better than a tight one.
2. Nails: keep the hand in the center and avoid placing the nails at the very edge of the frame.
3. Lashes and brows: close-ups usually crop well; just keep the eye centered.

The lightbox shows the full, uncropped image, so the detail is never lost; the crop only affects the first impression in the grid.

Transformation Reels

Short videos of a transformation, a blow-dry or a nail set are often a salon’s most watched content. Each widget has a Reels setting with three options: all posts, exclude Reels, or Reels only. Some useful combinations:

In the grid and slider, videos appear as their cover image with a play mark; they play when a visitor opens them in the lightbox, muted at first and with the normal video controls. Choose a cover that shows the finished look. Instagram does not provide the video file for some posts, for example some Reels with licensed music; those show as a still image, and visitors can watch them on Instagram through the “View on Instagram” link in the lightbox.

For more on how videos behave in the feed, see how to show Instagram Reels on your website.

Settings that suit a salon portfolio

1. Columns: 3 columns show hair and faces large enough to judge the work. 4 is fine on a wide homepage. On narrow screens and in narrow columns the widget reduces the number of columns automatically so tiles do not become tiny.
2. Number of posts: 9 fills three full rows at 3 columns. The Free plan shows up to 16 posts, Light up to 30 and Standard up to 50 per widget.
3. Image spacing: a few pixels gives a tidy, profile-like look; 8 to 12 pixels feels more like a printed lookbook.
4. Show in lightbox: show the caption, because it is where the service, products and stylist are named. The like count is optional; turn it off if you would rather not compare stylists by likes.
5. Follow button text: on the homepage, give it a reason, such as “Follow for new looks”. The button color can match your brand.

When a stylist leaves, or a new one joins

Salon teams change, and the feed should follow without anyone hunting through old pages.

1. A stylist leaves: remove their profile page, and switch their widget to Unpublished in the dashboard. An unpublished widget shows nothing, so even if its code stays on a page somewhere, no photos appear. If their work also appears in the homepage or service feeds and you no longer want it there, add their tag to an “Exclude matching posts” widget, or edit those captions to remove the portfolio marker.
2. A new stylist joins: agree on their tag on day one, duplicate an existing stylist widget, change the keyword, and paste the new code on their profile. Until they have a few tagged posts, set the date range to “Any time” so the page does not look empty.

How many widgets does a salon need?

One widget per stylist plus a few for services adds up quickly. The number of widgets you can create depends on your plan:

Views are counted each time a widget is displayed, and the monthly limit covers all widgets on your account together. On the Free plan, the feed on your site updates once a day; on paid plans, new posts appear without that wait. The “Powered by Social Feed” credit is always shown on the Free plan and optional on paid plans. Details are in the pricing section and in what the free Instagram feed widget includes.

Booth renters and stylists with their own accounts

In many salons, especially with booth or suite renters, stylists run their own Instagram accounts and the salon account mostly reposts. A widget shows posts from one connected Instagram account, and one feed cannot mix several accounts. You have two practical options:

1. Use the salon account as the portfolio. Share the stylists’ best work on the salon account with their tag in the caption, and filter as described above.
2. Let each stylist manage their own feed. A stylist with a professional Instagram account can set up their own widget for their own account and give you the embed code for their profile page. Each feed then only shows that stylist’s account.

Either way, the feed does not pull in posts that clients tagged you in, or posts that use your hashtag from other accounts. To feature a client’s own photo, ask permission and share it on your account with the right tags.

Client photos and permission

A salon portfolio is mostly photos of clients. The feed on your website shows the same posts as your Instagram account, so the permission you ask for when posting to Instagram is the permission that matters. It is good practice to make sure clients know their photos may appear on your social media and website, and to have a simple way to remove a post on request. When you delete a post on Instagram, it drops out of the feed the next time the feed updates.

If a client agrees to Instagram but not to the website, you can add your exclude marker, such as “#notforweb”, to that caption and use “Exclude matching posts” on your widgets. Note that a widget has one keyword mode, so a widget that shows only “#bymaya” posts cannot also exclude “#notforweb” at the same time; in that case, leave the stylist tag off that post instead.

Accessibility and searchable text

The images in the feed currently have no text descriptions (alt text), so screen reader users cannot tell what each photo shows. Captions are available in the lightbox, but only when a visitor opens a post. For that reason, write your services, specialties and prices as text on the page, and describe each stylist’s strengths in their bio, such as “blonding, curly cuts, color corrections”. The W3C’s guidance says informative images should come with a short text alternative; until the feed can provide one, let the page text carry that information.

Setting it up, step by step

1. Check that your salon’s Instagram is a professional account (Business or Creator). See the guide to Instagram professional accounts if you are not sure.
2. Agree on stylist and service tags with your team and add them to your best existing posts by editing their captions.
3. Create a Social Feed account, connect your Instagram account and create your first widget.
4. In “Settings & preview”, set the layout, columns and number of posts, then open “Filter posts” and enter the caption keywords and keyword mode. Check the preview: if only a few posts appear, add keywords or widen the date range.
5. Copy the embed code and paste it on the page. Platform guides: WordPress, Wix, Squarespace, Shopify, Webflow and HTML.
6. Duplicate the widget for each stylist or service, change the keywords, and paste each code on its page.
7. Open each page on your phone and check that the booking button still comes before the feed.

Common mistakes on salon websites

1. A stylist filter that matches other words. “#amy” also matches “#amyscolor” and “#amyfriends”. Use a unique tag with a prefix, and check the preview.
2. Untagged posts disappear. In “Only matching posts” mode, a post without the tag never shows. If a stylist’s page looks thin, the work is probably there on Instagram but untagged.
3. Promotions in the portfolio. Discount graphics and product shots look out of place among client results. A portfolio marker keeps them off the portfolio feeds.

Frequently asked questions

Can one widget show two stylists who work as a team? Yes. Enter both tags, separated by a comma, in “Only matching posts” mode, for example “#bymaya, #byjordan”. A post appears if it has either tag.

Can visitors filter the feed themselves, for example by clicking a stylist’s name? No. Filters are set per widget in the dashboard. To let visitors choose, create one widget per stylist and put each on its own page or section.

Does the feed show our Instagram Stories or highlights, such as our price list highlight? No. Stories and highlights are not shown. Keep price lists as text on your website.

Will my new post show up right away? On paid plans, new posts appear without waiting for the daily update. On the Free plan, the feed updates once a day. If posts do not appear at all, see Instagram feed not updating.

Can I use the same idea for a spa, barbershop or tattoo studio? Yes. Any business where clients choose an artist and a style benefits from a per-person, per-service portfolio built from caption tags. If you run a café inside the salon, the restaurant and café guide covers menus and specials.

Sources

1. Instagram Help Center, “Add, edit or delete the caption of an existing Instagram post”: https://help.instagram.com/1490745927855762
2. W3C Web Accessibility Initiative, “Informative Images” (Images Tutorial): https://www.w3.org/WAI/tutorials/images/informative/