How to change variant/quantity/buy buttons on one specific page

So, I found some code to change my background color. It works fine, but as you can see in the first image there is space between the product image and the rest of the website which shows the default background color, which I would like to change.

In the second image, I want to change the color of all the selected and unselected buttons. I do not want to change them for the whole website. I know you can change them in the colors tab. I want to change it specifically on this exact product page, perhaps with custom css. I’ve tried to figure this out for about an hour or two and have turned up unsuccessful. I managed to figure out some code to change the selected button color, but I cannot for the life of me figure out how to change unselected buttons. Or the quantity/add to cart buttons.

I’m using the dawn theme.

Please help me. Not a coder, going insane trying to figure this out on my own by copy pasting different ids and classes and such and just seeing what changes color when I do it.

HI @soyeahstuff

Send me store url will check as possible

Hi @soyeahstuff
Its Artzen Technologies! We will be happy to help you today.

As you mentioned that you are not from the coding background and simply trying to figure out the solution for you problem. I will be sharing a process to change the style of the particular page. For that I will attach the screenshots to make it easier for you to understand.

1.) First of all go to OnlineStore–> EditCode–> theme.liquid file.
There you have to find the tag in the file. And write a simple line test-{{ page_title }}.
Just like the below attached screenshot:-

This particular line will provide you the title of the page. It will be visible when you inspect on the frontend of the store. Like the below Screenshot.

Here in the above screenshot you can see that it gave the same title on the inspect as the url.

And now we will give CSS on this basis to the particular page. I am sharing the screenshot about how to add css to this class.

And this screenshot is for other product where this css has no effect.

This above mentioned method is easy to implement and understand. You can easily change the CSS of any particular page without affecting other pages.

If this solution helped you then please mark it as accepted.

Let me know if need further assistance
Regards,
Artzen Technologies

Hello! Sorry for the late reply, I have been quite busy. You’ve shown me how to add css to the page, which is great… but I don’t have any css that I can add. I do not know how to change what I want to change. I don’t need to know how to add css, I need to know what css to add to it to change what I want to change.