Solved

How can I edit the 'Log in' option on my checkout page?

NickMercy
Shopify Partner
7 0 0

Hi there, 


I have a "Log in" option on my checkout page as below:

NickMercy_0-1710761197646.png

how do I edit this field to look something like this? or possible add it like log in/Register:

NickMercy_1-1710761255098.png

Thanks for the help.

 

Regards,

Nicholas

 

Accepted Solution (1)
Bhaskar_Sonowal
Shopify Partner
21 5 4

This is an accepted solution.

I won't be able to provide any assistance without looking at the checkout.liquid file. 
Could you please provide it here if possible.

However a workaround for this is to add these links by hardcoding it in the checkout.liquid file.
<a href="account register URL of  your store">Register</a>
<a href="account Login URL of your store">Login</a>
Add these links wherever you want to show it and add some styles to achieve the desired requirement.

View solution in original post

Replies 7 (7)

Bhaskar_Sonowal
Shopify Partner
21 5 4

1. Click on the 3 dots next to the theme. Then click on "Edit Default Theme Content".
2. In the search box search for "Login".
3. Then under Checkout & System, change the default placeholder text with the ones you need.
     

NickMercy
Shopify Partner
7 0 0

Hi Bhaskar,

Thank you. I did what you ask but how do you add the "Already have account" part without the link? and can we customize it so the register button takes you to register page and the log in takes you to log in one?

NickMercy_0-1710763756066.png

Thanks for help

 

Bhaskar_Sonowal
Shopify Partner
21 5 4

Hi Nick,
Changing the default theme content will only change the text and not the functionality. 
To change the functionality, you'll need to edit the theme code.
But since checkout.liquid is only available for shopify plus merchants, the functionality can be added only if you're in the shopify plus plan.
Hope that helps.

 

NickMercy
Shopify Partner
7 0 0

It helps clarify things thank you. I do have Shopify Plus though and access to that page but I cannot find the field to change it there?

thanks.

Bhaskar_Sonowal
Shopify Partner
21 5 4

This is an accepted solution.

I won't be able to provide any assistance without looking at the checkout.liquid file. 
Could you please provide it here if possible.

However a workaround for this is to add these links by hardcoding it in the checkout.liquid file.
<a href="account register URL of  your store">Register</a>
<a href="account Login URL of your store">Login</a>
Add these links wherever you want to show it and add some styles to achieve the desired requirement.

NickMercy
Shopify Partner
7 0 0

Great thanks for help! Here is my code.

<!DOCTYPE html>
<html lang="{{ locale }}" dir="{{ direction }}" class="{{ checkout_html_classes }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, height=device-height, minimum-scale=1.0, user-scalable=0">
<meta name="referrer" content="origin">

<title>{{ page_title }}</title>

{{ content_for_header }}

{{ checkout_stylesheets }}
{% comment %}<style>.order-summary__section--discount .edit_checkout+.edit_checkout{display: none;}</style>{% endcomment %}
{{ checkout_scripts }}
{% comment %}
<script>
document.addEventListener('click', function (e) {
if (hasClass(e.target, 'tag__button') || Boolean(e.target.closest('.tag__button'))) {
document.querySelector('.order-summary__section--discount .edit_checkout+.edit_checkout').style.display = 'block';
}
}, false);
function hasClass(elem, className) {
return elem.classList.contains(className);
}
</script>
{% endcomment %}
</head>
<body class="checkout_page">
{{ skip_to_content_link }}

<header class="banner" data-header role="banner">
<div class="wrap">
{{ content_for_logo }}
</div>
</header>

{{ order_summary_toggle }}
<div class="content" data-content>
<div class="wrap">
<div class="main">
<header class="main__header" role="banner">
{{ content_for_logo }}
{{ breadcrumb }}
{{ alternative_payment_methods }}
</header>
<main class="main__content" role="main">
{{ content_for_layout }}
<script>
var getElementsByAttribute = function(attr, value) {
var els = document.querySelectorAll("#order-summary .tags-list .tag use"),
result = []
for (var i=0, _len=els.length; i < _len; i++) {
var el = els[i]
if (el.hasAttribute(attr)) {
if (el.getAttribute(attr) === value) result.push(el)
}
}
return result
}
document.addEventListener("click", function(e){
const target = e.target.closest(".step__footer__continue-btn");
if(target){
let tags = getElementsByAttribute("xlink:href","#gift-filled").length;
console.log('new_button', tags);
if (tags > 1){
e.stopPropagation();
e.preventDefault();
alert('You can use up to 1 discount code');
}
}
});
</script>
</main>
<footer class="main__footer" role="contentinfo">
{{ content_for_footer }}
</footer>
</div>
<aside class="sidebar test" role="complementary">
<div class="sidebar__header">
{{ content_for_logo }}
</div>
<div class="sidebar__content">
{{ content_for_order_summary }}
</div>
</aside>
</div>
</div>
{% comment %}
{% if checkout.applied_gift_cards.size == 0 %}
<style>.order-summary__section--discount .edit_checkout+.edit_checkout{display: block;}</style>
{% else %}
<script>document.querySelector('.order-summary__section--discount .edit_checkout+.edit_checkout').style.display = 'none';</script>
{% endif %}
{% endcomment %}

{{ tracking_code }}
</body>
</html>

Bhaskar_Sonowal
Shopify Partner
21 5 4

Hi Nick, I believe the contents of the checkout page are being loaded from a different file or template. ({{ content_for_layout }}). I couldn't find anything related to the link either in the above code.

However, the previous solution I gave works in a similar manner. You can surely give it a try.