customers/order.liquid Changing Arrive Button and Tracking Info Button Text Color

Topic summary

A user discovered that button text colors (“Track order with Shop” and tracking number) appear in white on their order page, making them difficult to read against the background.

Issue Details:

  • The problem occurs on the customer order lookup page
  • Two screenshots show the white text visibility issue
  • User suspects the CSS code is located in customers/order.liquid

Current Status:

  • User is seeking guidance on how to change the text color from white to black
  • They’ve shared the relevant liquid template code from their theme
  • No solutions or responses have been provided yet

The discussion remains open with the original question unanswered. This appears to be a CSS styling issue that likely requires either custom CSS modifications or theme file adjustments to improve text contrast and readability.

Summarized with AI on November 25. AI used: claude-sonnet-4-5-20250929.

Looking up an order, I noticed the that Track order with Shop and the tracking number text colors were white as shown below.

Is it possible to change the text to black?

I believe the location of the CSS code is in customers/order.liquid. Here is the code.


  {% if settings.show_breadcrumbs %}
    
  {% endif %}

  

  

    

      

        {%- assign order_date = order.created_at | time_tag: format: "date_at_time" -%}
        {{ 'customer.order.date_html' | t: date: order_date }}
      

      {% if order.cancelled %}
        
          {%- assign cancelled_at = order.cancelled_at | time_tag: format: "date_at_time" -%}
          

{{ 'customer.order.cancelled_html' | t: date: cancelled_at }}

          

{{ 'customer.order.cancelled_reason' | t: reason: order.cancel_reason }}

        

      {% endif %}

      
          {% for line_item in order.line_items %}
          
          {% endfor %}
        

          {%- if order.cart_level_discount_applications != blank -%}
            
              {%- for discount_application in order.cart_level_discount_applications -%}
                
              {%- endfor -%}
            
          {%- endif -%}

          {% 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 }}
              {%- assign property_size = line_item.properties | size -%}
              {% unless line_item.selling_plan_allocation == nil and property_size == 0 %}
                

                  {% unless line_item.selling_plan_allocation == nil %}
                    {{ line_item.selling_plan_allocation.selling_plan.name }}
                  {% endunless %}
                  {% if property_size != 0 %}
                    {% for property in line_item.properties %}
                      {% assign property_first_char = property.first | slice: 0 %}
                      {% if property.last != blank and property_first_char != '_' %}
                        {{ property.first }}:
                        {% if property.last contains '/uploads/' %}
                          {{ property.last | split: '/' | last }}
                        {% else %}
                          {{ property.last }}
                        {% endif %}
                      {% endif %}
                    {% endfor %}
                  {% endif %}
                

              {% endunless %}
              {%- if line_item.line_level_discount_allocations != blank -%}
                {%- for discount_allocation in line_item.line_level_discount_allocations -%}
                  

                    {{ discount_allocation.discount_application.title }} (-{{ discount_allocation.amount | money }})
                  

                {%- endfor -%}
              {%- endif -%}
              {% if line_item.fulfillment %}
                
                  {%- assign created_at = line_item.fulfillment.created_at | time_tag: format: 'date' -%}
                  {{ 'customer.order.fulfilled_at_html' | t: date: created_at }}
                  {% if line_item.fulfillment.tracking_number %}
                    {{ line_item.fulfillment.tracking_company }} #{{ line_item.fulfillment.tracking_number}}
                  {% endif %}
                

              {% endif %}
            

</td>

            <td>

{{ line_item.sku }}

</td>

            <td>

              {%- if line_item.original_price != line_item.final_price -%}
                {{ 'products.general.regular_price' | t }}
                {{ line_item.original_price | money }}
                {{ 'products.general.sale_price' | t }}
                {{ line_item.final_price | money }}
              {%- else -%}
                {{ line_item.original_price | money }}
              {%- endif -%}

              {%- if line_item.unit_price_measurement -%}
                {%- capture unit_price_base_unit -%}
                  
                    {%- if line_item.unit_price_measurement -%}
                      {%- if line_item.unit_price_measurement.reference_value != 1 -%}
                        {{ line_item.unit_price_measurement.reference_value }}
                      {%- endif -%}
                      {{ line_item.unit_price_measurement.reference_unit }}
                    {%- endif -%}
                  
                {%- endcapture -%}

                
{{ line_item.unit_price | money }}/{{ unit_price_base_unit }}

              {%- endif -%}
            

</td>

            <td>

{{ line_item.quantity }}

</td>

            <td>

              {%- if line_item.original_line_price != line_item.final_line_price -%}
                {{ 'products.general.regular_price' | t }}
                {{ line_item.original_line_price | money }}
                {{ 'products.general.sale_price' | t }}
                {{ line_item.final_line_price | money }}
              {%- else -%}
                {{ line_item.original_line_price | money }}
              {%- endif -%}
            

</td>

          </tr>

        
          <tr>

            <td colspan="4">

{{ 'customer.order.subtotal' | t }}

</td>

            <td>

{{ order.line_items_subtotal_price | money }}

</td>

          </tr>
<tr>
<th colspan="4">

                  {{ 'customer.order.discount' | t }} | {{ discount_application.title }}
                

</th>

                <td>

                  

                    
                      {{ discount_application.title }}
                    
                    -{{ discount_application.total_allocated_amount | 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.name }}

      

        {% if order.billing_address.company != blank %}
          {{ order.billing_address.company }}

        {% endif %}
        {{ order.billing_address.street }}

        {{ order.billing_address.city }}

        {% if order.billing_address.province != blank %}
          {{ order.billing_address.province }}

        {% endif %}
        {{ order.billing_address.zip | upcase }}

        {{ order.billing_address.country }}

        {{ order.billing_address.phone }}
      

      

---

      ### {{ 'customer.order.shipping_address' | t }}

      

**{{ 'customer.order.fulfillment_status' | t }}:** {{ order.fulfillment_status_label }}

      

{{ order.shipping_address.name }}

      

        {% if order.shipping_address.company != blank %}
          {{ order.shipping_address.company }}

        {% endif %}
        {{ order.shipping_address.street }}

        {{ order.shipping_address.city }}

        {% if order.shipping_address.province != blank %}
          {{ order.shipping_address.province }}

        {% endif %}
        {{ order.shipping_address.zip | upcase }}

        {{ order.shipping_address.country }}

        {{ order.shipping_address.phone }}