How can I customize the default buttons on the Dawn theme?

Technical Q&A
,
1

I am struggling to customize Dawn. I have found no way to modify the default buttons on the “Image Banner” section of the default landing page. I have searched, and copied and pasted multiple so-called solutions from this community with the green checkmark into base.css and theme.liquid files. I have not found any way to modify these buttons. What am I missing? Why is this so difficult? No solution appears to have any effect whatsoever. I have been successful with CSS and Liquid modifications in other areas of the theme. Seems to be hit-and-miss.

1 Like
2

Hey @TribocaArts

Could you please provide your Store URL and, if applicable, the Password too? Also, can you tell me what customization you would like to make on your button? Your cooperation is greatly appreciated!

Best Regards,
Moeed

3

Hi @TribocaArts

Would you mind to share your store URL? with password if still unpublish. And please let us know what changes you like in the button and which button? Thanks!

4

It is technically published, but I have not advertised at all. Nobody knows it exists yet. I have a premium theme, also, but wonder if that wasn’t a waste of money, as I am not able to effect the customizations I want with that theme, either. Long term goal is to do it all myself, but I need to get the store up and running. I have a learning curve ahead of me and don’t have the time to wait until I learn the ropes. Store is not password protected, but I use the collaborator permissions and code.

5

I tried to find a way to delete the stock image that ships with Dawn. I am favoring more light backgrounds, and the first button is white. Essentially, I added a nearly white image in the image banner. Don’t know why this is so difficult, unless it’s meant to drive shop owners to spend more money. I just want a darker button with light text, something more than a thin-lined rectangle.

1 Like
6

Frankly, I have seen and tried solutions you and Moeed have offered in other threads. They did not work.

7

Thank ypou for the info, do you mean like this?

Made4uoRibe_0-1697215730673.png
Made4uoRibe_0-1697215730673.png571×171 2.38 KB

If it is try this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.banner__buttons.banner__buttons--multiple a {
    background: darkblue;
    color: white;
}
  • And Save.
  • Note: You can change the color or used some hex color, but be sure you delete and replace only the color letters.
  • The other code or same problem that you see in the community, sometimes it work but not all the time cause you have different selector names in the stores.
1 Like
8

Thanks so much! Yes, the correct object and syntax makes all the difference. Can I substitute hex codes for named colors here? Does the syntax change?

1 Like
9

Yes, you can replace hex codes color. The color of the button is the one with the “background” code and the font color is the “color” . The default code change if you delete/remove this code it will automatic the default code come up.

10

What if I want each button to be a different color. For example I want the left to be blue and the right to be black? I’ve set the color scheme for the buttons and they are both the cornflower blue I like. But, I want the other button to be black. I plan to duplicate the section and use the image-banner with a split image for the second one. Please advise. Thank you. I’ve spent hours trying figure this out.