Customer UI Button Click Navigate Open New Tab

Shopify Apps
1

We are currently customizing the customer account interface on our Shopify storefront, and we’d like to implement a feature that allows a button click to open a specific link in a new browser tab.

This functionality is intended to enhance the user experience by enabling users to access external

Could you please advise on the most appropriate way to implement this within the constraints of Shopify’s customer account UI?

Orders-rkmcredit-Account.png
Orders-rkmcredit-Account.png437×671 78.5 KB

2

Hi @rkmsoftware ,

  • Edit Theme: Go to Online Store > Themes > Actions > Edit Code.

  • Add Button in customers/order.liquid: Find the button section (near “Generate Invoice”) and add:

[Open Link](https://your-link.com)

Style in theme.scss.liquid (Assets): Add

.custom-btn {
  background-color: #006bff;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  margin-left: 10px;
}
.custom-btn:hover {
  background-color: #0056d2;
}

Optional Dynamic Link in theme.js (Assets): Add:

document.addEventListener('DOMContentLoaded', function() {
  const orderId = "{{ order.id }}";
  const customBtn = document.querySelector('.custom-btn');
  if (customBtn) customBtn.href = `https://your-link.com?order=${orderId}`;
});

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Use our Big Bulk Discount app to boost your sales! :rocket: (https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!

3

@websensepro Thanks for the reply. The integration uses Shopify customer and UI extensions. Please share any thoughts or ideas you have related to that