Help with custom css

Store Design
, , , ,

Topic summary

Custom CSS is requested to make marketplace app pages visually match a Shopify theme. Key issues: button and search colors don’t match, images appear small/distorted, and pages don’t span full width.

An expert provided a basic CSS approach (added via theme.liquid, a Shopify layout file) and step-by-step instructions to implement it. The initial change fixed background/filter color, which the requester confirmed.

Remaining requests include:

  • Product grid: 4 across (not 3) and full-width layout.
  • Correct image sizing/spacing to prevent distortion.
  • Product text: show name before price; match site fonts, size, and remove bold.
  • Color-match UI elements (seller tabs, divider line, search and contact buttons) to #683830, including the “Meet our sellers” search bar.

The expert noted extensive CSS is required and cannot be completed via the browser console; theme access is needed to proceed. The requester shared a collaborator code (3711) and asked for next steps.

Status: open and moving to implementation via collaborator access. Screenshots were provided to illustrate layout and style mismatches; no final solution yet.

Summarized with AI on December 18. AI used: gpt-5.
1

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.

2

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.

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 tag

Result:

sahilsharma9515_0-1726039883864.png
sahilsharma9515_0-1726039883864.png1864×454 328 KB

sahilsharma9515_1-1726039909048.png
sahilsharma9515_1-1726039909048.png1896×397 51.3 KB

sahilsharma9515_2-1726039934510.png
sahilsharma9515_2-1726039934510.png1650×333 186 KB

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

1 Like
3

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

4

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

1 Like
5

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

6

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