CUSTOMIZING ACCOUNTS PAGE

Highlighted
New Member
22 0 0

Hello all, 

 

basically, as some may be aware, when someone places an order on your site you can choose to display this on your /account page, however the basic setup only allows you to add each order to a new on a single table. I am attempting to add each individual order to it's own individual table. Make sense? So when a customer places an order it shows in a table (card) then when a customer places a second order it shows in another table located to the right, so on and so forth.. 

I will add screen shots below of what I am looking for to help show what I mean.

 

*I am well understanding in Shopify, html and CSS and believe this has something to do with the for loop tag, so any help will be greatly appreciated. 

 

This is what I am aiming to achieve, you can see each order in it's own table.

orderboxes.pngWhat I am trying to achieve

 

This is how it currently looks, Shopify making all the orders go into the same table.

currentorderboxes.pngHow Shopify is making it all go in on table

0 Likes
New Member
22 0 0

BUMP* 

I am wondering if this is possible using {% if %} tags? Thanks.


0 Likes
Shopify Partner
2117 354 445

You have to create your grid structure and then add code in bellow loop

{% for line_item in order.line_items %}
//add you grid structure code and make it dynamic
{% endfor%}

You can check existing table code in Template->customers/order.liquid file  You have to use all existing condition.

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
New Member
22 0 0
Hi, thanks for your response, what do you mean exactly by make it dynamic?
0 Likes
New Member
22 0 0

Hi again, 

I have added below the full code for the 'recent orders' section I am aiming to edit. So instead of each recent order going into that same table, I want them to go into individual tables? Does this make sense? 

 

<div class="myaccountOrders">
                  {%- if customer.orders.size > 0 -%}
                  <h2>Your orders:</h2>
              <div class="myaccountOrders-tables">
                  <table class="">
                    <tbody>
                    {% for order in customer.orders %}
  				    <thead>
    				    <td class="order-number" data-label="{{ 'customer.orders.order_number' | t }}"><a href="{{ order.customer_url }}">ORDER NUMBER: #DX{{ order.order_number }}UK</a></td>
  					</thead>
  					<tr>
    				  <td>{{ 'customer.orders.fulfillment_status' | t }}</td>
    			 	  <td data-label="{{ 'customer.orders.fulfillment_status' | t }}">{{ order.fulfillment_status_label }}</td>
  					</tr>
  					<tr>
    				  <td>{{ 'customer.orders.date' | t }}</td>
    				  <td data-label="{{ 'customer.orders.date' | t }}">{{ order.created_at | date: format: 'month_day_year' }}</td>
  					</tr>
  					<tr>
    				  <td>{{ 'customer.orders.total' | t }}</td>
    				  <td data-label="{{ 'customer.orders.total' | t }}">{{ order.total_price | money }}</td>
  					</tr>
                    <tr>
    				  <td>{{ 'customer.orders.payment_status' | t }}</td>
    				  <td data-label="{{ 'customer.orders.payment_status' | t }}">{{ order.financial_status_label }}</td>
  					</tr>
                    <tr>
                      <td></td>
  					</tr>
                    {% endfor %}
                    </tbody>
				  </table>
              </div>
0 Likes
Shopify Partner
2117 354 445

You have to create your grid structure design instead  of table structure 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
New Member
22 0 0
I am usually good with stuff like this, I am just not sure how I would put each group of TR into it’s own grid side by side? Without using the liquid variables more than once?
0 Likes
Shopify Partner
2117 354 445

Its simple think that you just need to remove TR stuff and apply your div stuff so you can design it lik grid that you want. keep use all liquid variable for exact same purpose you juts need to change your HTML stuff. 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes