Text Align Center Presell Header

Customizable presell header for e-commerce interfaces. Boost conversions with engaging headlines and compelling product insights. Perfect for promotional events and product 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 presell header component is an essential tool for e-commerce platforms, designed to enhance user engagement and drive conversions by highlighting product benefits in a compelling manner. Its centered text layout is perfect for ensuring readability and focus, making it ideal for product launches and promotional events. This component is optimized for mobile commerce, providing seamless interactions and clear call-to-action prompts, encouraging users to explore product offerings further.

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.

Keywords

presell header, conversion optimization, mobile-friendly, promotional highlighting, e-commerce
Component details:
Category
Content Headers
Type
Section
License
Pro
Created at
January 23, 2025
Updated at
February 12, 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

Presell Header 5 Desktop View
Presell Header 5 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:
License
Pro
Created at
1/23/2025
Updated at
2/12/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