This is some text inside of a div block.

1 Column E-commerce Footer with Payment Icons

Customizable footer section for e-commerce interfaces. Boost conversions with clear payment and policy visibility. Perfect for enhancing mobile 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 e-commerce footer component is designed for seamless integration into online shopping interfaces. It features a clean and modern design that enhances user trust and conversion rates. The single-column layout is perfect for displaying essential information such as privacy policies and terms of service, alongside universally recognized payment method icons. Ideal for mobile commerce, this footer boosts customer confidence and aids in the checkout process by showcasing security and payment options.

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

Keywords

e-commerce UI/UX, shopping interface, conversion optimization, mobile commerce, checkout, payment security, customer trust
Component details:
Category
Footers
Type
Section
License
Pro
Created at
December 9, 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

Footer 2 Desktop View
Footer 2 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
Footers
License
Pro
Created at
12/9/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