All things Shopify and commerce
Hi,
I am trying to change the font size of the headers in my Order History and Main Order tables on my Customer Account pages. They appear way too big on smaller screens.
I have tried editing the relevant sections in my code (using Craft Theme) (thead, tr, th, and general div and row lines) but nothing I do seems to work.
I would like to change the font size to match the rest of my site with 14px size.
Any suggestions?
Site Link:
https://www.ambriajewellery.co.uk
Problem Page Link (account needed):
https://www.ambriajewellery.co.uk/account
Images of the relevant pages:
This is the code I have tried changing:
<thead role="rowgroup">
<tr role="row">
<th id="ColumnOrder" scope="col" role="columnheader" style="font-size: 14px; font-weight: bold;">Order</th>
<th id="ColumnDate" scope="col" role="columnheader" style="font-size: 14px; font-weight: bold;">{{ 'customer.orders.date' | t }}</th>
<th id="ColumnPayment" scope="col" role="columnheader" style="font-size: 14px; font-weight: bold;">{{ 'customer.orders.payment_status' | t }}</th>
<th id="ColumnFulfillment" scope="col" role="columnheader" style="font-size: 14px; font-weight: bold;">{{ 'customer.orders.fulfillment_status' | t }}</th>
<th id="ColumnTotal" scope="col" role="columnheader" style="font-size: 14px; font-weight: bold;">{{ 'customer.orders.total' | t }}</th>
</tr>
</thead>
Thanks.
Hi @Ambria ,
The code you add will not change the interface, because the part where you adjust the font size is the part of the interface that is not displayed.
You can adjust the font size of the head section in the table as follows:
Step 1: Open Edit code and find the customer.css file
Step 2: Open the file, and add the following code at the end of the file:
.order-history tbody td::before,
.order-details tbody td::before {
font-size: 14px;
}
Hope it helps @Ambria
If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here ☕.
B2B Solution & Custom Pricing | Product Labels by BSS
Need help from our expert? Kindly share your request with us via community@bsscommerce.com
Thanks, but that didn't work for me. So I went through each line of code until I found it.
For anyone else with the same problem, look for the line with .customer td::before
Learn what's possible with customizing Shopify Checkout beyond what's available out of...
By Shopify Feb 19, 20252m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025