Design the orders elements

Orders Elements

With Smootify you can use Shopify accounts functionality and let your customer see placed orders directly from your site.

Conditional Visibility

You can show/hide elements only for logged-in users.

⚠️ Warning: is just a CSS solution, do not use it to “hide” sensitive data.

Has Orders

To show up an element only if the current user has orders, you just have to use the following custom attribute:

Name

customer-condition

Value

has-orders

No Orders

To show up an element only if the current user doesn’t have any orders, you just have to use the following custom attribute:

Name

customer-condition

Value

no-orders

Orders

This is the list of orders placed up by the current logged in customer, the element will be automatically duplicated once for each order placed by your customer.

User Orders

Copy Webflow element

The Element is made by two custom dom elements

The customer order dom element will be duplicated once for each order placed. Inside this element you can add the following elements:

Order Name

Order name is an unique number associated to your order, you can add it to any text element with the following attribute:

Name

order

Value

name

Financial Status

Is a label that indicates the status of the payment, you can add it to any text element with the following attribute:

Name

order

Value

financialStatus

Fulfillment Status

Is a label that indicates the status of the shipping, you can add it to any text element with the following attribute:

Name

order

Value

fulfillmentStatus

Billing Address

Is the address used for billing by the customer, you can add it to any text element with the following attribute:

Name

order

Value

billingAddress

Shipping Address

Is the address used for shipping by the customer, you can add it to any text element with the following attribute:

Name

order

Value

shippingAddress

Processed At

Is the date in the current browser format for the order, you can add it to any text element with the following attribute:

Name

order

Value

processedAt

Shipping Price

Is shipping price of the order, you can add it to any text element with the following attribute:

Name

order

Value

shippingPrice

Subtotal Price

Is the subtotal price of the order, you can add it to any text element with the following attribute:

Name

order

Value

subtotalPrice

Total Price

Is the total price of the order, you can add it to any text element with the following attribute:

Name

order

Value

totalPrice

Total Tax

Is the total tax of the order, you can add it to any text element with the following attribute:

Name

order

Value

totalTax

Status Url

Is the url that will go directly to the Shopify new customers account dashboard for that specific order, you can add it to any link element with the following attribute:

Name

order

Value

statusUrl

Customer Url

Is the url that will go directly to the Shopify new customers account dashboard on the profile page, you can add it to any link element with the following attribute:

Name

order

Value

customerUrl

Url

Is the url that will go directly to the Webflow Order Page, you can add it to any link element with the following attribute:

Name

order

Value

url

Order Page

You can create an order page that will be accessible only through the link present inside the Customer Orders element. By default this page is located at the url /account/order. If you wish to change it up, do not forget to change up the JS option for it!

Order Page

Copy Webflow element

Is greatly suggested to start from the Order Page elements that contains all relevant functionalities of an order page, it’s made by three main Dom Elements.

Order Page Wrapper

This Dom Element is basically the wrapper of all the order functionalities.

Inside the order page you can add all the following elements:

Order Name

Order name is an unique number associated to your order, you can add it to any text element with the following attribute:

Name

order

Value

name

Financial Status

Is a label that indicates the status of the payment, you can add it to any text element with the following attribute:

Name

order

Value

financialStatus

Fulfillment Status

Is a label that indicates the status of the shipping, you can add it to any text element with the following attribute:

Name

order

Value

fulfillmentStatus

Cancel Reason

Is a label that indicates the cancel reason (if the order has been cancelled), you can add it to any text element with the following attribute:

Name

order

Value

cancelReason

Billing Address

Is the address used for billing by the customer, you can add it to any text element with the following attribute:

Name

order

Value

billingAddress

Shipping Address

Is the address used for shipping by the customer, you can add it to any text element with the following attribute:

Name

order

Value

shippingAddress

Created At

Is the date in the current browser format for the order creation, you can add it to any text element with the following attribute:

Name

order

Value

createdAt

Created At

Is the date in the current browser format for the order creation, you can add it to any text element with the following attribute:

Name

order

Value

createdAt

Processed At

Is the date in the current browser format for the order procession, you can add it to any text element with the following attribute:

Name

order

Value

processedAt

Shipping Price

Is shipping price of the order, you can add it to any text element with the following attribute:

Name

order

Value

shippingPrice

Subtotal Price

Is the subtotal price of the order, you can add it to any text element with the following attribute:

Name

order

Value

subtotalPrice

Total Price

Is the total price of the order, you can add it to any text element with the following attribute:

Name

order

Value

totalPrice

Total Tax

Is the total tax of the order, you can add it to any text element with the following attribute:

Name

order

Value

totalTax

Status Url

Is the url that will go directly to the Shopify new customers account dashboard for that specific order, you can add it to any link element with the following attribute:

Name

order

Value

statusUrl

Customer Url

Is the url that will go directly to the Shopify new customers account dashboard on the profile page, you can add it to any link element with the following attribute:

Name

order

Value

customerUrl

Line items

This Dom element will be duplicated once per each product purchased inside the order

Inside the line item you can add the following elements:

Name

Is the name of the purchased product, you can add it to any text element with the following attribute:

Name

line-item

Value

name

Image

Is the image of the purchased product, you can add it to any img or div element with the following attribute:

Name

line-item

Value

image

Quantity

Is the quantity purchased of the product, you can add it to any text element with the following attribute:

Name

line-item

Value

quantity

Unit Price

Is the single unit price of the purchased product, you can add it to any text element with the following attribute:

Name

line-item

Value

unitPrice

Total Price

Is the total price of the purchased product, you can add it to any text element with the following attribute:

Name

line-item

Value

totalPrice

Option

This element is a key value element that shows up variant options and properties of the purchased order, it will be duplicated once for each variant option or property used

Name

line-item

Value

option

Inside the div with the previous attribute, you have to add two text elements with respectively the attributes:

Name

option

Value

name

and

Name

option

Value

value

Order Fulfillments

This Dom element will be duplicated once per each fulfillment of the order (you can ship items with different options)

Status

Is the status of the fulfillment (like shipped, delivered, etc..), you can add it to any text element with the following attribute:

Name

fulfillment

Value

status

Estimated Delivery

Is the estimated delivery date in the current browser format for the fulfillment, you can add it to any text element with the following attribute:

Name

fulfillment

Value

estimatedDeliveryAt

Updated at

Is the updated date in the current browser format for the fulfillment last status, you can add it to any text element with the following attribute:

Name

fulfillment

Value

updatedAt

Tracking Company

Is the name of the tracking company for the fulfillment, you can add it to any text element with the following attribute:

Name

fulfillment

Value

trackingCompany

Tracking Number

Is the number of the tracking for the fulfillment, you can add it to any text element with the following attribute:

Name

fulfillment

Value

trackingNumber

Tracking Url

Is the url of the tracking for the fulfillment, you can add it to any link element with the following attribute:

Name

fulfillment

Value

trackingUrl