Colors settings for buttons, links, badges, and product
Product block
| Setting | Description |
| Preview price | This setting allows you to change the color of the product price in the preview mode of your theme. |
| Tax note | You can set color for tax notes on the cart page. |
| Border color | With this setting, you can change the border color of your product or adjust the color of lines on various sections of your website. This includes the product section, collection section, collection page, and all products page. |
2. Colors for Badges: all badges, sale badge, sold out badge
2.1. All badges block
| Setting | Description |
| Text | This setting allows you to change the color of the text badge for all labels, such as “Best Seller”, “New”, “Hot Seller” or “Women's fashion”. You can customize the color to match your website's branding or design style. |
| Background | With this setting, you can change the color of the background badge for all labels, such as “Best Seller”, “New”, “Hot Seller” or “Women's fashion”. |
| Background gradient | Create a custom gradient for the background of a badge. This gradient typically transitions from one color to another, creating a visually appealing effect. You can use a gradient picker to choose the colors and adjust their positions to create the desired gradient effect. After applying the background gradient, select a background color that will serve as the border for the button in this case. |
| Border color | The “Border Color” setting allows you to specify the color of the border that surrounds the badges. This border can help the badges stand out more prominently against the product images or background. You can choose a color from the color picker or enter the hexadecimal code of the desired color to customize the border according to your brand's style and preferences. |
Sale badge block
| Setting | Description |
| Text | This setting lets you modify the color of the text badge for labels marked as “sale”. |
| Background | With this setting, you can change the color of the background badge for labels marked as “sale”. This helps you highlight your discounted products and attract customers' attention. |
| Background gradient | Create a custom gradient for the background of a badge. This gradient typically transitions from one color to another, creating a visually appealing effect. You can use a gradient picker to choose the colors and adjust their positions to create the desired gradient effect. After applying the background gradient, select a background color that will serve as the border for the button in this case. |
| Border color | The “Border Color” for "Sale" Badge setting allows you to specify the color of the border that surrounds the badges. This border can help the badges stand out more prominently against the product images or background. You can choose a color from the color picker or enter the hexadecimal code of the desired color to customize the border according to your brand's style and preferences. |
Sold out badge block
| Setting | Description |
| Text | This setting enables you to change the color of the text badge for labels marked as “sold out” or “out of stock”. This lets you adjust the color to make it more visible. |
| Background | With this setting, you can change the color of the background badge for labels marked as “sold out” or “out of stock”. This helps you clearly indicate which products are no longer available for purchase. |
| Background gradient | Create a custom gradient for the background of a badge. This gradient typically transitions from one color to another, creating a visually appealing effect. You can use a gradient picker to choose the colors and adjust their positions to create the desired gradient effect. After applying the background gradient, select a background color that will serve as the border for the button in this case. |
| Border color | The “Border Color” for "Sold Out" badge setting allows you to specify the color of the border that surrounds the badges. This border can help the badges stand out more prominently against the product images or background. You can choose a color from the color picker or enter the hexadecimal code of the desired color to customize the border according to your brand's style and preferences. |
Colors for buttons: primary and secondary
Primary button block
| Setting | Description |
| Text | This setting allows you to add color to the text of the primary button. |
| Background | With this setting, you can add color to the background of the primary button. |
| Background gradient | This setting enables you to create a custom gradient for the background of the primary button. Gradients transition from one color to another, creating a visually appealing effect. You can use a gradient picker to choose colors and adjust their positions to create the desired gradient effect. |
| Border | You can use this setting to add color to the border of the primary button. |
| Text hover | Here, you can specify the color of the text when a user hovers their mouse over the primary button. |
| Background hover | This setting allows you to specify the color of the button's background when a user hovers their mouse over it. |
| Gradient hover | Similar to Background Hover, this setting allows you to specify a gradient effect for the background of the button when a user hovers their mouse over it. |
| Border hover | Lastly, you can specify the color of the border when a user hovers their mouse over the primary button. |
These settings give you a lot of flexibility to customize the appearance of your primary buttons to match your brand and design preferences.
Secondary button block
| Setting | Description |
| Text | This setting allows you to specify the color of the text on the secondary button. |
| Background | With this setting, you can choose a color for the background of the secondary button. This is the area behind the text of the button. |
| Background gradient | Similar to the Primary Button block, this option enables you to create a custom gradient for the background of the secondary button. Gradients transition from one color to another, creating a visually appealing effect. |
| Border | You can use this setting to add a border to the secondary button. This is the outline around the button. |
| Text hover | This option allows you to specify the color of the text when a user hovers their mouse over the secondary button. |
| Background hover | With this setting, you can specify the color of the button's background when a user hovers their mouse over it. |
| Gradient hover | Similar to Background Hover, this setting allows you to specify a gradient effect for the background of the button when a user hovers their mouse over it. |
| Border hover | Lastly, you can specify the color of the border when a user hovers their mouse over the secondary button. |
These settings provide you with the flexibility to customize the appearance of your secondary buttons to match your brand and design preferences, just like with the primary buttons.
Icons block
| Setting | Description |
| Social | Add color to the social icons. |
Events block
| Setting | Description |
| Link hover | This option allows you to add color used for active and hovering links, tabs, icons, etc. |
| Link secondary hover | This option allows you to add color used for secondary active and hovering links, tabs, icons, etc. |
| Button text hover | This option allows you to add color used for active and hovering button text. |
| Button background hover | This option allows you to add color used for active and hovering button background. |
| Button border hover | This option allows you to add color used for active and hovering button border. |