How To Get All Ordered Products of a Customer in Shopify
You want to show all ordered products for each customer on your Shopify store. This article will guide you how to do that for free manually.
- From your Shopify admin, go to Online Store > Themes.
- Find the theme you want to edit, and then click Actions > Edit code.
- In the Templates directory, click Add a new template.
- In the dialog appear, you choose Page for the select box dropdown and fill ordered-products for the next input field.
- You paste the below code to the end of this new file template.123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102{% if customer %}{% paginate customer.orders by 1000 %}{%- if customer.orders.size != 0 -%}<script>// Coded by [email protected] - HuraTips.Comvar orders_products = [];var hura_product_titles = [];var hura_product_images = [];var hura_product_links = [];{%- for order in customer.orders -%}{%- unless order.cancelled -%}{%- for line_item in order.line_items -%}{%- if line_item.product.id -%}var product_id = {{line_item.product.id}};if(typeof orders_products[product_id] === 'undefined'){orders_products[{{line_item.product.id}}] = 1;var product_title = '{{ line_item.product.title | replace:"'","\'" }}';var product_image = '{{ line_item.product.featured_image | product_img_url: '400x' }}';var product_link = '{{ line_item.product.url }}';hura_product_titles.push( product_title );hura_product_images.push( product_image );hura_product_links.push( product_link );}{%- endif -%}{%- endfor -%}{%- endunless -%}{%- endfor -%}var html = '';hura_product_titles.forEach(function(title,i){var k = i+1;if( k%3 == 1 ) html += '<div class="hura-rows">';html += '<div class="hura-prod center">';html += '<a href="'+hura_product_links[i]+'" class="link-img">';html += '<div class="relative product_image"><img src="'+hura_product_images[i]+'"></div>';html += '</a>';html += '<a href="'+hura_product_links[i]+'" class="link-title">';html += '<div class="info">'+title+'</div>';html += '</a>';html += '</div>';if( k%3 == 0 || k==hura_product_titles.length ) html += '</div>';});document.getElementById("hura-ordered-products").innerHTML = html;</script><style>.hura-rows{display: flex;flex-direction: row;justify-content: center;max-width: 100%;margin: auto;}.hura-rows .hura-prod{flex:1 1 auto;display: flex;flex-direction: column;margin: 1em 0.5em;border: 1px solid #ececec;padding: 5px 5px 10px;}.hura-rows .hura-prod .link-title {align-self: flex-start;margin: auto;}.hura-rows .hura-prod .link-img{display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-flex-direction: column;flex-direction: column;-ms-flex-direction: column;-webkit-justify-content: center;-ms-justify-content: center;justify-content: center;-ms-flex-pack: center;-webkit-align-items: center;-ms-align-items: center;align-items: center;-ms-flex-align: center;-webkit-flex-grow: 1;flex-grow: 1;-ms-flex-positive: 1;position: relative;text-align: center;overflow: hidden;}.hura-rows .hura-prod .info{margin-top: auto;font-size: 15px;}@media (max-width: 798px){.hura-rows{flex-wrap: wrap;}}</style>{%- else -%}<script>document.getElementById("hura-ordered-products").innerHTML = 'You haven\'t placed any orders yet.';</script>{%- endif -%}{% endpaginate %}{%- else -%}<script>window.location.replace("/account/login?return_url={{page.url}}");</script>{%- endif -%}
- Click Save.
Now, you must creat new page to show ordered products.
From your Shopify admin, go to Online Store > Pages. Click Add page to create a new page.
After you press “<>” you will be able to manage the chosen web page in HTML. Paste the code into the needed area and click Save button.
- From your Shopify admin, go to Online Store > Pages
- Click Add page to create a new page
- Set page title for this page
- Choose page.ordered-products template for this page
- In Visual Editor, there you should press “<>” to show HTML
- Paste the code into the content arena
- Click Save and you are done.
I hope this article is useful for you.
