Default theme provides customer with simple checkout process:
Throughout the checkout the customer is presented with clearly marked steps showing them what stage they are at the moment and how many steps left to complete the checkout.
It must also be noted that checkout has a different header and footer implementation with less information to avoid customers distractions from the checkout. It is recommended to keep links leading away from the process to minimum and instead include all information right on the pages themselves to provide customer with guidance and reassurance thus preventing checkout abandonment.
Element | Template | Configurations1 | Content include2 | Description |
---|---|---|---|---|
C.1 Login form | This component is described in Login and Registration pages documentation | |||
C.2 Registration form | This component is described in Login and Registration pages documentation | |||
F.0 Footer meta include | Checkout footer | "footer_include" | Additional page meta data e.g. additional javascript. This is rendered at the bottom of the page and is not intended for any visible elements | |
F.1 Footer | Checkout footer | "footer_co_nav_include" | Footer can include social links, additional menus, logos etc | |
H.0 Header meta include | Checkout header | "header_include" | Additional page meta data e.g. Google Analytics meta tag. This is rendered at the very top of the page and is not intended for any visible elements | |
H.1 Shop logo | Checkout header | Shop image "SHOP_IMAGE0" | Logo for shop is using first image attribute including localised versions | |
H.2 Mini cart | Checkout header | Mini cart view is non configurable but can be overridden in custom theme | ||
M.1 Customer login | Checkout header | Shop customer name format "SHOP_CUSTOMER_FORMATTER" | Two views depending on whether customer is logged in or not. When not logged in shows a login/registration link. When logged in displays a welcome message and a drop down menu to access personal data. | |
M.2 Language selector | Checkout header | Shop language settings | Visible only if shop has more than one language option | |
M.3 Currency selector | Checkout header | Shop currency settings | Visible only if shop has more than one currency option | |
M.4 Checkout steps | Shows checkout process. Blue colour indicates current step, green indicated completed steps, grey indicates steps to complete. |
1Configurations refer to shop and category custom attributes that define behaviour of components
2Content include refers to shop URI suffix for content. For example if shop has code "SHOP10" and content include is specified as "custom_content" then URI of the content include that will be rendered is "SHOP10_custom_content"
Element | Template | Configurations1 | Content include2 | Description |
---|---|---|---|---|
C.1 Same address option | When ticked instructs YC to use the same address for billing as the one that was used for shipping. If same address is enabled then C.3 is not visible. | |||
C.2 Shipping address selection | Allows to select shipping address to use. Works very similarly to address book on profile page. | |||
C.3 Billing address selection | Allows to select billing address to use. Works very similarly to address book on profile page. If same address is enabled then this element is not visible. | |||
M.4 Checkout steps | Shows checkout process. Blue colour indicates current step, green indicated completed steps, grey indicates steps to complete. |
1Configurations refer to shop and category custom attributes that define behaviour of components
2Content include refers to shop URI suffix for content. For example if shop has code "SHOP10" and content include is specified as "custom_content" then URI of the content include that will be rendered is "SHOP10_custom_content"
Element | Template | Configurations1 | Content include2 | Description |
---|---|---|---|---|
C.1 Shipping method selection form | Allows to select carrier and then its SLA. The carrier list is filtered by allowed carrier for given shop, which have SLA for currently active currency. | |||
C.2 Shipping cost | Allows to view shipping costs including promotion discounts applied after carrier SLA has been selected. | |||
C.3 Fulfilment centre delivery | Items are grouped by fulfilment centres they are delivered by. C1 and C2 are specified per each fulfilment centre. | |||
M.4 Checkout steps | Shows checkout process. Blue colour indicates current step, green indicated completed steps, grey indicates steps to complete. |
1Configurations refer to shop and category custom attributes that define behaviour of components
2Content include refers to shop URI suffix for content. For example if shop has code "SHOP10" and content include is specified as "custom_content" then URI of the content include that will be rendered is "SHOP10_custom_content"
Element | Template | Configurations1 | Content include2 | Description |
---|---|---|---|---|
C.1 Order review | Provides detailed information about the order. Includes breakdown by each delivery in case of multiple delivery. | |||
C.2 Payment panel | Payment panel includes final preferences on delivery, payment method to be used and payment form that corresponds to the selected method. | |||
C.2.1 Multiple delivery | Provides customer with the option to split the order into multiple deliveries if some items cannot be delivered straight away (e.g. back order, pre-order). Selecting this option means that standard items will be delivered straight away, so that customer gets them sooner and the rest will be delivered when all items become available. If single delivery is chosen then there will be only one delivery when all items will be available. This option is only visible if some items in the order cannot be delivered straight away. | |||
C.2.2 Payment method selector | Allows customer to chose payment method they prefer. Selecting payment method changes the payment form element C.2.3 | |||
C.2.3 Payment form | Form that allows to confirm or pay for the order. Can be as simple as a single button or contain form to capture payment details. | |||
M.4 Checkout steps | Shows checkout process. Blue colour indicates current step, green indicated completed steps, grey indicates steps to complete. |
1Configurations refer to shop and category custom attributes that define behaviour of components
2Content include refers to shop URI suffix for content. For example if shop has code "SHOP10" and content include is specified as "custom_content" then URI of the content include that will be rendered is "SHOP10_custom_content"