Facebook and Instagram shop - Checkout Setup
What's changed?
Meta used to host their own checkout experience for Facebook and Instagram shops. They have now deprecated this feature and require all shops redirect to a website checkout. If you are running a Facebook or Instagram shop, you may need to review your setup.
What do I need to do?
To handle the transition from the Facebook / Instagram shop to Neto, Meta will trigger a URL with a number of query strings attached. These query strings tell Neto what products should be added to the cart, the quantity, and if there is any discount coupon applied.
As the query strings Meta use are not the same as the ones Neto supports, we need to add a script to handle the cart creation and direct shoppers to the Neto Checkout.
Create a new custom script for the checkout URL redirect
In your control panel, navigate to Settings & Tools > All Settings & Tools > Custom Scripts then click on Add New to create a new script. Enter a name for your script, such as "Meta Checkout Redirect" then paste the following code in the Page Footer tab, under "Scripts".
[%if [@config:current_page_type@] eq 'checkout'%]
<style>
.meta-cart-loading {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: #fff;
z-index: 9999;
display: grid;
place-items: center;
}
#meta-cart-loader-contents {
text-align: center;
img {
width: auto;
height: 100%;
max-width: 50vw;
@media (min-width: 768px) {
max-width: 20vw;
}
}
p {
animation: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
}
}
@keyframes pulse{ 50% { opacity: 0.5 } }
</style>
<div id="meta-cart-loader">
<div id="meta-cart-loader-contents" class="hidden">
<img src="[@config:imageurl@]/website_logo.png?[@config:neto_css_version@]" alt="[@config:company_name@]" />
<p>... loading ...</p>
</div>
</div>
<script>
(() => {
const allowedOrigins = ["facebook", "instagram", "meta_shops"];
const searchParams = new URLSearchParams(window.location.search);
const metaProducts = searchParams.get("products");
if (allowedOrigins.includes(searchParams.get("cart_origin")) & (metaProducts !== null && metaProducts.trim().length > 0)) {
document.body.style.position = 'fixed';
document.querySelector('#meta-cart-loader').classList.toggle('meta-cart-loading');
document.querySelector('#meta-cart-loader-contents').classList.toggle('hidden');
nCartInitCallbacks.push(formatMetaCart);
}
})();
function formatMetaCart() {
const searchParams = new URLSearchParams(window.location.search);
const products =searchParams.get("products");
const checkoutURL = [`/_mycart?fn=payment&multi=${products.split(",").length}`];
for (const [ index, product ] of products.split(",").entries()) {
const [sku, qty] = product.split(":");
checkoutURL.push(`&sku${index}=${sku}&qty${index}=${qty}`)
};
searchParams.has("coupon") && checkoutURL.push(`&addcpn=${searchParams.get("coupon")}`)
redirectMetaCart(checkoutURL.join("").toString());
};
function redirectMetaCart(url) {
const homeURL = "[@config:home_url@]";
const cartSize = $.getCartCache().length;
let payload = {recal : 1};
let count = 0;
while (count < cartSize){
payload["line"+count] = count;
count += 1;
payload["qty"+count] = 0;
}
$.post("/_mycart", payload, function() {
window.location.replace(`${homeURL}${url}`)
});
};
</script>
[%/if%]This script will do the following actions:
- on page load, check if we are on the cart
/_mycartpage - if we are on the cart page, check if the URL has the required query params
- if the cart has come from Facebook, Instagram, or Meta shops, display a loading overlay
- parse and format the query params to build out the cart in Neto
- clear any existing cart (as recommended by Meta)
- redirect to the Neto checkout with the new cart
By default the loading overlay will sit on top of any other webstore content, span the entire screen or browser window, and show your webstore logo and the text '... loading ...' until the Neto checkout loads. If you wish to customise the overlay at all, you can do so by updating this HTML in your script:
<div id="meta-cart-loader">
<div id="meta-cart-loader-contents" class="hidden">
<img src="[@config:imageurl@]/website_logo.png?[@config:neto_css_version@]" alt="[@config:company_name@]" />
<p>... loading ...</p>
</div>
</div>Or by adjusting the CSS styling for .meta-cart-loading or #meta-cart-loader-contents within your scripts <style> tag.
Meta will also pass through UTM params, so if you have ads setup and are already tracking these on the Neto cart they will get picked up from the Facebook or Instagram shop as well. For a full list of supported query params Meta may send, refer to their documentation.
Set up your Facebook or Instagram shop checkout URL
Now that your Neto webstore is setup to handle the Meta redirect, log into your Meta Commerce Manager and edit your Facebook or Instagram shop to use your Neto webstore cart URL as the shop checkout URL. For full steps on creating or editing a shop in Meta Commerce Manager, refer to their documentation.
When adding the checkout URL, skip through the steps about learning to setup or build your checkout URL as you've done that by adding the above custom script to your webstore.
When prompted to enter a checkout URL for your Facebook or Instagram shop, enter your Neto webstore cart URL. For example, if your webstore is https://reallycoolparts.com.au then your cart URL is https://reallycoolparts.com.au/_mycart
Meta will then provide a preview checkout URL for you to test, prefilled with some products from your shop catalog. Add a promo code if that is something your shop supports and test the checkout URL. You should see the products and correct quantities on your Neto checkout, and the promo code (if provided) added automatically.
Return to your Meta Commerce Manager where you generated the preview checkout URL. Confirm the checkout is working and submit your checkout URL to Meta.
Meta will run some final tests and alert you if there are any issues, otherwise your Facebook or Instagram shop is now ready to take orders, and checkout with Neto.