Pixamp

Retailer buttons on WooCommerce and custom sites

·5 min read

Written by The Pixamp Team

Pixamp
Retailer buttons on WooCommerce and custom sites

Shopify gets all the app-store tutorials. If your store runs on WooCommerce, Webflow, or a page you built by hand, the setup is actually simpler. One snippet, no plugin ecosystem to fight.

What is a WooCommerce retailer button?

A WooCommerce retailer button is a CTA on your product page (Buy on Amazon, Buy on Walmart, or any retailer you sell through) that routes the shopper to the retailer's listing and records the click-through as a buyer-intent event. The purchase happens at the retailer. The signal comes back to your ad platform.

The button is the same across platforms. What changes off Shopify is how it gets onto the page. No app store gates the install, and no theme system dictates where blocks can live. You paste a snippet where you want the button, and it renders.

That flexibility is the reason to take the non-Shopify path. WooCommerce, Webflow, WordPress, a static landing page: anything with a public product URL can carry the button, because the button does not depend on the store platform underneath it.

How does the embed work on WooCommerce and custom sites?

The embed is a single HTML snippet. On WooCommerce you drop it into the product template or a block. On Webflow it goes in an embed element. On a hand-built page it sits wherever the markup allows. There is no checkout integration to wire up, because the checkout you care about is the retailer's.

Here is the shape of the snippet:

<a class="pixamp-btn" data-retailer="amazon"
   data-asin="B0CX23V2ZK"
   href="https://www.amazon.com/dp/B0CX23V2ZK">
  Buy on Amazon
</a>
<script async src="https://cdn.pixamp.io/embed.js"></script>

The data-retailer attribute tells the script which retailer to route to. The product identifier (an ASIN for Amazon, an item ID for Walmart) points at the exact listing. The href is a real fallback link, so the button works even before the script loads. When a shopper taps it on mobile, the script opens the listing inside the retailer's app, already signed in, one tap from checkout.

How does styling inherit without a theme system?

On a store platform, buttons often fight the theme. Off it, the button inherits from the page it sits on. The embed renders a plain anchor element that picks up your existing font, color, and spacing rules unless you override them.

To match a specific product-page button, style the .pixamp-btn class in your own CSS. No shadow DOM hides the element, and no locked-down component keeps you out. This matters most on Webflow and custom builds, where you control brand consistency at the class level rather than through a theme's button settings.

The button carries no layout assumptions either. Put it below the price, inside a sticky bar, or as a floating CTA on a single landing page. It renders where the markup puts it.

How do conversion events flow with no store platform in the middle?

This is the part that separates a link from attribution. A plain outbound link tells you nothing once the shopper leaves. The embed fires a server-side event to Meta through the Conversions API the moment the shopper clicks through, so the signal survives iOS privacy settings and the ad blockers that break browser pixels.

Because the event is server-side, it does not depend on the store platform emitting anything. WooCommerce does not need to know the sale is coming. The event carries the click context Meta needs, and Meta's delivery starts rebuilding around buyer-intent signals instead of raw clicks. Within 48 hours, campaigns start steering toward people who head to a retail checkout.

The gap between a raw UTM link and this loop is the whole game. The mechanics behind closed-loop attribution are identical whether your store runs on WooCommerce or Shopify. The retailer changes. The loop does not.

WooCommerce vs Shopify vs custom: what actually differs

The button and the event are constant. What varies is the install surface and how much styling control you get by default.

WooCommerceWebflowHand-built pageShopify
Install methodSnippet in template or blockEmbed elementPaste in markupApp plus button block
Styling controlFull CSS accessFull CSS accessFull CSS accessTheme settings plus CSS
Needs the store checkoutNoNoNoNo
Event deliveryServer-side CAPIServer-side CAPIServer-side CAPIServer-side CAPI
Public product URL requiredYesYesYesYes

None of these paths route the sale through your checkout, so none of them depend on a store platform to record the conversion. A single landing page with one product works as well as a full WooCommerce catalog. If you are weighing the same setup on Shopify instead, adding Buy on Amazon buttons to a Shopify store covers that install surface end to end.

Where to start

  • Website: www.pixamp.io. What Pixamp does, pricing, and the FAQ. First 1,000 clicks free, no card required.
  • How it works: www.pixamp.io/#how-it-works. The three-step setup: connect Meta Business Manager, add a retailer button, launch. Live in under an hour.
  • Book a demo: www.pixamp.io/#contact. A 20-minute walkthrough on a real retailer page, with the founding team.

If your store is not on Shopify, that is an advantage here. One snippet on the page you already control, and the loop closes.

Written by The Pixamp Team

integrationwoocommerceconversions-apimeta-adsamazon
More posts