How To Get All Ordered Products of a Customer in Shopify

by Kiet Huynh · May 17, 2021

Sell Online With Shopify

Trusted by millions of businesses worldwide

Sign up for a free trial and enjoy 3 months of Shopify for $1/month on select plans.

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.

{% if customer %}
{% paginate customer.orders by 1000 %}
{%- if customer.orders.size != 0 -%}
<script>
  // Coded by HuynhMaiAnhKiet@Gmail.Com - HuraTips.Com
  var 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 -%}

100

101

102

{% if customer %}

{% paginate customer.orders by 1000 %}

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

// Coded by [email protected] - HuraTips.Com

var 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 -%}

{%- endif -%}

{% endpaginate %}

{%- else -%}

{%- 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.

How To Get All Ordered Products of a Customer in Shopify

Related

You may also like...

Leave a Reply Cancel reply

How To Get All Ordered Products of a Customer in Shopify

Share this:

Related

Related Posts via Categories

You may also like...

How to Schedule Shopify Theme to Publish Automatically

The Best Web3 Apps for Shopify

6+ Best Force Login Apps for Shopify

Leave a Reply Cancel reply