Lightness

How to Adjust Lightness in AppSections

The "Lightness" setting in AppSections allows you to adjust the brightness of the color palette for blocks, groups, and sections. This setting provides flexibility in defining the appearance of your components by creating light or dark variants of the selected color, enhancing the overall visual appeal and consistency with your brand style. Here is how you can adjust the lightness:

Lightness

Purpose: This setting allows you to create light or dark variants of the selected color by adjusting the brightness. Usage: Use the range selector to set the desired lightness from -50% to +50%.

Steps to Adjust Lightness

1. Select the Block/Group/Section:

   • Open your Shopify theme editor.

   • Navigate to the specific block, group, or section where you want to adjust the lightness.

2. Locate the Lightness Setting:

   • In the settings for the block, group, or section, find the Lightness option.

3. Adjust Lightness:

   • Use the range selector to set the lightness between -50% and +50%:

     • -50%: Creates the lightest variant of the color.

     • 0%: Leaves the color unchanged.

     • +50%: Creates the darkest variant of the color.

Ensuring the Right Lightness

1. Preview Changes:

   • After adjusting the lightness, preview your store to see how the changes look.

   • Check the block, group, or section to ensure the lightness adjustment is applied correctly and enhances the visual appeal.

2. Check Consistency:

   • Ensure that the lightness adjustment aligns with your brand’s aesthetic and provides a cohesive look across both desktop and mobile devices.

3. Test Across Devices:

   • Verify the lightness adjustment on different devices to ensure it looks good and maintains visual appeal on all screen sizes.

Summary

By using the "Lightness" setting in AppSections, you can create light or dark variants of the selected color for your blocks, groups, and sections in your Shopify store. This flexibility allows you to enhance the visual appeal and consistency of your components, ensuring a dynamic and engaging user experience across all devices.

If you have any questions or need further assistance, please contact our customer support team.