CINXE.COM
Instagram Shop Grid on the Buffer mobile app - Buffer Help Center
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Instagram Shop Grid on the Buffer mobile app - Buffer Help Center</title> <meta name="viewport" content="width=device-width, maximum-scale=1"/> <meta name="apple-mobile-web-app-capable" content="yes"/> <meta name="format-detection" content="telephone=no"> <meta name="description" content="Shop Grid is an Instagram grid-inspired landing page editable within your Buffer dashboard. With Shop Grid, you can guide followers from your Instagram "link in"/> <meta name="author" content="Buffer"/> <link rel="canonical" href="https://support.buffer.com/article/641-instagram-shop-grid-on-the-buffer-mobile-app"/> <meta name="twitter:card" content="summary"/> <meta name="twitter:title" content="Instagram Shop Grid on the Buffer mobile app" /> <meta name="twitter:description" content="Shop Grid is an Instagram grid-inspired landing page editable within your Buffer dashboard. With Shop Grid, you can guide followers from your Instagram "link in"/> <link rel="stylesheet" href="//d3eto7onm69fcz.cloudfront.net/assets/stylesheets/launch-1739329460225.css"> <style> body { background: #ffffff; } .navbar .navbar-inner { background: #ffffff; } .navbar .nav li a, .navbar .icon-private-w { color: #e0e0e0; } .navbar .brand, .navbar .nav li a:hover, .navbar .nav li a:focus, .navbar .nav .active a, .navbar .nav .active a:hover, .navbar .nav .active a:focus { color: #ffffff; } .navbar a:hover .icon-private-w, .navbar a:focus .icon-private-w, .navbar .active a .icon-private-w, .navbar .active a:hover .icon-private-w, .navbar .active a:focus .icon-private-w { color: #ffffff; } #serp-dd .result a:hover, #serp-dd .result > li.active, #fullArticle strong a, #fullArticle a strong, .collection a, .contentWrapper a, .most-pop-articles .popArticles a, .most-pop-articles .popArticles a:hover span, .category-list .category .article-count, .category-list .category:hover .article-count { color: #2c4bff; } #fullArticle, #fullArticle p, #fullArticle ul, #fullArticle ol, #fullArticle li, #fullArticle div, #fullArticle blockquote, #fullArticle dd, #fullArticle table { color:#636363; } </style> <link rel="stylesheet" href="//s3.amazonaws.com/helpscout.net/docs/assets/64cb6cf86d4a3e191f237e66/attachments/653a53f28ccb974344751706/stylesheet.css"> <link rel="apple-touch-icon-precomposed" href="//d33v4339jhl8k0.cloudfront.net/docs/assets/64cb6cf86d4a3e191f237e66/images/653147e325f8430475024abe/hq-logo-icon.png"> <link rel="shortcut icon" type="image/png" href="//d33v4339jhl8k0.cloudfront.net/docs/assets/64cb6cf86d4a3e191f237e66/images/64cb83d43379714240cff117/hq-logo-icon.png"> <!--[if lt IE 9]> <script src="//d3eto7onm69fcz.cloudfront.net/assets/javascripts/html5shiv.min.js"></script> <![endif]--> <script type="application/ld+json"> {"@context":"https://schema.org","@type":"WebSite","url":"https://support.buffer.com","potentialAction":{"@type":"SearchAction","target":"https://support.buffer.com/search?query={query}","query-input":"required name=query"}} </script> <script type="application/ld+json"> {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Buffer Help Center","item":"https://support.buffer.com"},{"@type":"ListItem","position":2,"name":"Buffer","item":"https://support.buffer.com/collection/1-buffer"},{"@type":"ListItem","position":3,"name":"Instagram Shop Grid on the Buffer mobile app","item":"https://support.buffer.com/article/641-instagram-shop-grid-on-the-buffer-mobile-app"}]} </script> <!-- ////// NOTE ////// Please manually update the customCode.html file in the zendesk-advocates repo to reflect changes made in this file, so we always have a backup ////////////////// --> <!-- JQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <!-- Start of Brainfish --> <script> function checkQueryParam(paramName) { const queryString = window.location.search; const urlParams = new URLSearchParams(queryString); const paramValue = urlParams.get(paramName); return paramValue === 'true'; } function isHomePage() { return window.location.pathname === '/' || window.location.pathname === ''; } // Function to add CSS styles function addCustomStyles() { const styles = ` #searchBar { display: none !important; } #docsSearch { min-height: 382px; height: auto; } brainfish-search-widget { display: block; width: 100%; max-width: 752px; margin: 40px auto; padding: 0 16px; position: relative; z-index: 999; color: #848484; } #sidebar > brainfish-search-widget { padding: 0px; margin: 40px 0px 0px 0px; width: 115%; } .search-container { margin-bottom: 48px; width: 100%; } @media (max-width: 768px) { #sidebar > brainfish-search-widget { width: 100%; } } `; const styleElement = document.createElement('style'); styleElement.textContent = styles; document.head.appendChild(styleElement); } if (checkQueryParam('brainfishSearch')) { addCustomStyles(); document.addEventListener('DOMContentLoaded', function() { const searchBar = document.querySelector('#searchBar'); if (searchBar) { const searchContainer = searchBar.parentElement; const brainfishWidget = document.createElement('brainfish-search-widget'); searchContainer.insertBefore(brainfishWidget, searchBar); } }); } </script> <script type="module"> import Brainfish from "https://cdn.jsdelivr.net/npm/@brainfish-ai/web-widget@latest/dist/web.js"; Brainfish.Widgets.init({ widgetKey: "bf_search_widget_qZ6eLTh8Uv4GU8joeY9cVgrKQipIiw14rmlj5M" }); </script> <!-- End of Brainfish --> <script type="text/javascript"> !(function(e, t, n) { function a() { var e = t.getElementsByTagName('script')[0], n = t.createElement('script') ;(n.type = 'text/javascript'), (n.async = !0), (n.src = 'https://beacon-v2.helpscout.net'), e.parentNode.insertBefore(n, e) } if ( ((e.Beacon = n = function(t, n, a) { e.Beacon.readyQueue.push({ method: t, options: n, data: a }) }), (n.readyQueue = []), 'complete' === t.readyState) ) return a() e.attachEvent ? e.attachEvent('onload', a) : e.addEventListener('load', a, !1) })(window, document, window.Beacon || function() {}) </script> <script type="text/javascript"> window.Beacon('init', 'e253ab18-540b-4504-aa78-74b8bd860845') </script> <!-- Start of Segment --> <script> !(function() { var analytics = (window.analytics = window.analytics || []) if (!analytics.initialize) if (analytics.invoked) window.console && console.error && console.error('Segment snippet included twice.') else { analytics.invoked = !0 analytics.methods = [ 'trackSubmit', 'trackClick', 'trackLink', 'trackForm', 'pageview', 'identify', 'reset', 'group', 'track', 'ready', 'alias', 'debug', 'page', 'once', 'off', 'on', 'addSourceMiddleware', 'addIntegrationMiddleware', 'setAnonymousId', 'addDestinationMiddleware', ] analytics.factory = function(e) { return function() { if (window.analytics.initialized) return window.analytics[e].apply(window.analytics, arguments) var i = Array.prototype.slice.call(arguments) i.unshift(e) analytics.push(i) return analytics } } for (var i = 0; i < analytics.methods.length; i++) { var key = analytics.methods[i] analytics[key] = analytics.factory(key) } analytics.load = function(key, i) { var t = document.createElement('script') t.type = 'text/javascript' t.async = !0 t.src = 'https://cdn.segment.com/analytics.js/v1/' + key + '/analytics.min.js' var n = document.getElementsByTagName('script')[0] n.parentNode.insertBefore(t, n) analytics._loadOptions = i } analytics._writeKey = 'XsTSud3G1oNlrQ48sMWERh11O6n1kCNK' analytics.SNIPPET_VERSION = '4.16.1' analytics.load('XsTSud3G1oNlrQ48sMWERh11O6n1kCNK') } })() </script> <!-- End of Segment --> <!-- Hotjar Tracking Code for buffer.com --> <script> ;(function(h, o, t, j, a, r) { h.hj = h.hj || function() { ;(h.hj.q = h.hj.q || []).push(arguments) } h._hjSettings = { hjid: 232078, hjsv: 6 } a = o.getElementsByTagName('head')[0] r = o.createElement('script') r.async = 1 r.src = t + h._hjSettings.hjid + j + h._hjSettings.hjsv a.appendChild(r) })(window, document, 'https://static.hotjar.com/c/hotjar-', '.js?sv=') </script> <!-- End of Hotjar Tracking Code for buffer.com --> <!-- Start of Google tag (gtag.js) --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-XW2P4GR7DW" ></script> <script> window.dataLayer = window.dataLayer || [] function gtag() { dataLayer.push(arguments) } gtag('js', new Date()) gtag('config', 'G-XW2P4GR7DW') </script> <!-- End of Google tag (gtag.js) --> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@700&family=Roboto:ital@0;1&display=swap" rel="stylesheet" /> <!-- Start open contact form --> <script type="text/javascript"> setTimeout(function() { const queryString = window.location.search function hasQueryParam(paramName) { const pattern = new RegExp('[?&]' + paramName + '=([^&]+)') const match = queryString.match(pattern) return match !== null } const paramExists = hasQueryParam('openContact') if (paramExists) { window.Beacon('open') window.Beacon('navigate', '/ask/message') } }, 500) // Adjust the delay in milliseconds (e.g., 2000 for 2 seconds) </script> <!-- End open contact form--> <!-- Start of Tracking --> <script> function articleVoteDownPressed() { if ( $('button.rateAction--negative').length > -1 && !$('button.rateAction--negative').hasClass('selected') ) { var clickCount = 0 $('button.rateAction--negative').on('click', function(e) { clickCount++ if (clickCount % 2 === 1) { hj('trigger', 'articleVoteDown') } }) } } function openBeaconWithPrefill(subject) { if (window.Beacon) { window.Beacon('config', { messaging: { contactForm: { customFieldsEnabled: false, }, }, }) window.Beacon('prefill', { subject: subject, }) window.Beacon('navigate', '/ask/message/') window.Beacon('open') } else { // Fallback to mailto const mailtoUrl = `mailto:hello@buffer.com?subject=${encodeURIComponent( subject, )}` window.location.href = mailtoUrl } } document.addEventListener('DOMContentLoaded', function() { const beaconTriggerLinks = document.querySelectorAll('.beacon-trigger') beaconTriggerLinks.forEach(link => { link.addEventListener('click', function(e) { e.preventDefault() const subject = this.dataset.subject openBeaconWithPrefill(subject) }) }) }) $(document).ready(function() { articleVoteDownPressed() // Remove existing Footer $('footer').remove() // Remove Existing Footer // Append Footer from Marketing Site var $footer = $("<section class='footer'>") $footer.load('https://buffer.com/docs-footer') $('body').append($footer) }) window.addEventListener('load', async function() { try { // Fetch Account information from API Gateway const account = await fetch('https://graph.buffer.com', { method: 'POST', headers: { 'Content-Type': 'application/json', 'x-buffer-client-id': 'internal-helpscout-ui', }, credentials: 'include', body: JSON.stringify({ query: '{ account { id email isImpersonation currentOrganization{ id commonTrackingProperties { atEventBillingState atEventBillingPlan atEventBillingCycle atEventBillingGateway atEventIsNewBuffer atEventChannelQty}}}}', }), }) .then(res => res.json()) .then(res => res.data?.account) // If logged out visitor or impersonation, do nothing if (!account || !!account.isImpersonation) return if (analytics) { await analytics.identify(account.id) } if (window.Beacon) { window.Beacon('config', { messaging: { contactForm: { customFieldsEnabled: true, }, }, }) window.Beacon('reset') Beacon('navigate', '/ask/message') window.Beacon('identify', { email: account.email, }) } const trackingProperties = { organizationId: account?.currentOrganization?.id, ...account?.currentOrganization?.commonTrackingProperties, } if (window.location.pathname.startsWith('/article')) { analytics.track('Help Center Article Viewed', { userId: account.id, ...trackingProperties, articleTitle: window.document.title.replace( ' - Buffer Help Center', '', ), }) } if (window.Beacon && analytics) { window.Beacon('on', 'open', () => { analytics.track('Help Scout Beacon Opened', { userId: account.id, ...trackingProperties, }) }) window.Beacon('on', 'close', () => { analytics.track('Help Scout Beacon Closed', { userId: account.id, ...trackingProperties, }) window.Beacon('config', { messaging: { contactForm: { customFieldsEnabled: true, }, }, }) window.Beacon('reset') window.Beacon('navigate', '/ask/message') }) window.Beacon('on', 'email-sent', () => { analytics.track('Help Scout Beacon Email Sent', { userId: account.id, ...trackingProperties, }) }) } } catch (e) {} }) </script> <!-- End of tracking --> </head> <body> <header id="mainNav" class="navbar"> <div class="navbar-inner"> <div class="container-fluid"> <a class="brand" href="/"> <span>Buffer Help Center</span> </a> <div class="nav-collapse collapse"> <nav role="navigation"><!-- added for accessibility --> <ul class="nav"> </ul> </nav> </div><!--/.nav-collapse --> </div><!--/container--> </div><!--/navbar-inner--> </header> <section id="contentArea" class="container-fluid"> <div class="row-fluid"> <section id="main-content" class="span9"> <div class="contentWrapper"> <article id="fullArticle"> <h1 class="title">Instagram Shop Grid on the Buffer mobile app</h1> <a href="javascript:window.print()" class="printArticle" title="Print this article" aria-label="Print this Article"><i class="icon-print"></i></a> <p><a href="https://buffer.com/shop-grid" target="_blank" rel="noopener noreferrer">Shop Grid</a> is an Instagram grid-inspired landing page editable within your Buffer dashboard. With Shop Grid, you can guide followers from your Instagram "link in bio" to your online store and content without the use of third-party tools or design resources (and without changing your link every time you share a new post!).</p> <div class="callout-blue"> <p>馃摑 Looking for the desktop version of the <a href="https://buffer.helpscoutdocs.com/article/590-instagram-shop-grid" target="_self">Shop Grid </a>article?</p> </div> <p>In this article:</p> <ol> <li><a href="#01EKAKJ8PA8NY5YYNZNJ4DYHFM" target="_self">Setting up your Shop Grid page</a></li> <li><a href="#Adding-your-Shop-Grid-link-to-your-Instagram-bio-Fk6eg" target="_self">Adding your Shop Grid link to your Instagram bio</a></li> <li><a href="#01EKAKNKPDEA9PQ23B049P2YBC" target="_self">Adding links to your Instagram posts</a></li> </ol> <h2 id="01EKAKJ8PA8NY5YYNZNJ4DYHFM">Setting up your Shop Grid page</h2> <ol> <li>Tap the menu button (the three horizontal bars) at the top left of your screen and select your Instagram account.</li> <li>Tap the <em><strong>Settings</strong></em> icon at the bottom right of your screen.</li> <li>In the list, you'll see <em><strong>Manage Shop Grid </strong></em>and <em><strong>Copy Shop Grid URL</strong></em>. Feel free to copy your URL to add it to your Instagram bio at any time, but for now, tap <em><strong>Manage Shop Grid</strong></em>.</li> </ol> <figure style="width: 250.977px; max-width: 100%; " class=""><img alt="Tap Instagram, then Settings, then Manage Shopgrid to open Shopgrid on mobile" src="//d33v4339jhl8k0.cloudfront.net/docs/assets/64cb6cf86d4a3e191f237e66/images/654d153800e96206bf000e3e/file-T3RmEiD6Kh.gif"> <figcaption> Tap Instagram, then Settings, then Manage Shopgrid to open Shopgrid on mobile </figcaption> </figure> <ol start="4"> <li>Here, you'll see your latest 100 published posts, along with any scheduled posts in your queue. You're able to add up to three custom links that will display at the top of your Shop Grid page. These are links that you may wish to highlight to your followers. For example, a link to your online store, a holiday sale, or event registration. See some cool examples from Buffer customers <a href="https://buffer.com/shop-grid" target="_blank" rel="noopener noreferrer">here</a>.</li> <li><b>For iOS app users, </b>you can add a hyperlink on any Instagram post, by tapping on the post and pasting your URL in.</li> <li><b>Android app users </b>can add a URL when creating their post in the composer. However, the option to add a URL to an existing post is not available on our Android app yet, so you'll need to add links to your existing Instagram posts via <a href="//support.buffer.com/article/590-instagram-shop-grid">the web version of Shop Grid</a>.</li> </ol> <h2 id="Adding-your-Shop-Grid-link-to-your-Instagram-bio-Fk6eg">Adding your Shop Grid link to your Instagram bio</h2> <ol> <li>From the "Manage Shop Grid" view, tap <em><strong>Preview</strong></em> to view how your page looks. Note that only the posts with URLs added will show on your Shop Grid Page.</li> <li>Tap <em><strong>Done</strong></em> and then <em><strong>Cancel</strong></em> to get back to your Instagram settings. Then, tap <strong><em>Copy Shop Grid URL</em></strong> and head to Instagram to add it to your bio.</li> </ol> <h2 id="01EKAKNKPDEA9PQ23B049P2YBC">Adding links to your Instagram posts</h2> <div class="callout-red"> <p>This feature is currently available on our iOS app. If you're an Android user, you can add links to your Instagram posts via <a href="//support.buffer.com/article/590-instagram-shop-grid">Shop Grid on the web version of Buffer</a>.</p> </div> <ol> <li>The easiest way to add a link is to include it when you're scheduling a post. Add the link you'd like to direct users to within the composer's <em><strong>URL</strong></em> field.</li> </ol> <p><img alt="Adding a URL to an Instagram post" src="//d33v4339jhl8k0.cloudfront.net/docs/assets/64cb6cf86d4a3e191f237e66/images/651498ecf8eafb48f4e81318/img-1722078-1695848683-138626093.png" style="width: 273.993px; max-width: 100%; "></p> <ol start="2"> <li>If you'd like to add or remove a post's URL after it's been published, go back to your Instagram settings, tap <em><strong>Manage Shop Grid</strong></em>, and tap on any image to add or remove your URL. </li> </ol> <p>You're now ready to send followers to your Shop Grid. Any image they tap will take them to your chosen URL, further extending your brand's impact.</p> </article> <div class="articleRatings" data-article-url="https://support.buffer.com/article/641-instagram-shop-grid-on-the-buffer-mobile-app"> <span class="articleRatings-question">Did this answer your question?</span> <span class="articleRatings-feedback"> <span class="articleRatings-feedback-tick"> <svg height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"> <path d="m8 14a.997.997 0 0 1 -.707-.293l-2-2a.999.999 0 1 1 1.414-1.414l1.293 1.293 4.293-4.293a.999.999 0 1 1 1.414 1.414l-5 5a.997.997 0 0 1 -.707.293" fill="#2CC683" fill-rule="evenodd"/> </svg> </span> <span class="articleRatings-feedback-message">Thanks for the feedback</span> </span> <span class="articleRatings-failure">There was a problem submitting your feedback. Please try again later.</span> <div class="articleRatings-actions"> <button class="rateAction rateAction--positive" data-rating="positive"> <span class="sr-only">Yes</span> <span class="rating-face"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"> <path fill-rule="evenodd" d="M5.538 14.026A19.392 19.392 0 0 1 12 12.923c2.26 0 4.432.388 6.462 1.103-1.087 2.61-3.571 4.436-6.462 4.436-2.891 0-5.375-1.825-6.462-4.436zm1.847-3.872a1.846 1.846 0 1 1 0-3.692 1.846 1.846 0 0 1 0 3.692zm9.23 0a1.846 1.846 0 1 1 0-3.692 1.846 1.846 0 0 1 0 3.692z"/> </svg> </span> </button> <button class="rateAction rateAction--negative" data-rating="negative"> <span class="sr-only">No</span> <span class="rating-face"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"> <path fill-rule="evenodd" d="M7.385 13.846a1.846 1.846 0 1 1 0-3.692 1.846 1.846 0 0 1 0 3.692zm9.23 0a1.846 1.846 0 1 1 0-3.692 1.846 1.846 0 0 1 0 3.692zm-.967 4.95a.992.992 0 0 1-.615-.212c-1.701-1.349-4.364-1.349-6.065 0a.998.998 0 0 1-1.36-.123.895.895 0 0 1 .127-1.3A6.897 6.897 0 0 1 12 15.692c1.555 0 3.069.521 4.266 1.467.41.326.467.909.127 1.3a.982.982 0 0 1-.745.335z"/> </svg> </span> </button> </div> </div> <section class="articleFoot"> <time class="lu" datetime=2024-01-26 >Last updated on January 26, 2024</time> </section> </div><!--/contentWrapper--> </section><!--/content--> <aside id="sidebar" class="span3"> <form action="/search" method="GET" id="searchBar" class="sm" autocomplete="off"> <input type="hidden" name="collectionId" value="64cb6d9c0a5b99723c9358af"/> <input type="text" name="query" title="search-query" class="search-query" placeholder="Search articles" value="" aria-label="Search articles" /> <button type="submit"> <span class="sr-only">Toggle Search</span> <i class="icon-search"></i> </button> <div id="serp-dd" style="display: none;" class="sb"> <ul class="result"> </ul> </div> </form> <h3>Categories</h3> <ul class="nav nav-list"> <li ><a href="/category/4-getting-started">Getting Started <i class="icon-arrow"></i></a></li> <li ><a href="/category/500-buffer-social-network-guides">Buffer Social Network Guides <i class="icon-arrow"></i></a></li> <li ><a href="/category/12-channel-management">Channel Management <i class="icon-arrow"></i></a></li> <li ><a href="/category/495-creating-posts">Creating Posts <i class="icon-arrow"></i></a></li> <li ><a href="/category/496-managing-media">Managing Media <i class="icon-arrow"></i></a></li> <li ><a href="/category/13-scheduling-and-publishing">Scheduling Posts <i class="icon-arrow"></i></a></li> <li ><a href="/category/499-team-collaboration">Team Collaboration <i class="icon-arrow"></i></a></li> <li ><a href="/category/6-analytics">Analyzing Your Data <i class="icon-arrow"></i></a></li> <li ><a href="/category/501-engaging-with-comments">Engaging with Comments <i class="icon-arrow"></i></a></li> <li ><a href="/category/11-account-and-billing">Account Settings <i class="icon-arrow"></i></a></li> <li ><a href="/category/15-engagement">Billing <i class="icon-arrow"></i></a></li> <li ><a href="/category/14-start-page">Start Page Landing Page <i class="icon-arrow"></i></a></li> <li class="active" ><a href="/category/16-mobile-app">Mobile App <i class="icon-arrow"></i></a></li> <li ><a href="/category/497-integrations">Integrations <i class="icon-arrow"></i></a></li> <li ><a href="/category/498-buffer-best-practices">Buffer Best Practices <i class="icon-arrow"></i></a></li> </ul> </aside><!--/span--> </div><!--/row--> <div id="noResults" style="display:none;">No results found</div> <footer> <p>© <a href="https://buffer.com/">Buffer</a> 2025. <span>Powered by <a rel="nofollow noopener noreferrer" href="https://www.helpscout.com/docs-refer/?co=Buffer&utm_source=docs&utm_medium=footerlink&utm_campaign=Docs+Branding" target="_blank">Help Scout</a></span> </p> </footer> </section><!--/.fluid-container--> <script src="//d3eto7onm69fcz.cloudfront.net/assets/javascripts/app3.min.js"></script> <script> // keep iOS links from opening safari if(("standalone" in window.navigator) && window.navigator.standalone){ // If you want to prevent remote links in standalone web apps opening Mobile Safari, change 'remotes' to true var noddy, remotes = false; document.addEventListener('click', function(event) { noddy = event.target; while(noddy.nodeName !== "A" && noddy.nodeName !== "HTML") { noddy = noddy.parentNode; } if('href' in noddy && noddy.href.indexOf('http') !== -1 && (noddy.href.indexOf(document.location.host) !== -1 || remotes)){ event.preventDefault(); document.location.href = noddy.href; } },false); } </script> </body> </html>