thread Change background color and image fit on main categories in Online Store

Change background color and image fit on main categories

JKO — Sun, 02 Nov 2025 13:44:33 GMT

I have a neutral color palate for my website that includes white. The background color for my main category images, however, is light gray. I have tried to select white for the color, but to no avail. Tips?

Also, the images in my main categories tend to bleed out of the box. Any tips for making them "fit" within the allotted space?

Re: Change background color and image fit on main categories

Stacelyn24 — Tue, 04 Nov 2025 14:22:12 GMT

Hey there! 👋 Love that you’re working with a neutral palette — clean and calm always wins!

🎨 About Changing the Background Color:

If you're trying to make the background of your main category images white but it's staying light gray, it’s likely one of these:

Theme Limitations
Some Square Online templates automatically apply a light gray background for category image blocks, and unfortunately, there’s no editable color option for that section.
Section Style vs. Site Style
Make sure you’re editing the individual section style (not the global site style). Go to:
- Edit Site > Click on the category section
- Look for "Section Style" or "Background Color"
- If no color picker is offered, that means it's locked by the theme.

🔧 Quick Workaround:
You can place your category images onto a pure white square using a free tool like Canva or remove any transparent parts of the image, so the white background blends in — even if the section stays gray.

🖼️ About Image Bleeding:

If your images are bleeding or spilling outside the frame, here’s what works:

Use Square Images
Ensure the images are cropped to 1:1 ratio (square) before uploading — Square Online scales non-square images, which can cause bleeding or clipping.
Match Image Dimensions
Try uploading all your category images at the same pixel size (e.g., 800x800px with white or neutral padding around them). This helps keep the layout uniform and prevents overflow.
Adjust Crop Mode
In the editor, click on an image > "Edit Image" or "Layout", and switch between Crop to Fit or Contain — one will keep the image fully inside the frame.

Re: Change background color and image fit on main categories

JKO — Tue, 04 Nov 2025 15:03:49 GMT

On the first item, I have the color selector option and I choose white but I still get a gray background on that section.

On the second, I discovered the "contain" option and that has worked for all my images including the category ones. It's a good tip to keep the pixel size equivalent in all images (though harder than you'd think to accomplish!)

Re: Change background color and image fit on main categories

Stacelyn24 — Tue, 04 Nov 2025 19:56:52 GMT

Hey there! 👋 That gray background is likely coming from the section or block layout itself (not just the color picker). Try clicking on the section or content block and look for a background or layout style—it may have its own default color set. Change that to white, and you should be good to go! Let me know if that helps 😊