Add button to header login

Store Design
, , , , , ,

Topic summary

A user wants to replace the cart icon in their Shopify theme header with a simple “Login” button featuring a 1px black outline on the homepage.

Initial Request:

  • Remove cart icon from header
  • Add styled login button instead
  • Design: 1px black outline, minimal styling

Solution Provided:
The helper suggested modifying the header.liquid file by:

  1. Locating the existing cart icon code in the theme files
  2. Replacing it with a styled <button> or <a> tag containing “Login” text
  3. Adding inline CSS for the border styling (border: 1px solid black; padding: 5px 10px)

Current Status:
The user shared their existing cart code snippet (containing {{ routes.cart_url }} and cart icon logic). The helper’s follow-up responses appear corrupted/reversed in the thread, making the final implementation details unclear. The discussion remains open with the user seeking specific guidance on which exact code to replace in their provided snippet.

Note: Some responses contain garbled/reversed text, suggesting potential encoding or display issues in the original thread.

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

Hi,

I want to add a button that says Login to my header instead of the cart on the homepage

just a 1px outline black button.

236A857F-3EE7-4DCB-BF29-9A2274519516.jpeg
236A857F-3EE7-4DCB-BF29-9A2274519516.jpeg1170×2532 135 KB

my site is https://lux360.net

2

Hi @Luxluxlux360

To add a black, 1px outlined “Login” button in place of the cart icon on your homepage header in Shopify, follow these steps:

  1. Go to Online Store > Themes in your Shopify admin, and select Edit code.
  2. Open the header.liquid file in your theme.
  3. Find the code for the cart icon, usually located within or tags.
  4. Replace it with this code for the “Login” button:

Login

  1. Save changes and refresh your homepage to view the button.

If you have other questions, I am willing to answer them more.

Best regards,

Daisy
3

<a href=“{{ routes.cart_url }}”

class=“navlink navlink–cart”

data-drawer-toggle=“drawer-cart”>

{% if section.settings.use_icons %}

{{ cart_icon }}

{{ ‘layout.cart.title’ | t }}

{{ cart_status }}

{% else %}

{{ ‘layout.cart.title’ | t }}

{{ cart_status }}

{% endif %}

this is my code. Can you let me know what to replace thank you

4

Any colitis for this?

5

Hi @Luxluxlux360

Based on your provided code, if you need to replace the href attribute with a specific cart URL, you can substitute {{ routes.cart_url }} with your actual cart URL. Here’s how you can do it:

Modified Code with Specific Cart URL:

<a href=“https://yourwebsite.com/cart”

class=“navlink navlink–cart”

data-drawer-toggle=“drawer-cart”>

{% if section.settings.use_icons %}

{{ cart_icon }}

{{ ‘layout.cart.title’ | t }}

{{ cart_status }}

{% else %}

{{ ‘layout.cart.title’ | t }}

{{ cart_status }}

{% endif %}

**Steps to Replace:**1. Identify Your Cart URL: Determine the exact URL of your cart page. For example, https://yourwebsite.com/cart.

  1. Replace the Placeholder: Substitute {{ routes.cart_url }} with your actual cart URL within the href attribute.
  2. Verify Functionality: After making the change, ensure that the cart link correctly navigates to your cart page.

Example Replacement:

If your cart URL is https://example.com/cart, update the href like this:

<a href=“https://example.com/cart”

class=“navlink navlink–cart”

data-drawer-toggle=“drawer-cart”>

Additional Tips:- Dynamic URLs: If you’re using a platform that supports dynamic URLs (like Shopify with Liquid), ensure that replacing {{ routes.cart_url }} with a hardcoded URL won’t disrupt other functionalities.

Testing: Always test the updated link to confirm it directs users to the correct cart page without issues.