Swiper Documentation

Introduction

Thank you for choosing the Swiper Template by Pixco.
This documentation provides all the necessary steps to help you set up and customize the template to suit your needs.

Swiper is built for fintech and SaaS products, spend management, billing, expense and finance-ops tools. It ships with a full product UI recreated in Framer, a pricing system with monthly and yearly billing, a case studies CMS, and a complete light and dark theme.

Don’t have the template yet? Get it here.

Getting Started

To maintain brand consistency, we recommend starting with your "Styles" settings.

This helps ensure consistent fonts and colors across your website. To get started, click the Assets tab in the top-left panel, scroll down to Styles and update the fonts and colors to align with your brand.

Swiper is unusually systematic here, so a few minutes in Styles will re-skin the entire site.

Colors

Every color in the template is a style with both a light and a dark value, so editing one entry updates both themes at once. The set is organised in three groups:

• Surfaces and text: Background, Surface, Card, Border Card, Border Surface, Text Primary, Text Secondary and Text Tertiary, plus Background Inverted and Text Primary Inverted for inverted sections.

• Brand: the primary action color used across buttons and links. In most cases this is the only color you have to change.

• Accents: eight accent families (Green, Purple, Blue, Yellow, Red, Turquoise, Orange and Gray), each with a base, a Background and a Border variant. These drive the badges, stat cards and service cards. Keep the three in sync when you edit one of them.

Typography

The type scale is H1 through H6, Body L / M / S, Label M / S, Actions L / M / S, plus Eyebrow, Tab Label, Stat Number and Detail. The template uses Inter.

Swap the font on the text styles rather than on individual layers, and the whole site follows.

Light and Dark Mode

Swiper ships with a working theme switch, and it’s the one system worth understanding before you start editing.

The Theme Toggle lives in the footer. When a visitor clicks it, the site remembers their choice, so returning visitors land in the theme they picked. Because every color is a style with a light and a dark value, most of the site follows automatically, you never have to design anything twice.

Paired Variants

A handful of components can’t rely on color styles alone, so they carry paired variants instead. You’ll see names like Desktop [Dark] and Desktop [Light] on the Dashboard component, and Neutral [Dark], Neutral [Light], Blue [Dark] and Blue [Light] on the Button. A small code override swaps those instances to the matching variant whenever the theme changes.

A few things to keep in mind while customizing:

• Keep the [Dark] and [Light] suffix in your variant names. The swap works by matching that text, so renaming a variant to something else breaks the switch for that instance.

• If you add a new variant, always add it as a pair.

• Always check both themes before publishing. The fastest way is to toggle the theme on the preview and scroll through each page.

• If you’d rather ship a single-theme site, delete the Theme Toggle from the footer and the site will stay in its default dark theme.

Customizing the Header

The header is a key component of your site’s navigation, ideal for giving users quick access to important links. 

You can fully customize the header within the Layout Template, Framer’s approach to designing reusable elements that can be applied across all pages, eliminating the need to edit components and elements individually on each page. 

Elements within a Layout Template are easy to recognize, as they’re outlined with dashed lines around the component.

Editing the Header

To edit the header, double-click the header component, or go to Assets and select Main under the Template section.

Within the header, you can easily:

• Upload your logo by double-clicking the Logo component and replacing it with your own file.

