This is some text inside of a div block.

1 Column FAQ Section

Customizable FAQ section for e-commerce interfaces. Boost conversions with accordion interactions and mobile-friendly design. Perfect for product detail and checkout pages.
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)
A versatile 1 Column FAQ Section designed to enhance e-commerce interfaces by providing quick answers to customer inquiries. This component boosts conversion by addressing common purchase hesitations directly within the shopping experience. Its accordion feature ensures a streamlined, user-friendly experience, reducing clutter and improving mobile commerce usability. Perfect for product detail pages and checkout processes to enhance customer engagement and boost sales.

Dependencies

No items found.

Features

Uses Pageblock Accordion vanilla js library.
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, FAQ section, mobile commerce, customer engagement
Component details:
Category
FAQs
Type
Section
License
Pro
Created at
December 9, 2024
Updated at
February 27, 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

Faq 1 Desktop View
Faq 1 Mobile View

Related Templates

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
FAQs
License
Pro
Created at
12/9/2024
Updated at
2/27/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