This is some text inside of a div block.

3 Column Subscription Product Buy Box

Customizable buy box for e-commerce interfaces. Boost conversions with dynamic pricing and call-to-action buttons. Perfect for product comparison and checkout optimization.
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)

This e-commerce UI component is designed to enhance user experience and drive conversions with a 3-column layout featuring subscription product buy boxes. Ideal for showcasing product tiers with varying price points and savings options, it encourages customer engagement through clear call-to-action buttons and dynamic pricing information. The component excels in highlighting benefits like savings, free gifts, and shipping deals to maximize conversion rates, making it perfect for product comparison and checkout optimization in e-commerce platforms.

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
Animated counters for sales, stock levels, or metrics.

Keywords

Component details:
Category
Buy Boxes
Type
Section
License
Pro
Created at
February 3, 2025
Updated at
February 10, 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

Buy Box 1 Desktop View
Buy Box 1 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
Buy Boxes
License
Pro
Created at
2/3/2025
Updated at
2/10/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