2 Column Feature Section

Customizable section for e-commerce interfaces. Boost conversions with dynamic layouts and engaging visuals. Perfect for product showcases and promotional highlights.
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 2-column feature section is ideal for showcasing product highlights in e-commerce interfaces. Designed to enhance user engagement, it features a robust layout for promoting key products or information alongside visuals. Perfect for conversion-focused initiatives, this component supports various interaction styles for improved customer experiences, making it versatile for online shops looking to optimize their user interface. Easily adaptable for mobile commerce to ensure seamless browsing on all devices.

Dependencies

No items found.

Features

Use custom css. Don't worry, they will be included in a Embed HTML Block
Ensures every component adapts seamlessly to different screen sizes, from desktops to mobile devices, for a smooth user experience.
Animated counters for sales, stock levels, or metrics.

Keywords

e-commerce UI/UX, shopping interface, conversion optimization, product display, customer experience, mobile commerce
Component details:
Category
Features
Type
Section
License
Pro
Created at
December 7, 2024
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

2-Column Feature 14 Desktop View
2-Column Feature 14 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
12/7/2024
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