How can customers reorder from their account page?

Technical Q&A
1

{% paginate customer.orders by 20 %}

{{ 'customer.account.title' | t }}

{{ 'layout.customer.log_out'| t }}

{{ 'customer.orders.title' | t }}

{% if customer.orders.size != 0 %}

{% for order in customer.orders %} {% endfor %}
Re-order {{ 'customer.orders.order_number' | t }} {{ 'customer.orders.date' | t }} {{ 'customer.orders.payment_status' | t }} {{ 'customer.orders.fulfillment_status' | t }} {{ 'customer.orders.total' | t }}
Reorder {{ order.name }} {{ order.created_at | date: format: 'month_day_year' }} {{ order.financial_status_label }} {{ order.fulfillment_status_label }} {{ order.total_price | money }}

{% else %}

{{ 'customer.orders.none' | t }}

{% endif %}

{{ 'customer.account.details' | t }}

{{ customer.name }}

{{ customer.default_address | format_address }}

{{ 'customer.account.view_addresses' | t }} ({{ customer.addresses_count }})

{% comment %}

My Rewards

{% endcomment %}

My Rewards

My Wishlist

{% if paginate.pages > 1 %}
{% include ‘pagination’ %}
{% endif %}

{% endpaginate %}

{% for order in customer.orders %}

Select products to Reorder

Item
Price
Quantity

{% for lineitem in order.line_items %}

{{lineitem.title}}
{%comment%} {{lineitem.variant.inventory_quantity}} {%endcomment%}
{%if lineitem.variant.inventory_quantity <= 15 %} soldout{%endif%}
{{lineitem.price | money}}
{% endfor %}

×

{% endfor %}

.center { display: none; position: fixed; z-index: 9; padding-top: 0px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: black; background-color: rgba(0, 0, 0, 0.4); } .hideform { display: none; } #Re_orderbtnz { margin: 15px 10px 15px 10px; float: right; } .popcontent { background-color: #fefefe; margin: auto; /* padding: 16px 25px 32px 25px; */ border: 1px solid #888; width: 70%; max-width: 700px; position: absolute; left: 50%; top: 55%; transform: translate(-50%, -50%); } .reorder_wholediv .show { background-color: #4CAF50; border: none; color: white; padding: 9px 5px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; } .ordersum { padding: 15px; border-bottom: 2px solid #e5e5e5; } span.advance_reorder_mobilehide { font-weight: bold; color: #ff0000; font-size: 22px; } span.odertolpric { font-weight: bold; color: #3a3535; font-size: 22px; } .center .close { color: #000; position: absolute; font-size: 28px; font-weight: bold; top: 5px; right: 32px; } .hulk_title_bar { display: flex; align-items: center; padding: 10px 20px; } .hulk_item { width: 65%; text-align: left; } .hulk_quantity { width: 15%; display: flex; align-items: center; flex-wrap: wrap; } .hulk_price { width: 15%; } .recart__itemrow { overflow-y: auto; width: 100%; display: flex; align-items: center; padding: 15px; border-bottom: 1px solid #eaecee; } .reitm_wrapper { width: 65%; text-align: left; display: flex; align-items: center; } .recart__qtys { width: 15%; text-align: left; } .reorder_wholediv { max-height: 45vh; overflow-y: auto; } .reitm_prics { width: 15%; } .reitem__title { padding: 15px; } .modal-footer { background: #e3e3e347; } @media (max-width: 600px){ .popcontent { width: 96%; } .reorder_wholediv .click_check { margin-left: 10px !important; } .recart__qtys { width: 50%; float: left; } .reitm_prics { width: 50%; float: left; } .reitm_wrapper { width: 100%; text-align: left; display: flex; align-items: center; } .recart__itemrow { overflow-y: auto; width: 100%; display: block; align-items: center; padding: 15px; border-bottom: 1px solid #eaecee; } }
2

{% paginate customer.orders by 20 %}

{{ 'customer.account.title' | t }}

{{ 'layout.customer.log_out'| t }}

{{ 'customer.orders.title' | t }}

{% if customer.orders.size != 0 %}

{% for order in customer.orders %} {% endfor %}
Re-order {{ 'customer.orders.order_number' | t }} {{ 'customer.orders.date' | t }} {{ 'customer.orders.payment_status' | t }} {{ 'customer.orders.fulfillment_status' | t }} {{ 'customer.orders.total' | t }}
Reorder {{ order.name }} {{ order.created_at | date: format: 'month_day_year' }} {{ order.financial_status_label }} {{ order.fulfillment_status_label }} {{ order.total_price | money }}

{% else %}

{{ 'customer.orders.none' | t }}

{% endif %}

{{ 'customer.account.details' | t }}

{{ customer.name }}

{{ customer.default_address | format_address }}

{{ 'customer.account.view_addresses' | t }} ({{ customer.addresses_count }})

{% comment %}

My Rewards

{% endcomment %}

My Rewards

My Wishlist

