Modify tag so that title always shown (disable hover to see)

Shopify Discussion
1

I suspect this is an easy fix; but, it has me stumped!

I have a 2.0 Shopify theme. The exact address does not matter because the issue is on a page that only a customer can see.

On the Accounts Details and Order History page (customers/account.liquid) the order number (order.name) is not shown until the user hovers over the number:

Jason712_0-1648837117333.png
Jason712_0-1648837117333.png585×196 6.96 KB

This is how it shows with the cursor hovered over the area above the date:

Jason712_1-1648837117336.png
Jason712_1-1648837117336.png613×181 7.03 KB

This is the code associated with the #1017 in the picture above:

{{ order.name | link_to: order.customer_url, order.name }}{% if order.cancelled %}: {{ 'customer.order.cancelled' | t }}{% endif %}

How do I modify this tag so that:

  1. The invoice number is always shown

  2. Add the word ‘Order ’ before the order number

The goal, in this particular case, is to have “Order #1017” rendering without the need to hover.

2

It sounds like CSS (styling for websites) is controlling this.

Here’s how you can solve:

A) If you share the url of the page and how to log in, we can inspect the page to see the CSS properties and tell you what to modify.

B1) Or if you don’t want to share your url you can read this guide about how to inspect a web page: https://speedboostr.com/how-to-safely-edit-your-shopify-theme. Once you inspect a web page you can read the properties and adjust the CSS as needed.

B2) If you’re not feeling either of those solutions, and would like it done for you, feel free to reach out to my team at speedboostr.com/contact. We’re a team of professional Shopify developers that modify themes, build out full sites, optimize sites for speed, and build apps.

3

Thank you for your response. I looked at the CSS yesterday and found that the relevant code was row 7 column 2706. I was able to disable the hover using the Google Chrome inspect tool by changing color from ‘inherit’ to ‘ghostwhite’.

Jason712_0-1649265381611.png
Jason712_0-1649265381611.png847×269 91.9 KB

What concerns me about changing the CSS is that it will impact other instances on the site that use the current specifications. Whereas, if I could identify which template is used to render the section, I could change the template. Not sure if this makes sense. I have attached a copy of the CSS (providing a login userid and password to the entire community does not seem like a wise thing to do).

Also, I will reach out to your team to better understand your services for future work (e.g. site optimization). Thanks.

4

For CSS you want to follow these principles:

  1. Go specific when you need to be specific. For example identify the page or ID of the element to only affect in that area. Example:
.template-customer h4 {
  color: #fff
}

That would only allow the change to be affected if the h4 element is nested in a class called “template-customer”. Pages in themes typically have a class so you just find that class (using the same inspect method) then attach the CSS to that.

  1. Always put CSS in a custom file that loads after your theme style sheet. Then if you ever update your theme, you do not risk losing your customizations because they are in their own file. That article I linked shows how to do that.

  2. Always edit on a backup theme and preview before publishing.

Sounds good, if you need any edits like this and go with my team, they can help you out, create the custom CSS file, show you where to edit in the future if you wanted to have someone start it for you.

5

Thank you!

1 Like