Hi, i want to add space between order history tab & account details tab in the my account page. And i want to change fulfilment status column to order status and the order status to processing instead of unfulfilled, fullfilled to shipped. Please help me. Thanks in advance.
1 Like
Adding the space should be a quick fix with CSS, the code would depend on the theme but I’d say increasing the right padding or margin of the “Order History” container should work.
To customize the texts you should look first into the options included in the Language Editor of the theme, you may find an Accounts section there that will allow you to customize texts like “Fulfillment status”, “fulfilled”, “unfulfilled”. Shopify has its own instructions here: https://help.shopify.com/en/manual/online-store/themes/customizing-themes/language/change-wording
You can also try an app like our Customer Account Concierge to further customize the account page and texts like “fulfilled” “unfulfilled” and any other on the new account page.
Hi @JaviExpress
Thank you so much for your reply. Can you please help me with the code for adding Margin or padding. I’m using dawn theme. Thank you.
Hi @JaviExpress ,
thank you for helping, I was able to customise texts “Fulfillment status”, “fulfilled”, “unfulfilled”. but I am still not able to add padding and margin between order history and account details tab it would be really good if you could help me with the code to add padding and margin. Thanks in advance.
Sure I just came back home after a couple of days out. Happy that you could customize the texts.
About the space, let’s try this. Go to your Shopify Admin > Online Store > Themes > (click on Actions on your Dawn Theme) > then on Edit Code
In the Editor use the search box to find the template customers/account.liquid and open it
Scroll down to the bottom of the template and paste this and click on Save:
@media screen and (min-width: 990px) {
:is(.account,.order)>div:nth-of-type(2)>div:first-of-type {padding-right: 10rem}
}
Let me know if it works in Desktop view, you can increase the padding (10rem, 11rem, 12rem…) if you need. If it doesn’t work remove the code you pasted and let me know the URL of your account page.
Hi @JaviExpress ,
I tried but this code is making the order history section smaller. Not shifting the account details to the right.
In that case use the padding rule along another rule to choose the width of the second container “Account Details”. These are the two rules together, you can increase/decrease both the padding and the width if you need:
@media screen and (min-width: 990px) {
:is(.account,.order)>div:nth-of-type(2)>div:first-of-type {padding-right: 10rem}
:is(.account,.order)>div:nth-of-type(2)>div:nth-child(2) {width:20%}
}
Or alternatively, you can also fix the width of the first container “Order History”
@media screen and (min-width: 990px) {
:is(.account,.order)>div:nth-of-type(2)>div:first-of-type {padding-right: 10rem; width:80%}
}
Hi @JaviExpress thank you for helping me out it worked pretty well.
You’re welcome @suryagoswami7 , I’m glad it worked out