Subscription Plan Selector

Clean, user-friendly subscription duration selector with highlighted popular option. Perfect for subscription-based products.
tiny
small
medium
large
tiny
small
medium
large
tiny
small
medium
large
Code
index
.html
styles
.css
scripts
.js
Member Exclusive
Files
component
index
.html
styles
.css
scripts
.js
component/app-sidebar.tsx
1import { createWorkflow, transform, when, WorkflowResponse } from "@medusajs/framework/workflows-sdk"
2import { ProductDTO } from "@medusajs/framework/types"
3import { createRemoteLinkStep } from "@medusajs/medusa/core-flows"
4import { Modules } from "@medusajs/framework/utils"
5import { HELLO_MODULE } from "../../modules/hello"
6import { createCustomStep } from "./steps/create-custom"
7
8export type CreateCustomFromProductWorkflowInput = {
9  product: ProductDTO
10  additional_data?: {
11    custom_name?: string
12  }
13}
14
15export const createCustomFromProductWorkflow = createWorkflow(
16  "create-custom-from-product",
17  (input: CreateCustomFromProductWorkflowInput) => {
18    const customName = transform(
19      {
20        input,
21      },
22      (data) => data.input.additional_data.custom_name || ""
23    )
24
25    const custom = createCustomStep({
26      custom_name: customName,
27    })
28
29    when(({ custom }), ({ custom }) => custom !== undefined)
30      .then(() => {
31        createRemoteLinkStep([{
32          [Modules.PRODUCT]: {
33            product_id: input.product.id,
34          },
35          [HELLO_MODULE]: {
36            custom_id: custom.id,
37          },
38        }])
39      })
40
41    return new WorkflowResponse({
42      custom,
43    })
44  }
45)
Pricing toggle that lets customers choose between 1, 3, or 12-month subscription plans, with the most popular option highlighted.

Dependencies

No items found.

Features

Ensures every component adapts seamlessly to different screen sizes, from desktops to mobile devices, for a smooth user experience.
Use custom css. Don't worry, they will be included in a Embed HTML Block
Color Styles are re-usable colors. They allow you to centrally manage how the colors on your site look. You can update the look and feel of your site in one easy step.

Keywords

Component details:
Category
Variant Selectors
Type
Block
License
Pro
Created at
January 25, 2025
Updated at
February 26, 2025
Need help?
Join our Discord community and ask for help. Make sure to share a read-only link to your Webflow project.
Join our Discord

Screenshots

Variant Selector 25 Desktop View
Variant Selector 25 Mobile View

Related Templates

Sorry, there are no related templates.
We are working hard to provide you the best collection of Ecommerce UI Components.
Component details:
Category
License
Pro
Created at
1/25/2025
Updated at
2/26/2025
Need help?
Join our Slack community and ask for help. Make sure to share a read-only link to your Webflow project.
Join our Slack