Opacity Lightness Hover

How to Adjust Opacity Lightness Hover for Tertiary Color Scheme in AppSections Brand Style

The "Opacity Lightness Hover" setting in the Brand Style of AppSections allows you to control the change in opacity when an element is hovered over. This setting provides flexibility in adjusting the lightness or darkness of elements during a hover event, enhancing the interactive experience. Here is how you can adjust the opacity lightness hover for the tertiary color scheme:

Opacity Lightness Hover

Purpose: This setting allows you to define how the opacity of an element changes when it is hovered over, making it appear lighter or darker.

Usage: Use the range selector to set the desired change in opacity from -25% (darker) to +25% (lighter).

Steps to Adjust Opacity Lightness Hover for Tertiary Color Scheme

1. Select the Brand Style:

   • Open your Shopify theme editor.

   • Navigate to the Brand Style settings.

2. Locate the Opacity Lightness Hover Setting:

   • In the Brand Style settings, find the Opacity Lightness Hover option for the tertiary color scheme.

3. Adjust Opacity Lightness Hover:

   • Use the range selector to set the change in opacity during hover between -25% and +25%:

     • -25%: The element will become 25% darker when hovered over.

     • 0%: No change in opacity during hover.

     • +25%: The element will become 25% lighter when hovered over.

Ensuring the Right Opacity Lightness Hover Application

1. Preview Changes:

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

   • Check various elements to ensure the hover opacity setting is applied correctly and enhances the interactive experience.

2. Check Consistency:

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

3. Test Across Devices:

   • Verify the opacity lightness hover setting on different devices to ensure it looks good and maintains functionality on all screen sizes.

Summary

By using the "Opacity Lightness Hover" setting in the Brand Style of AppSections, you can control the change in opacity for the tertiary color scheme during hover events in your Shopify store. This flexibility allows you to enhance the interactive experience of your elements, ensuring a dynamic and engaging user experience across all devices. Adjusting the opacity lightness hover helps create visually appealing effects and improves the overall design consistency.

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