3 Column Feature Display

Customizable feature display section for e-commerce interfaces. Boost conversions with a structured presentation of product features and benefits, perfect for mobile and desktop shopping experiences.
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 customizable 3 Column Feature Display section is perfect for showcasing multiple product benefits or service features in an organized manner. Ideal for e-commerce interfaces, it enhances user engagement and boosts conversion rates by providing a clear and concise presentation of key information. Fully responsive, it ensures seamless performance across all devices, making it a vital component for mobile commerce. Featuring harmonious color styles and custom interaction capabilities, it adapts beautifully to a variety of design needs.

Dependencies

No items found.

Features

Uses custom javascript for custom interactions. Don't worry, it will be included in the code.
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.
Ensures every component adapts seamlessly to different screen sizes, from desktops to mobile devices, for a smooth user experience.

Keywords

e-commerce UI/UX, shopping interface, conversion optimization, product display, mobile commerce, shop components
Component details:
Category
Features
Type
Section
License
Pro
Created at
January 4, 2025
Updated at
February 11, 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

3-Column Feature 16 Desktop View
3-Column Feature 16 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
Features
License
Pro
Created at
1/4/2025
Updated at
2/11/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