Templates

Swft Checkout supports three layout templates. Select in Settings → Swft Checkout → Checkout Layout.

The template is stored as swft_checkout_template and passed through the session to the checkout frontend as merchant.checkoutTemplate.

minimal (default)

The standard two-panel layout. Form on the left, sticky order summary on the right.

• Max width: 1020px, centred
• Grid: 1fr 360px, 32px gap
• Padding: 48px top, 32px horizontal, 80px bottom
• On mobile: single column, order summary collapses to a toggleable strip

Best for: most stores. Provides full context (order summary always visible) alongside the form.

split

A variant two-panel layout where the order summary panel has a distinct light background card (even in dark mode) to create a visual split between the form area and the order context.

• Max width: 960px, centred
• Grid: 1fr 400px, 40px gap
• Padding: 40px top and sides
• Order summary: sticky, background: #f9fafb, border-radius: 12px, padding: 24px
• On mobile: single column, order summary renders below the form

Best for: stores with complex order summaries that benefit from visual separation.

express

A streamlined single-column layout with an “express checkout available” banner at the top. The order summary does not render in a separate panel — only the form and the sticky order summary below the form.

• No desktop order summary panel
• Banner: background: #fafafa, centred, 12px padding, uppercase text
• Best for: impulse purchases, simple single-product checkouts

Switching templates

Changing the template in Settings → Swft Checkout → Checkout Layout and saving takes effect immediately for all subsequent sessions. Existing sessions use the template that was active when they were created.

Template via PHP

You can override the template programmatically using the swft_session_payload filter:

add_filter( 'swft_session_payload', function( array $payload ): array {
    // Force express template for a specific product category
    if ( has_product_from_category( 'impulse-buys' ) ) {
        $payload['template'] = 'express';
    }
    return $payload;
} );

The template key in the payload is passed to the checkout frontend as merchant.checkoutTemplate. Valid values: 'minimal', 'split', 'express'.