How can I add buttons to the header in Sense Theme?

Store Design
,
1

Hi any help, please.
I am new to shopify, I am try to add two buttons to the header of the Sense Them, currently using version 10.0.0.

Website is not currently live.
I have researched and appears you need to look for the below text, but I cannot find this code within the Sense Code liquid files.
{% include ‘icon-search’ %}

Any help on where the code should go and in which file, would be very much appreciated.
Many thanks

2

@DanC01

Please share your store URL & the screenshot of what you want!

Thanks!

3

Hello @DanC01

To add two buttons to the header of the shopify sense theme, you will need to modify the theme code.

  1. Online Store > themes

  2. Actions > Edit Code

  3. Sections> header.liquid file.

  4. Find the section where you want to add the buttons. could be in the section or inside another container like

    or .

  5. Add the following code to create a button

{{ button_text }}

Replace button_url with the URL you want the button to link to, and button_text with the desired text for the button. Also, replace button-class with a class name of your choice for styling purposes.

  1. Replace button_url with the URL you want the button to link to, and button_text with the desired text for the button. Also, replace button-class with a class name of your choice for styling purposes.

  2. Customize the button’s appearance by editing the CSS. To do this, go to the “Assets” directory in the theme editor and open the “theme.scss.liquid” file.

  3. Add your custom CSS code to style the buttons.

.button-class {
  background-color: #f00;
  color: #fff;
  padding: 10px 20px;
}

Modify the CSS properties according to your design preferences.

1 Like
4

Hey many thanks for your informative response, I am just struggling to find exactly where to place the button text within the Header.liquid file. Does not appear to be an obvious header section to place the code. I have tried a few locations with no success.
Apologies if this should be easy.

Capture.PNG
Capture.PNG975×204 4.49 KB

5

Hey, the store is not Live so i can not add a URL.
The below is the rough location of where I would like to place the button.

Capture.PNG
Capture.PNG975×204 4.49 KB

6

I also do not have the following file “theme.scss.liquid” under Assets ?

7

@DanC01

Please add CSS code to Your assets/base.css bottom of the file.

1 Like