• Edit the navigation. The default links are Platform, How it works, Pricing, About and Cases. The first three are anchor links that scroll to sections on the homepage (/#platform, /#process and /#pricing), so if you rename or remove one of those sections, remember to update the matching link.

• Change the button label from “Get in touch” to your preferred text, and assign a link to the button.

• Switch the button style between Neutral and Blue using the Variant control in the right panel.

Editing the Menu

On the Phone breakpoint the navigation collapses into a fullscreen overlay, opened by the Menu Icon component. To edit it, double-click the header component. (In the left panel, under the Layers tab, the “Header” layer will be highlighted in purple, indicating the currently selected layer)

Open the overlay to edit the items. To update a menu item, select it and use the “Content” field in the properties panel on the right to change its name. The mobile menu uses its own set of links, so update both desktop and mobile when you change your navigation.

Customizing the Footer

Editing the footer is simple and straightforward. Just like the header, the footer can also be fully customized within the Layout Template.

To get started, double-click the Footer component to access and edit its elements. The footer is built from four rows:

• The CTA row: a “Ready to get started?” line and a button. Point it wherever you want conversions to land.

• The main row: your logo and tagline, a live status indicator, compliance badges, and three link columns (Social, Company and Platform). Select any link to change its label and destination.

• The legal row: Privacy Policy and Terms of Service (both pulled from the Policies collection), the Theme Toggle, and a Back to Top button with a smooth scroll animation. The copyright year updates itself.

• The disclaimer row: small print. Swiper is a fictional product, so make sure to replace this text with your own legal and regulatory wording before you launch.

Customizing the Preloader

The Preloader is one of the many custom-built components in the template, designed to enhance the overall user experience by adding a unique touch to the site’s look and feel. This preloader for Framer actually waits for page load as opposed to others which only add a time delay before they display the page.

It sits in the Main Layout Template with two variants, Loading and Loaded. To modify the preloader settings, simply click on the preloader in the Layers Panel, which will open its properties in the right panel where you can make your adjustments. If you decide to disable the preloader, simply toggle the “Visible” option off from the properties on right.

Customizing the Homepage

The homepage is built from nine sections, laid out in the order below. Each one is a self-contained frame, so you can reorder or remove sections without breaking the rest of the page.

Hero

The headline, subheading and primary call to action. Behind it sits the EmberGlow component, an animated ambient background — select it to adjust or hide it. Its “Preview” toggle controls whether the animation runs on the canvas; it always runs on the published site.

Clients

A logo strip that scrolls continuously. Double-click it to swap the logos, and use the Gap control to change the spacing between them. Add or remove logos by duplicating or deleting them inside the component, the loop adjusts automatically.

Platform

The product showcase, and the most detailed section in the template. It’s built around the Dashboard component, a full fintech interface recreated natively in Framer rather than dropped in as a screenshot, which means it stays sharp at any size and follows your colors.

The Dashboard has Desktop and Phone variants in both themes, plus a Show Categories toggle if you want to simplify the layout.

Features

A grid of Service Cards. Each card has an icon, a title, a description and an optional badge. The Variant control picks the accent color and whether the badge shows a dot, giving you sixteen combinations across the eight accent families. To add a card, duplicate an existing one.

Testimonials

Built from Review Cards, each with two content variants. The Cards and Buttons controls switch between a row and a column layout, which is how the section reflows on smaller screens.

Process

A four-step walkthrough using the Process Sequence component. Its variants cover each step in a Number, In Progress or Completed state, so you can show progression as visitors scroll down the page. Edit the copy for each step directly on the canvas.

Pricing

Three plans with a monthly and yearly switch. This section has its own setup steps, covered in the next chapter.

Cases

A preview of your case studies, pulled straight from the CMS. Covered further down under Customizing the CMS.

FAQ

The FAQ section offers a clean and structured format for presenting frequently asked questions. It’s designed to scale effortlessly, allowing you to include as many questions as needed to address your audience’s concerns. Edit the questions and answers directly on the canvas.

Setting Up Your Pricing

The pricing section is driven by two purpose-built components that talk to each other, so a single switch updates every price on the page at once.

The Billing Toggle

The Billing Toggle is the monthly and yearly switch itself. Its Show Savings control displays or hides the savings badge next to the yearly option, and you can restyle the segment labels, the track and the badge from its properties in the right panel.

The Plan Price

The Plan Price component is the price shown on each card. Select it and you can set:

• Monthly and Yearly amounts: the component shows the right one depending on the toggle, and every price on the page switches together.

• Currency: 28 currencies are supported, with the correct symbol applied automatically.

• Custom: turn this on for an enterprise plan to show text such as “Let’s talk” instead of a number. The suffix and caption hide themselves when it’s enabled.

• Suffix and Caption: the /mo label and the “billed monthly” or “billed annually” line underneath.

Make sure to set the amounts on every Plan Price instance, not just the first one — each card holds its own values.

Customizing the Spend Graph

Inside the Platform section you’ll find the Spend Graph, a custom component that draws a real chart from plain text, so you never have to edit an image to change your numbers.

Select it on the canvas and you can update:

• Values: a comma-separated list of numbers, for example 2300, 4400, 2950.

• Labels: a matching comma-separated list, for example Jan, Feb, Mar.

• Y Max, Y Steps and Y Suffix: the top of the scale, how many gridlines to draw, and the unit shown on the axis.

• Line, Area, Grid and Label colors: point these at your color styles so the chart follows your theme.

Keep the Values and Labels lists the same length, otherwise the axis and the chart will fall out of step.

Customizing the CMS

Swiper ships with a Case Studies collection and twelve fully written demo entries, so you can see the intended shape of the content before you replace it. Each entry powers both the card on the homepage and its own detail page.

Every case study is made up of:

• Title, Slug and Description: the headline, the URL and the summary shown on cards.

• Logo and Cover Image: the client mark and the hero image.

• Category: Close Management, Compliance, Automation or Forecasting. These double as the filters on the Cases page, so edit this list first if you want different ones.

• Body: the main story, with full rich text formatting.

• Impact Stats: two value and label pairs, such as “70%” and “Faster month-end close”, which render as the stat cards on the case page.

• Company: a short blurb, company size and founding year for the sidebar.

• Testimonial: a quote, name, title and photo.

• Published Date.

Use the demo entries as a starting point. Editing them in place rather than deleting them is the quickest way to keep the layout intact.

The Cases Page

The Cases page renders the case grid, the category filter tabs across the top, and a Load More button that reveals more entries as visitors click. The filter tabs read directly from the Category field, so adding a category in the CMS is all it takes to add a filter to the page.

The Case Study Pages

Each entry gets its own page, generated from the CMS. Every element on it is connected to a field, so the page fills itself in as you write. Edit the layout once and all twelve entries follow, along with everything you add later.

Customizing the About Page

The About page is built from six sections: Hero, Mission, Values, Core, Team and Stories.

The Team section is a straightforward grid — replace the photos, names and roles directly on the canvas. The Stories section uses the Story Card component, which has an Image Right and an Image Left Mobile variant, plus controls for the eyebrow, title, description and image.

Editing the Booking Form

The Get Started page holds the booking form, the client logo strip and a shared FAQ section. The form has been carefully designed to capture all the essential information from your leads, and it comes with Desktop, Phone, Success and Error variants so you can preview each state.

It collects First Name, Last Name, Work Email, Phone (optional, with a country code selector), Company, Company Size and an optional message.

To edit the form, double-click the Form Component to access the fields.

To remove a field, select the field label either from the canvas or the layer panel, then press Delete.

To add a new field, click on the Form component in the layer panel. A “+” sign will appear at the bottom of the form, indicating the option to Add a new field. Click the “+”, choose your desired field type.

Lastly, you’ll need to assign an email address to receive the form submissions. Select the form in the layer panel, go to the form section in the right panel, and enter the desired email address in the “Send To” field. This will ensure that submissions are directed to the correct recipient.

You can also edit the message visitors see after submitting. It lives on the “Sent” layer inside the form component.

Legal Pages

Legal pages, such as the Privacy Policy and Terms of Service, are designed to be easily updated within the template. Both are managed through the Policies collection and linked from the footer. Thanks to the integrated Rich Text Formatting, you can either copy and paste your pre-written content directly into the editor or write your text for these pages.

The editor offers a user-friendly interface, allowing you to format the text as needed, ensuring your legal content is clear, professional and aligned with your website’s overall style. The demo copy is written for a fictional company and is not legal advice, so please replace it with your own.

Responsive Design

Every page in the template is designed at three breakpoints — Desktop, Tablet and Phone — and each one is already laid out for you.

When you add or edit a section, remember to check all three. Tablet and phone layouts don’t inherit your changes automatically.

Before You Publish

A short checklist to run through before you go live:

1. Delete the Pixco badge. In the Main Layout Template there’s a component named DELETE THIS — remove it.

2. Set your own email address in the “Send To” field on the booking form.

3. Replace the legal pages and the footer disclaimer with your own wording.

4. Set your prices and currency on every Plan Price instance.

5. Check every page in both light and dark mode.

6. Check every page at all three breakpoints.

7. Update your site settings — favicon, social share image, page titles and descriptions.