Themes and placements
FD Combined Listings shows your groups in two places: on the product page and on product cards, like the ones on collection pages, search results and the home page. Each one is set up a little differently.
In the Shopify theme editor, the app still uses its older name. The product page block is called FD Product Groups, and the app embed is called FD Product Groups/Variant.
Product page: add the app block
The app block works on Online Store 2.0 themes.
- In FD Combined Listings, open Theme setup.
- Under 1. Select a theme, pick your theme and click Go to theme editor. The editor opens on your product template.
- Add the FD Product Groups block to the product template, then save.
- To change how the block looks, open Appearance/Style in the app.
Each group page checks your live theme. If the block is not on the product template, you see Theme block is missing.
Product cards: app embed and placement
Swatches on product cards need three things. The App status card on the Settings page checks all three for you:
- App embed: the app embed is on in your theme.
- At least 1 product card enabled on a group: at least one active group shows on product cards.
- Placement enabled: a product card placement is on.
To set it up:
- Turn on the app embed. Click Enable app embed in the app, or open App embeds in the theme editor and turn on FD Product Groups/Variant.
- Open a group. In the Product Card Preview, turn the switch on and save.
- Open Settings. Under Show groups on product cards, click Create default placement if you don't have one yet. The app also creates it for you the first time you turn on product cards for a group.
The default placement adds swatches to product cards on collection pages and product pages. It hides the swatches on groups with fewer than 2 products. You can change both in Settings.
The default placement also has Dynamic Placement, which sets where the swatches go on the card: Auto (theme default), Before Title, After Title, Before Price or After Price.
Use the Preview on: links to check your storefront before you save.
Ready-made settings for 220+ themes
You don't have to tell the app where the cards are on your page. It comes with tested settings for more than 220 themes, including Dawn, Horizon, Prestige, Impulse, Impact, Focal, Warehouse, Symmetry, Broadcast, Kalles and Minimog. The app finds your theme by its Theme Store ID, so it still works if you rename the theme.
For a theme that isn't on the list, the app falls back to general settings that work with common product card layouts.
Custom placements
A placement controls where groups show up on your storefront. Open Settings, then Go to Placements, and click Create placement. For each placement you can set:
- Which page types it runs on: collection, product, index (home page), search, cart, 404 and page.
- Whether to show it only on groups with certain option names. Leave it blank to show it on all groups.
- The minimum number of products a group needs before it shows (2 by default, up to 10).
- Swatch or dropdown display, and its style.
- Where to insert it on the page, using CSS selectors from your theme.
Turn Placement is enabled? on to make a placement live. The placements list shows each one as Active or Inactive.
Custom placements use your theme's CSS selectors. If you're not sure which ones to use, ask us.
When your theme does not support app blocks
Older (vintage) themes can't use app blocks. When this happens, the group page shows Theme does not support app blocks, and you can't add the block in the theme editor.
- Turn on the app embed. You need it for every placement.
- Open the chat in the app and ask us to set up placements for your theme.
We set up the product page and product card placements for you through the chat. We do the same for hand-built themes, agency themes, and product pages built with page builders like GemPages or PageFly.
