Product cards setup
Set up LinkSpot elements (currently badges) to appear on product cards across your store, including collection pages and search results.
By default, LinkSpot elements appear on the product page itself. The Product cards page in settings extends a subset of elements onto the smaller product cards that show up on collection pages, search results, related-products grids, and other listings.
You can find it in the LinkSpot admin under Settings > Compatibility > Product cards.
What this controls today
Only badges support product card rendering for now. Once you set up product card compatibility for a theme, badges that target a product also appear on that product's card wherever the card is displayed.
Other element types (pins, annotations, captions, product sets, buttons, collages) only render on the product page itself, not on product cards.
When to use this page
Use the Product cards setup page when:
-
You want badges to appear on collection pages, search results, and other listings, not just on the product page.
-
You changed your theme and need to re-run the product card compatibility test.
-
You want to switch the display method for badges on cards.
Pick a theme
The page opens on your currently active theme. Use the theme picker at the top to switch to a different theme if you want to set product cards up elsewhere.
Enable the app embed first
You must enable the app embed for the selected theme before LinkSpot can render anything on product cards. If the embed is not on, the page shows a banner telling you to enable it. Use the Theme integration page (Settings > Compatibility > Theme integration) to turn the embed on, then come back to this page.
Run the product card compatibility test
Once the app embed is enabled, LinkSpot can detect where product cards live in your theme. The compatibility test scans a representative listing page and saves the selector for product cards.
What you do:
-
Run the product card compatibility test from the panel.
-
If LinkSpot detects the product card automatically, the test passes.
-
If it does not, paste a CSS selector for the product card into the manual field.
The selector is remembered per theme, so you only need to run the test once per theme.
Pick a display method
After the test passes, you choose how badges are positioned on product cards. The available display methods affect how a badge attaches itself to each card and how it sits within the card's layout. Pick the option that matches the structure of your theme's product card.
You can change the display method later from this same page.
Last updated 1 day ago
Built with Documentation.AI