Hi! I am having an alignment issue with my order status pages. All of the thumbnails and titles of the products are squished on top of one another on the right side of the screen instead of being centered and spaced out above the price breakdown:
Any help would be greatly appreciated!
@terrasoleil - we will need to check coding/css of order status template, these are different from your theme code
Ah I see! How do I find that code?
This is what I found in customers/order.liquid
# {{ 'customer.account.title' | t }}
{{ 'customer.account.return' | t }}
## {{ 'customer.order.title' | t: name: order.name }}
{%- assign order_date = order.created_at | date: "%B %d, %Y %I:%M%p" -%}
{{ 'customer.order.date' | t: date: order_date }}
{% if order.cancelled %}
{%- assign cancelled_at = order.cancelled_at | date: "%B %d, %Y %I:%M%p" -%}
{{ 'customer.order.cancelled' | t: date: cancelled_at }}
{{ 'customer.order.cancelled_reason' | t: reason: order.cancel_reason }}
{% endif %}
{% for line_item in order.line_items %}
{% endfor %}
{% for discount in order.discounts %}
{% endfor %}
{% for shipping_method in order.shipping_methods %}
{% endfor %}
{% for tax_line in order.tax_lines %}
{% endfor %}
<table>
<tr>
<th>
{{ 'customer.order.product' | t }}
</th>
<th>
{{ 'customer.order.sku' | t }}
</th>
<th>
{{ 'customer.order.price' | t }}
</th>
<th>
{{ 'customer.order.quantity' | t }}
</th>
<th>
{{ 'customer.order.total' | t }}
</th>
</tr>
<tr>
<td>
{{ line_item.title | link_to: line_item.product.url }}
{% if line_item.fulfillment %}
{%- assign created_at = line_item.fulfillment.created_at | date: format: 'month_day_year' -%}
{{ 'customer.order.fulfilled_at' | t: date: created_at }}
{% if line_item.fulfillment.tracking_url %}
{{ 'customer.order.track_shipment' | t }}
{% endif %}
{{ line_item.fulfillment.tracking_company }}
{% if line_item.fulfillment.tracking_number %} #{{ line_item.fulfillment.tracking_number }} {% endif %}
{% endif %}
</td>
<td>
{{ line_item.sku }}
</td>
<td>
{{ line_item.price | money }}
</td>
<td>
{{ line_item.quantity }}
</td>
<td>
{{ line_item.quantity | times: line_item.price | money }}
</td>
</tr>
<tr>
<td colspan="4">
{{ 'customer.order.subtotal' | t }}
</td>
<td>
{{ order.subtotal_price | money }}
</td>
</tr>
<tr>
<td colspan="4">
{{ discount.code }} {{ 'customer.order.discount' | t }}
</td>
<td>
{{ discount.savings | money }}
</td>
</tr>
<tr>
<td colspan="4">
{{ 'customer.order.shipping' | t }} ({{ shipping_method.title }})
</td>
<td>
{{ shipping_method.price | money }}
</td>
</tr>
<tr>
<td colspan="4">
{{ 'customer.order.tax' | t }} ({{ tax_line.title }} {{ tax_line.rate | times: 100 }}%)
</td>
<td>
{{ tax_line.price | money }}
</td>
</tr>
<tr>
<td colspan="4">
**{{ 'customer.order.total' | t }}**
</td>
<td>
**{{ order.total_price | money }} {{ order.currency }}**
</td>
</tr>
</table>
---
### {{ 'customer.order.billing_address' | t }}
**{{ 'customer.order.payment_status' | t }}:** {{ order.financial_status_label }}
{{ order.billing_address | format_address }}
### {{ 'customer.order.shipping_address' | t }}
**{{ 'customer.order.fulfillment_status' | t }}:** {{ order.fulfillment_status_label }}
{{ order.shipping_address | format_address }}
@terrasoleil - can you please share the order status page link? i will check code on browser and then we can track which code is causing this issue
I created a test order that you can use: https://www.terrasoleil.com/20941471808/orders/57933a9ea27d9dcf0d62e0b9348a9e25
@terrasoleil - you want it like this right? but issue is order details is taking css form checkout styling and we do not have checkout styling if you are not shopify plus member, so this part you need to contact shopify support, they only can help
Thank you! Yes, that’s what I want it to look like. Okay, I guess I’ll contact them about it.
@terrasoleil - welcome, do let me know if you need anything else later, you have my email below, also if possible please do like message and accept as solution.
