Add a "Get started" button on header, Dawn theme

Store Design
1

Hi how do I add a “Get started” button on my header? Button should be solid coloured filled and be on the most right location of the header. When the button is clicked, it should go into one of our quiz page.
And how can I remove the “Search” icon on the top right? I’m using the Dawn theme. Thanks in advance!

2

@sundaysinbed - adding button will need code editing… need to edit header.liquid file to add html code to add button

to remove search, need css

3

What code would I need to add and remove? I can share my current code under header.liquid if needed

4

@sundaysinbed - can you share the site link?

5

sure, it’s https://e01252.myshopify.com/

6

  1. Locate the HTML file: Find the HTML file responsible for rendering the header section. In the Dawn theme, it is usually named something like header.html or header.twig. This file defines the structure and content of the header.

  2. Add the “Get started” button: Within the header HTML file, locate the section where the header content is defined. Add the following HTML code to create the button:

Get started

Adjust the href attribute value to match the URL or file path of your quiz page.

  1. Style the button: Open the CSS file associated with the theme (often named styles.css or main.css) and add the following CSS code to style the button:
.get-started-button {
  background-color: #your-color; /* Replace with your desired background color */
  color: #fff; /* Replace with the desired text color */
  padding: 10px 20px; /* Adjust padding as needed */
  border-radius: 4px; /* Adjust border radius as needed */
  text-decoration: none;
  margin-right: 10px; /* Adjust margin as needed */
}

.get-started-button:hover {
  background-color: #your-hover-color; /* Replace with your desired hover background color */
  /* Add any other hover styles as desired */
}
​
7

@sundaysinbed - are you familiar with the coding? if yes then please add following code to the header.liquid file before the of the - 


Get Started

and then css to the very end of base.css file

#header_get_started{text-decoration: none; color: #fff; background-color: #e09d34;    display: flex; align-items: center; padding: 0 10px; margin-left: 10px;}

so it looks like this

suyash1_0-1685025284181.png
suyash1_0-1685025284181.png1366×768 176 KB

8

I managed to get the “get started” button up into the codes thank you! How/ where do I add the link to where the button leads to? I use the “ShopQuiz” app for it and the link to the quiz is #quiz-yGHO2j

9

@sundaysinbed - does this app have a separate page?

10

No the dashboard opens up in Shopify’s dashboard itself. If you click on the “Take me there” button on the homepage of my website, it will come up

11

@sundaysinbed - you have this line

Get Started

replace # with your code and it will work, so it becomes

Get Started
12

Yess that works! Thank you so so much!! :slightly_smiling_face: