Colors

Colors

This article explains how to choose and use colors in your Acendy store's design, including how to use color variables for consistency.

Choosing Colors

In your online store's settings, you can select colors to create a color palette for your store.

Choose colors:

• You can decide the colors for buttons, texts, and backgrounds in your store.
• For example, you can set all buttons to be blue.

See the changes:

• When you change a color, you can instantly see how it looks in a preview.
• This allows you to experiment and find the colors you like best.

In short, the color settings allow you to customize the look of your online store by selecting and saving colors.

Variables

The colors in the theme settings are stored as CSS variables, so they can be reused throughout the design builder and through custom code.

What is a variable?

A CSS variable, also known as a "CSS custom property", is a way to store values that can be reused in your CSS code. Think of it as a container for a value, such as a color, size, or font.

Here are some important points about CSS variables

Reuse:

They let you define a value once and then use it in multiple places in your CSS code. This makes it easier to maintain and update styles, especially in large projects.

Dynamic update:

If you change the value of a CSS variable, all the elements that use that variable are automatically updated.

Flexibility:

They give you more flexibility and control over the style of your website.

Related article:

Custom CSS

Using Colors and Variables

When you add a block that contains color settings, it will by default use the color that is set up in the theme settings.

For example; text color in a block will automatically be linked to the text color in global settings.

This is indicated on the color selector in the block with the text Linked to global color and an icon that indicates that the link is active. If you want to change to a color that is not set up in the theme settings, you can enter the color code in the field. The icon on the right will then change and indicate that the link to the global color is broken.

Restore Link

If you have changed the color manually so that the link was broken, but you want to restore the link, you can click the icon. The field will then be linked to the global color and the field will be updated to Linked to global color in addition to the icon being updated.

Using Other Variables

In addition to using the global color for the field, you can connect the field to other color variables from the theme settings. For example, you can connect text color to the color variable for primary color.

Find the field you want to change the color for

Click the button to change the color

Choose among the variables that appear at the bottom (hover over to see which field the color belongs to)

When you select a variable other than the one that is global, the field will still show the link icon, but now the name of the variable will be displayed in the field. Example: var(—primary-color)

The link to the global color can be restored in the same way as above.