Example: software integrations

A company sells invoicing software that connects to forty other tools: webshops, banks, CRMs, payment providers. Prospects search for invoicing software Shopify or Klarna integration, so every integration gets a page explaining what the connection does and how to set it up. The site is in English and German. The same setup suits any product with a catalogue of variants: app integrations, supported devices, compatible parts, use cases per industry.

• /shopify-integration/, /klarna-integration/, … — one page per integration
• /de/shopify-anbindung/, /de/klarna-anbindung/, … — the German translations
• /integrations/ — a normal page with every integration’s logo

Properties

Property	Type	Code	Example value
Title	Title	title	Shopify integration
URL	URL / Slug	href	shopify
Name	Text field	name	Shopify
Category	Select (Pro)	category	Webshop (options: Webshop, Bank, CRM, Payments)
Logo	Thumbnail (Pro)	logo	the Shopify logo
Tagline	Text field	tagline	Every Shopify order invoiced automatically
Description	Textarea	description	What the integration does, for whom, and what it saves them.
What it does	Item list (Pro)	features	Creates an invoice for every order, Syncs customers, … one per line
Plan	Select (Pro)	plan	Included in every plan (options: Included in every plan, Business plan and up)
Setup guide	URL	guide	the integration’s article in your help centre
Partner website	URL	partner	https://www.shopify.com/

Title and address

• Template title: @code_title_760@
• Href: /@code_href_760@-integration

The integration’s name comes first in the address, where search engines and people look first.

The page, section by section

1. Hero: the logo next to an H1 Shopify integration, the tagline, a label with the plan, and Start free trial and Read the setup guide buttons.
2. What it does: the description and the list of features.
3. How it works: three fixed steps that apply to every integration (Connect, Choose your settings, Done), with the tool’s name in them: Connect your Shopify account in two clicks.
4. Call to action: a fixed block with your trial offer.
5. More integrations: the other integrations as logo cards.

Block editor

• Hero: Columns with an Image block bound to Logo (its alt text bound to Name), a Heading (H1) bound to Title, a Paragraph bound to Tagline and a small Paragraph bound to Plan. A Button with a fixed link to your trial page, and a Button with its link bound to Setup guide.
• What it does: a Paragraph bound to Description and the Item List block (Pro).
• How it works: three Columns with fixed text and tokens: Connect your @code_name_760@ account in two clicks.
• More integrations: the Grid block with Layout Cards and Show thumbnail.

Elementor

• Hero: the Thumbnail widget (Pro) with a small Max Width, Elementor’s Heading with @code_title_760@, a Text Editor with @code_tagline_760@, and a small Heading or Text Editor with @code_plan_760@. A normal Button to your trial page, and the RowSprout Button widget with Link property Setup guide.
• What it does: the Textarea widget and the Item List widget (Pro).
• How it works: three Icon Boxes with fixed text and tokens.
• More integrations: the Grid widget with Layout Type Cart Layout and Show thumbnail.

WPBakery

• Hero: a Custom Heading @code_title_760@, Text Blocks with @code_tagline_760@ and @code_plan_760@, and Buttons to your trial page and to @code_guide_760@. The logo is the page’s featured image; show it in the Grid cards below, or through your theme.
• What it does: a Text Block with @code_description_760@ and the Item List element (Pro).
• How it works: three columns with fixed text and tokens.
• More integrations: the Grid element with Layout Cards and Show thumbnail.

The integrations page

On the normal page Integrations, add a Grid with this template, shown as cards (Layout Cards; in Elementor, Layout Type Cart Layout), Show thumbnail on, Sort items Alphabetical (A-Z) and four to six Columns (in Elementor, with Sort direction By row (horizontal)). In Elementor, under Style → Thumbnail, give the logos a fixed Height and a Max width, so logos of different shapes line up.

The Grid has no filters. If the list gets long, split it into templates per category (Webshop integrations, Bank integrations) with the same design, and give each a Grid under its own heading. The Category property then becomes unnecessary.

In several languages

With RowSprout Pro and WPML, you translate the template once and RowSprout generates every page in each language.

1. Make sure both post types are translatable. With RowSprout Pro active, WPML treats RowSprout Templates and RowSprout Pages as translatable; you can check this under WPML → Settings → Post Types Translation.

2. Translate the template as you would any page in WPML. The translation gets the same rows. Translate the design’s fixed texts, and each row’s values: the title (Shopify-Anbindung), the URL value, the tagline, the description, the features. Values you don’t translate, such as the name Shopify or the logo, simply stay the same.

3. Translate the address too. The Href pattern is translatable as well. With /@code_href_760@-anbindung as the German pattern, the German page lives at /de/shopify-anbindung/. Translated URL values can be typed as plain text: RowSprout turns them into an address part, as in the original language (Saint-Étienne becomes saint-etienne).

4. Generate. When the translation is completed, RowSprout generates its pages in that language and links each one to its English original, so WPML’s language switcher goes from /shopify-integration/ to /de/shopify-anbindung/.

Leave every placeholder token in the translation exactly as it is, including the template ID in it: @code_name_760@ stays @code_name_760@. The WPML page explains why, and covers child templates, automatic translation and later changes.

A Grid shows the pages in the language of the page it is on, so the German integrations page lists the German pages, with the same Grid settings.

Tip

Add new integrations to the original template and save with Create & update pages: the English page is generated, and WPML marks the translation as needing an update. Translate the new row there, and the German page follows when you complete the translation.

Variations

• Let an AI agent add the rows: with RowSprout Pro’s MCP server, Claude or another AI agent can add integrations and generate the pages from a list you give it. See AI agents (MCP).
• Use cases per industry: the same layout works for Invoicing for contractors, Invoicing for photographers: a row per industry with its own description and features.
• Integration × industry: combine both with child templates, as in the local services example.