This guide will walk you through the simple process of removing a linear gradient background from a section in the Surge theme and replacing it with a solid color of your choice.
Overview
By default, some sections in the Surge theme may feature a linear gradient. If you prefer a clean, solid background, you can easily swap this out within the theme editor using a standard hex color code.
Step-by-Step Guide
1. Open the Theme Editor
Log in to your Shopify admin dashboard and navigate to Online Store > Themes. Click the Edit Theme button next to your Surge theme to open the theme editor.
2. Select Your Section
Locate the specific section you wish to edit (for example, the FAQ section) by clicking on it in the sidebar or selecting it directly in the live preview.
3. Remove the Gradient
In the section settings sidebar, look for the Background Color or Gradient field.
- You will see the current setting is a "Linear Gradient."
- Click the Remove Gradient button. This will clear the existing gradient styling.
4. Enter a Solid Color Code
Once the gradient is removed, you will need to provide a standard hex color code to set the new background:
- Click into the color input field.
- Type or paste your desired hex code.
- Important: Ensure you include the hash (#) symbol at the beginning (e.g., #FFFFFF for white or #000000 for black) to ensure the color renders correctly.
5. Save Your Changes
Once you see the solid color update in the preview window, click Save in the top right corner to apply the changes to your live store
See this video for a quick visual guide.
? Quick Tip: Common Color Codes
If you aren't sure which code to use, here are a few basics:
- White: #FFFFFF
- Black: #000000
- Light Grey: #F4F4F4
- Dark Grey: #333333
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article