Docs
Free ON WEBFLOW.IO DOMAINS

Order Detail Item

Component
Container
Order detail item container for a single Order Item

Shopify Storefront data and cart logic is bound to your Webflow elements through Shopyflow attributes. Connecting your Webflow site to Shopify is done by adding custom attributes to your Webflow elements.

Yet, you are not required to type or edit attributes manually. Shopyflow provides you with the pre-configured components needed to create your store, as copyable Webflow elements right in Webflow designer.

All the copyable Shopyflow Components are native editable Webflow elements. There is no layout or styling limitation on any element.

In the below image hover your mouse on the hotspots to see all the required Shopyflow attributes to build a product page like this in Webflow

Webflow designer
Custom Attributes
sf-product="{Product ID}"
Attribute Name
sf-order-detail
Attribute Value
True or 1
Nesting Rule
Can be placed anywhere in the site
Order Detail List
>
Order Detail Item
Method
sf-order-detail

Contains the detailed order information. Order Detail is a Div Block with the attribute sf-order-detail.

Class name
sf-order-detail
Target elements
Can be placed anywhere in the site
Order Detail List

Webflow app usage

Webflow app settings

Inner components

Module contents

Available methods

Order Line Items List

Looping container for order line items.
Attribute Name
sf-order-line-list
Attribute Value
True or 1
1 or True
Method
sf-order-line-list

Contains the list of the Order Line Items included in the order. Order Line Items List is a Div Block with the sf-order-line-list attribute.

Read more →

Order Detail No

Order no displayer
Attribute Name
sf-order-no
Attribute Value
True or 1
Method
sf-order-no

Displays the order number assigned by Shopify. Order No is a Text Block with the sf-order-no attribute.

Read more →

Order Detail Date

Order date displayer
Attribute Name
sf-order-date
Attribute Value
True or 1
Method
sf-order-date

Displays the order date when the order was processed. Order Date is a Text Block with the sf-order-date attribute.

Read more →

Order Total

Order total price displayer.
Attribute Name
sf-order-total
Attribute Value
True or 1
Method
sf-order-total

Displays the order subtotal price. Order Subtotal is a Text Block with the sf-order-subtotal attribute.

Read more →

Order Sub Total

Order subtotal price displayer.
Attribute Name
sf-order-subtotal
Attribute Value
True or 1
Method
sf-order-subtotal

Displays the order subtotal price. Order Subtotal is a Text Block with the sf-order-subtotal attribute.

Read more →

Order Payment Status

Order payment status displayer
Attribute Name
sf-order-payment-status
Attribute Value
True or 1
Method
sf-order-payment-status

Displays the payment status of the current Order Item. Order Payment Status is a Text Block with the sf-order-payment-status attribute.

Read more →

Order Fulfilment Status

Order fulfilment status displayer
Attribute Name
sf-order-fulfilment-status
Attribute Value
True or 1
Method
sf-order-fulfilment-status

Displays the fulfilment status of the current Order Item. Order Fulfilment Status is a Text Block with the sf-order-fulfilment-status attribute.

Read more →

Order Customer Address

Order specific address displayer
Attribute Name
sf-address-item
Attribute Value
True or 1
shipping
billing
Method
sf-address-item

Contains the customer address information used in the current order. Customer Address Item is a Div Block with the attribute sf-address-item. It's possible to specify the address to be displayed by using the attribute values shipping or billing

Read more →

Component

contents

Order Line Items List

Looping Container
Looping container for order line items.
Attribute Name
sf-order-line-list
Attribute Value
True or 1
1 or True
Nesting Rule
Can be placed anywhere in the site
Order Detail List
>
Order Detail Item
>
Order Line Items List

Contains the list of the Order Line Items included in the order. Order Line Items List is a Div Block with the sf-order-line-list attribute.

Read more →

Webflow app usage

Webflow app settings

Order Detail No

Displayer
Order no displayer
Attribute Name
sf-order-no
Attribute Value
True or 1
Nesting Rule
Can be placed anywhere in the site
Order Detail List
>
Order Detail Item
>
Order Detail No

Displays the order number assigned by Shopify. Order No is a Text Block with the sf-order-no attribute.

Read more →

Webflow app usage

Webflow app settings

Order Detail Date

Displayer
Order date displayer
Attribute Name
sf-order-date
Attribute Value
True or 1
Nesting Rule
Can be placed anywhere in the site
Order Detail List
>
Order Detail Item
>
Order Detail Date

Displays the order date when the order was processed. Order Date is a Text Block with the sf-order-date attribute.

Read more →

Webflow app usage

Webflow app settings

Order Total

Displayer
Order total price displayer.
Attribute Name
sf-order-total
Attribute Value
True or 1
Nesting Rule
Can be placed anywhere in the site
Order Detail List
>
Order Detail Item
>
Order Total

Displays the order subtotal price. Order Subtotal is a Text Block with the sf-order-subtotal attribute.

Read more →

Webflow app usage

Webflow app settings

Order Sub Total

Displayer
Order subtotal price displayer.
Attribute Name
sf-order-subtotal
Attribute Value
True or 1
Nesting Rule
Can be placed anywhere in the site
Order Detail List
>
Order Detail Item
>
Order Sub Total

Displays the order subtotal price. Order Subtotal is a Text Block with the sf-order-subtotal attribute.

Read more →

Webflow app usage

Webflow app settings

Order Payment Status

Displayer
Order payment status displayer
Attribute Name
sf-order-payment-status
Attribute Value
True or 1
Nesting Rule
Can be placed anywhere in the site
Order List
>
Order Item
>
Order Payment Status

Displays the payment status of the current Order Item. Order Payment Status is a Text Block with the sf-order-payment-status attribute.

Read more →

Webflow app usage

Webflow app settings

Order Fulfilment Status

Displayer
Order fulfilment status displayer
Attribute Name
sf-order-fulfilment-status
Attribute Value
True or 1
Nesting Rule
Can be placed anywhere in the site
Order List
>
Order Item
>
Order Fulfilment Status

Displays the fulfilment status of the current Order Item. Order Fulfilment Status is a Text Block with the sf-order-fulfilment-status attribute.

Read more →

Webflow app usage

Webflow app settings

Order Customer Address

Container
Order specific address displayer
Attribute Name
sf-address-item
Attribute Value
True or 1
shipping
billing
Nesting Rule
Can be placed anywhere in the site
Customer Addresses List
>
Order Customer Address

Contains the customer address information used in the current order. Customer Address Item is a Div Block with the attribute sf-address-item. It's possible to specify the address to be displayed by using the attribute values shipping or billing

Read more →

Webflow app usage

Webflow app settings

State management

No items found.

Related Utilities

No items found.
Can't find a solution? Join our Discord server to get an instant reply from our experts and the community.