{% if paginate.pages > 1 %}
{% include ‘pagination’ %}
{% endif %}

{% endpaginate %}

{% for order in customer.orders %}

Select products to Reorder

Item
Price
Quantity
Select Item

{% for lineitem in order.line_items %}

{{lineitem.title}}
{%comment%} {{lineitem.variant.inventory_quantity}} {%endcomment%} {%if lineitem.variant.inventory_quantity <= settings.inventory_threshold %} Sold Out{%endif%}
{{lineitem.price | money}}
{% endfor %}

Rewards, discounts codes, shipping, and taxes are calculated at checkout.

Subtotal : {{ order.line_items_subtotal_price | money }}
{%comment%} {%- if order.cart_level_discount_applications != blank -%} {%- for discount_application in order.cart_level_discount_applications -%}
{{ 'customer.order.discount' | t }} | {{ discount_application.title }} : -{{ discount_application.total_allocated_amount | money }}
{%- endfor -%} {%- endif -%}

{% for shipping_method in order.shipping_methods %}

{{ 'customer.order.shipping' | t }} ({{ shipping_method.title }}) : {{ shipping_method.price | money }}
{% endfor %}

{% for tax_line in order.tax_lines %}

{{ 'customer.order.tax' | t }} ({{ tax_line.title }} {{ tax_line.rate | times: 100 }}%) : {{ tax_line.price | money }}
{% endfor %}
{{ 'customer.order.total' | t }} : {{ order.total_price | money }} {{ order.currency }}
{%endcomment%}

×

{% endfor %}

#style-4::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5; } #style-4::-webkit-scrollbar { width: 10px; background-color: #F5F5F5; } #style-4::-webkit-scrollbar-thumb { background-color: #000000; border: 2px solid #555555; } .center { display: none; position: fixed; z-index: 1111; padding-top: 0px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: black; background-color: rgba(0, 0, 0, 0.4); } .hideform { display: none; } #Re_orderbtnz { margin: 10px 30px 10px 10px; float: right; } .popcontent { background-color: #fefefe; margin: auto width: 70%; max-width: 700px; position: absolute; left: 50%; top: 55%; transform: translate(-50%, -50%); } .reorder_wholediv .show { background-color: #4CAF50; border: none; color: white; padding: 9px 5px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; } .ordersum { padding-top: 15px; border-bottom: 2px solid #e5e5e5; } span.advance_reorder_mobilehide { font-weight: bold; color: #ff0000; font-size: 22px; } span.odertolpric { font-weight: bold; color: #3a3535; font-size: 22px; } .center .close { color: #000; position: absolute; font-size: 28px; font-weight: bold; top: 5px; right: 32px; cursor: pointer; } .Re_ordhead { font-size: 20px; font-weight: 600; text-align: center; margin-bottom:2px; } .hulk_title_bar { display: flex; align-items: center; padding: 10px 20px; } .hulk_item { width: 65%; text-align: left; } .hulk_quantity { width: 15%; display: flex; align-items: center; flex-wrap: wrap; } .hulk_price { width: 15%; text-align: center; } .hulk_action_chek{ width: 15%; text-align: center; } .recart__itemrow { overflow-y: auto; width: 100%; display: flex; align-items: center; padding: 10px 0px 0px 20px; border-bottom: 1px solid #eaecee; } .reitm_wrapper { width: 65%; text-align: left; display: flex; align-items: center; } .recart__qtys { width: 15%; text-align: center; } .recart__chbx{ width: 15%; text-align: center; } .reorder_wholediv { max-height: 35vh; overflow-y: auto; } .reprice_text { text-align: center; } .reitm_prics { width: 15%; } .reitem__title { padding: 15px; } .modal-footer { background: #e3e3e347; } .resub_totl { width: 100%; padding: 5px 35px 0px 20px; display: block; } .popcontent .line_subtotl{ margin-bottom: 0px; text-align:right; font-size:14px; font-weight: 600; } .recarts_img { width: 15%; } .recarts_img img{ width:60%; } .reitem__title { width: 85%; } .recarts_img img{width:100%;} @media (max-width: 600px){ .popcontent { width: 96%; } .reorder_wholediv .click_check { margin-left: 10px !important; } .recart__qtys { width: 35%; float: left; } .reitm_prics { width: 35%; float: left; } .recart__chbx{ width: 20%; float: left; } .reitm_wrapper { width: 100%; text-align: left; display: flex; align-items: center; } .recart__itemrow { overflow-y: auto; width: 100%; display: block; align-items: center; padding: 15px; border-bottom: 1px solid #eaecee; } .hulk_quantity { display: none !important; } .hulk_price { display: none; } .hulk_action_chek { width: 30%; text-align: center; } .Re_ordhead{ font-size: 17px; font-weight: 600; margin-bottom: 15px; text-align: center; } }
3

hello, where do I implement this code?
I tried to use another solution and the buttons are all there but they are not clickable (I followed from here - but am getting no answers)
https://www.mojoin.com/shopify-add-buy-again-button/