Help with custom css

[chloejong]

Hi Community

i recently turned my website into a marketplace and added an app to my website,

the app design is very generic and I’m wanting to customise it so it seamlessly works with the website.

www.wellknowngoods.com

- pages that need custom css

https://www.wellknowngoods.com/pages/seller-profile

and each individual seller page

https://www.wellknowngoods.com/pages/seller-profile/maisie

(there is three that is just one example).

please note that when you click on the seller page the add to cart button, search bar button details are not colour matching my website, the images are small and distorted and the pages don’t take up the entire width of the website page.

if anyone can please help me with this that would be amazing.

[sahilsharma9515 · Accepted solution]

Hi @chloejong I have looked into your site, To design the pages according to your theme, there is a lot of CSS that needs to be added so that it can match with your theme.

All of that code can't be done in the console, here is the basic code that will change the color and style of the filter.

<style>
main#MainContent {
    background-color: #f8f0de;
}

select#wk_seller_app_filter {
    background-color: transparent;
    border: unset;
    color: #4f2122b1;
}

select#wk_show_qty {
    background-color: transparent;
    border: unset;
    color: #4f2122b1;
}
</style>

Please follow the steps:

1. Login in shopify admin.
2. Click on the Online Store.
3. Then click on the button next to Customize in live Theme.
4. Click Edit Code.
5. Search theme.liquid in the code in left hand side in your theme.
6. Add the following code in the bottom of the file above </body> tag

Result:

If you will unable to implement the same or write the rest of the code then I'm happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

Best Regards

Sahil

[chloejong]

Hi Sahil!

Thank you so much for your help!! Yes your advice has worked for changing the colour of the background. I would love your help to achieve the rest of the tweaks if possible.

- image size and spacing to match main categories, 4 images cross instead of three the font and the name/price to match main website (pictures added)
- see how the first image is only three images and smaller distorted size, and the price comes first instead of the name of the product. Would also like the font size and colour to be the same on both image names/prices. not in bold.

[Screen Shot 2024-09-12 at 7.30.13 AM.png][Screen Shot 2024-09-12 at 7.30.24 AM.png]

-

-

- colours of "seller products" tabs and long line across the page, search bar button, contact button, to be changed to match well known goods colours, same for the search bar on meet our sellers page (colour is #683830)
-

[Screen Shot 2024-09-12 at 7.27.42 AM.png]

Thank you so much for your assistance
Chloe

[sahilsharma9515]

Hi @chloejong Glad to hear that the code works, As mentioned in my earlier answer all the request that you have mentioned can't be done from the console, You need to provide the access of your theme so that I can do it, also please note it will take time to complete it.

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

Best Regards

Sahil

[chloejong]

Hey Sahil

Oh yes I understand thanks for the reply. The code for my shopify collaborator is 3711

Thanks so much for your help, Chloe

[chloejong]

Hi Sahil

I would love your help to do the rest of the code as discussed. Please let me know what you need on my end. My shopify collaborator code is 3711. I have tried researching code and doing my self but i cant do it.

Thanks, Chloe