Instructions

Cycle is built following the Webflow Way. We recommend reading Webflow's official documentation to get the most out of this template.

Make changes to your typography, buttons, badges and so much more using the Cycle style guide.

This template utilizes variables for typography, structure, colors, and elements. By editing these variables, you can swiftly implement global changes across your entire site.

Icons are added as scalable vector graphics (SVG) using code embeds, which offer advanced support for interactivity and customization. To replace an icon with your own, simply paste your own <svg> code. You can find thousands of free icons from Flowbase Icon Library.

Swiper.js is a lightweight JavaScript library that allows you to create fully customizable sliders in Webflow. You add the Swiper CSS and JS, then structure your slider with a .swiper-wrapper, and multiple .swiper-slide elements.

Once the structure is in place, you initialize it with a short script that controls options like navigation, pagination, looping, and breakpoints. This provides much more flexibility and design freedom than Webflow’s native slider and enables you to connect your slide content to Webflow CMS. We recommend reading the SwiperJS documentation to learn more.