How do I add a clickable button to my header? (Colorblock Theme)

Store Design
, ,

Topic summary

A user wants to add a prominent red button in their Shopify store header (Colorblock theme), positioned next to the cart icon.

Solution Provided:
A support representative offered step-by-step code implementation:

  • Insert HTML markup in header.liquid file (after the account icon element)
  • Add CSS styling in base.css file to create a red button (200px width, 30px height, pointer cursor)
  • Includes screenshots showing code placement and expected visual result

Current Status:
The user is now asking follow-up questions about:

  • How to add a clickable link to the button
  • How to change the button text to “Customer Portal”

The discussion remains open with implementation details provided but customization questions pending.

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

Hello,

I would like to add a big red button to the top header beside the cart icon. Can anyone help with this? Im adding a photo below to give an idea about what I’m looking for. It does not have to be in that specific location as long as it is within the header and highly visible.

Thank you!

Screenshot 2024-05-06 at 11.29.11 AM.png
Screenshot 2024-05-06 at 11.29.11 AM.png1746×346 96.1 KB

2

Hi Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

3

Hi!

Here is the store link: https://gometrographics.store/

I am in the process of staging the site so it looks slightly different from the screen grab.

Thanks!

4

hi @MetroGraphics

You can try this code by following these steps:

  1. Go to Shopify Admin → Online Store ->Theme → Edit code
  2. Choose file header.liquid, find header__icon–account and insert this below code then Save

image.png
image.png1601×842 57.4 KB

  1. Choose file base.css, Insert the below code at the bottom of the file:
.header-custom-button{
        height: 30px;
        width: 200px;
        background-color: red;
        border:none;
        cursor:pointer;
      }

Final result:

image.png
image.png1919×675 71.9 KB

Hope this can help you

Kind regards

5

Hi!

How do I add a link and make it say “Customer Portal”?