Colors & Color schemes
Change the color scheme to match the website's look and feel
One of the most important components of designing a visually appealing, functional, and accessible theme is color.
Not only does a well-designed color system reinforce a merchant’s branding, but it also has the power to enhance and improve the user’s experience.
What is a color scheme?
In Megamog theme, you can define different color schemes in your theme settings and apply the color schemes to different sections throughout your online store, using a color scheme picker.
A color scheme is a set of colors that applies to the following elements:
Primary accent: Used for focus, active, and links
Background or Background gradient
Text
Subtext
Solid button background
Secondary button background
Secondary button label
Outline button
Border
Price sale
Price regular
Form field background
Tooltip background
You can create up to 21 color schemes in Megamog.
Manage your color scheme
Steps:
From your Shopify admin, go to Online Store > Themes.
Click Customize next to the theme that you want to customize.
In the Schemes section, click an existing scheme or click Add scheme to add a new color scheme.
Click the color swatch for the content type color that you want to change.
To set your color, enter a hex color code or choose the color from the color picker. To set the color to transparent, delete the hex code from the text field.
Click Save.
Apply your color scheme
After defining your color scheme in the theme settings, you can assign a color scheme using the color scheme picker in the sections and blocks settings.
The color scheme picker is available only in certain sections, blocks, and general theme settings.
Gradients
You can set up a gradient of colors for visually interesting background options.
The gradient picker allows you to select the colors, gradient style, angle, position, and opacity of the gradient.
The options selected in the gradient picker can be previewed in real-time in the theme editor.
Set up gradients
From your Shopify admin, go to Online Store > Themes.
Click Customize next to the theme that you want to customize.
In the Schemes section, click an existing scheme that you want to edit.
Click the gradient color swatch option, such as Background gradient.
If you haven't previously set up a gradient, then some preset options are displayed for you to choose from. Select any preset gradient to open the options panel.
Select your gradient options:
Choose between a linear or radial gradient. Use the buttons to select your preferred gradient style.
Set the angle of your gradient with the up and down arrows. Clicking the up or down arrow increases or decreases the angle percentage by 5.
Use the slider to select the position of your gradient, or enter a numeric value in the field.
Enter a specific color hex code or use the color slider to choose a hue. Recently selected colors are displayed at the bottom of the gradient options panel.
To make your gradient opaque, use the slider on the right to select the transparency of your gradient. You can also enter a percentage in the field next to the hex color code.
Click Save.
Remove a gradient
From your Shopify admin, go to Online Store > Themes.
Click Customize next to the theme that you want to customize.
Click the gear icon (Theme settings), and then click Colors.
In the Schemes section, click an existing scheme that you want to edit.
Click the gradient that you want to remove.
Click Remove gradient.
Click Save.
Last updated
