Customer UI Button Click Navigate Open New Tab

Customer UI Button Click Navigate Open New Tab

rkmsoftware
Shopify Partner
22 1 6

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

Fullstack Developer
Replies 2 (2)

websensepro
Shopify Partner
2109 262 313

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:

<a href="https://your-link.com" target="_blank" class="btn custom-btn">Open Link</a>

 

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! 🚀 (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!

 

 

Need a Shopify developer? Hire us at WebSensePro For Shopify Design Changes/Coding
For Free Tutorials Subscribe to our youtube
Get More Sales Using Big Bulk Discount APP
Create Your Shopify Store For Just 1$/Month
Get More Sales Using Big Bulk Discount APP
rkmsoftware
Shopify Partner
22 1 6

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

Fullstack Developer