How can I improve my mobile cart design for better user experience?

Store Design
, , ,
1

Website: efsstore.com.au

Template: Venture

Hey guys, I am trying to achieve a better experience for mobile customers on the cart. How would you make it more user friendly?

Shopping Cart looks like this until about 800px.

normal.jpg
normal.jpg1281×451 31.5 KB

Then it changes to:

Your-Shopping-Cart-–-EFS-Store.png
Your-Shopping-Cart-–-EFS-Store.png682×534 31.3 KB

2

cart-template.liquid

{%- assign totalCompareAtPrice = 0 -%}
{%- assign totalSavings = 0 -%}

{% if cart.item_count > 0 %}

{{ 'cart.general.title' | t }}

{% include ‘banana-stand-cart-top-container’ %}

{% for item in cart.items %} {% endfor %}
{{ 'cart.label.product' | t }} Item Price {{ 'cart.label.quantity' | t }} {{ 'cart.label.total' | t }}
{{ item.title | escape }}

{% unless item.variant.title contains ‘Default’ %}

{% for option in item.product.options %} {{ option }}: {{ item.variant.options[forloop.index0] }}
{% endfor %}
{% endunless %}

{% comment %}
Optional, loop through custom product line items if available

Line item properties come in as having two parts. The first part will be passed with the default form,
but p.last is the actual custom property and may be blank. If it is, don’t show it.

For more info on line item properties, visit:

{% for p in item.properties %} {% unless p.last == blank %} {{ p.first }}:

{% comment %}
Check if there was an uploaded file associated
{% endcomment %}
{% if p.last contains ‘/uploads/’ %}
{{ p.last | split: ‘/’ | last }}
{% else %}
{{ p.last }}
{% endif %}
{% endunless %}
{% endfor %}

{% endif %}

{{ 'cart.general.remove' | t }}

{%- if item.original_price != item.final_price -%}
{{ 'products.product.regular_price' | t }}
{{ item.original_price | money }}
{{ 'products.product.sale_price' | t }}
{{ item.final_price | money }}
{%- elsif item.variant.compare_at_price > item.original_price -%}
{{ 'products.product.regular_price' | t }}
{{ item.variant.compare_at_price | money }}
{{ 'products.product.sale_price' | t }}
{{ item.original_price | money }}
{%- else -%} {{ item.original_price | money }} {%- endif -%}

{%- if item.line_level_discount_allocations != blank -%}

    {%- for discount_allocation in item.line_level_discount_allocations -%}
  • {{ discount_allocation.discount_application.title }} (-{{ discount_allocation.amount | money }})
    • {%- endfor -%}
{%- endif -%}
{{ 'cart.label.quantity' | t }}
{%- assign itemCompareAtPrice = item.variant.compare_at_price -%} {%- if itemCompareAtPrice == nil -%} {%- assign itemCompareAtPrice = item.original_price -%} {%- endif -%} {%- assign totalLineCompareAtPrice = itemCompareAtPrice | times: item.quantity -%} {%- assign totalCompareAtPrice = totalCompareAtPrice | plus: totalLineCompareAtPrice -%} {%- if item.original_line_price != item.final_line_price -%} {%- assign totalLineSavings = item.original_line_price | minus: item.final_line_price -%} {%- assign totalSavings = totalSavings | plus: totalLineSavings -%}
{{ 'products.product.regular_price' | t }}
{{ item.original_line_price | money }}
{{ 'products.product.sale_price' | t }}
{{ item.final_line_price | money }}
{%- elsif item.variant.compare_at_price > item.original_price -%} {%- assign totalLineOriginalPrice = item.original_price | times: item.quantity -%} {%- assign totalLineSavings = totalLineCompareAtPrice | minus: totalLineOriginalPrice -%} {%- assign totalSavings = totalSavings | plus: totalLineSavings -%}
{{ 'products.product.regular_price' | t }}
{{ totalLineCompareAtPrice | money }}
{{ 'products.product.sale_price' | t }}
{{ item.original_line_price | money }}
{%- else -%} {{ item.original_line_price | money }} {%- endif -%}
{{ 'cart.general.remove' | t }}
{{ 'cart.label.quantity' | t }}
{{ 'cart.general.update' | t }}
{% if section.settings.cart_notes_enable %}
{{ 'cart.general.note' | t }} {{ cart.note }}
{% endif %}

{%- if cart.cart_level_discount_applications != blank -%}

{%- for discount_application in cart.cart_level_discount_applications -%} {%- include 'icon-saletag' -%}{{ 'customer.order.discount' | t }}:{{- discount_application.title -}} -{{ discount_application.total_allocated_amount | money }} {%- endfor -%}
{%- endif -%}

Cart Subtotal: {{ cart.total_price | money }}

{%- if totalSavings > 0 -%}

You save {{ totalSavings | money }}!

{%- endif -%}

{%- capture taxes_shipping_checkout -%}
{%- if shop.taxes_included and shop.shipping_policy.body != blank -%}
{{ ‘cart.general.taxes_included_and_shipping_policy_html’ | t: link: shop.shipping_policy.url }}
{%- elsif shop.taxes_included -%}
{{ ‘cart.general.taxes_included_but_shipping_at_checkout’ | t }}
{%- elsif shop.shipping_policy.body != blank -%}
{{ ‘cart.general.taxes_and_shipping_policy_at_checkout_html’ | t: link: shop.shipping_policy.url }}
{%- else -%}
{{ ‘cart.general.taxes_and_shipping_at_checkout’ | t }}
{%- endif -%}
{%- endcapture -%}

{{ taxes_shipping_checkout }}

{% if additional_checkout_buttons %}
{% endif %}

{% else %}

{{ 'cart.general.title' | t }}

{{ 'cart.general.empty' | t }}

{{ 'cart.general.cookies_required' | t }}

{{ 'general.404.link' | t }}{% include 'icon-arrow-right' %}
{% endif %}

{% schema %}
{
“name”: {
“de”: “Warenkorb-Seite”,
“en”: “Cart page”,
“es”: “Página de carrito”,
“fr”: “Page du panier”,
“it”: “Pagina del carrello”,
“ja”: “カートページ”,
“nl”: “Winkelwagenpagina”,
“pt-BR”: “Página do carrinho”,
“zh-CN”: “购物车页面”,
“zh-TW”: “購物車頁面”
},
“settings”: [
{
“type”: “checkbox”,
“id”: “cart_notes_enable”,
“label”: {
“de”: “Warenkorb-Notifikationen erlauben”,
“en”: “Enable cart notes”,
“es”: “Habilitar notas de carrito”,
“fr”: “Activer les notes de panier”,
“it”: “Abilita note carrello”,
“ja”: “カートメモを有効にする”,
“nl”: “Notities voor winkelwagen inschakelen”,
“pt-BR”: “Ativar observações sobre o carrinho”,
“zh-CN”: “启用购物车备注”,
“zh-TW”: “啟用購物車備註”
},
“default”: false
}
]
}
{% endschema %}