Add button to header login

[Luxluxlux360]

 

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. 

my site is https://lux360.net

[DaisyVo]

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 <a> or <button> tags.
4. Replace it with this code for the "Login" button:

<button style="border: 1px solid black; padding: 5px 10px;">Login</button>

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

[Luxluxlux360]

<a href="{{ routes.cart_url }}"

        class="navlink navlink--cart"

        data-drawer-toggle="drawer-cart">

        {% if section.settings.use_icons %}

          {{ cart_icon }}

          <span class="visually-hidden">{{ 'layout.cart.title' | t }}</span>

          {{ cart_status }}

        {% else %}

          <span class="navtext cart__status__parens">

            {{ 'layout.cart.title' | t }}

            {{ cart_status }}

          </span>

        {% endif %}

      </a>

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

[Luxluxlux360]

Any colitis for this?

[DaisyVo]

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 }}

        <span class="visually-hidden">{{ 'layout.cart.title' | t }}</span>

        {{ cart_status }}

    {% else %}

        <span class="navtext cart__status__parens">

            {{ 'layout.cart.title' | t }}

            {{ cart_status }}

        </span>

    {% endif %}

</a>

Steps to Replace:

1. Identify Your Cart URL: Determine the exact URL of your cart page. For example, https://yourwebsite.com/cart.
2. Replace the Placeholder: Substitute {{ routes.cart_url }} with your actual cart URL within the href attribute.
3. 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">

    <!-- Rest of the code remains the same -->

</a>

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.