Color Schema Hover

How to Adjust Color Schema Hover Effects in AppSections

The "Color Schema Hover" setting in AppSections allows you to define the hover effect for blocks, groups, and sections. This setting provides flexibility in defining the appearance of your components when a user hovers over them, enhancing the interactivity and visual appeal. The hover effects are based on the animations defined in the active brand style. Here is how you can adjust the color schema hover effects:

Color Schema Hover

Purpose: This setting allows you to choose the type of animation applied to the color scheme when a user hovers over a block, group, or section.

Usage: Select from three options to set the desired hover effect.

Color Schema Hover Options

1. None: No animation is applied on hover.

2. Invert Schema: Applies the color inversion rule defined in the brand style animations.

3. Opacity: Applies the opacity variation rule defined in the brand style animations.

Steps to Adjust Color Schema Hover Effects

1. Select the Block/Group/Section:

   • Open your Shopify theme editor.

   • Navigate to the specific block, group, or section where you want to change the hover effect.

2. Locate the Color Schema Hover Setting:

   • In the settings for the block, group, or section, find the Color Schema Hover option.

3. Select Hover Effect:

   • Choose one of the three options based on your design preferences:

     • None: No hover animation.

     • Invert Schema: Applies the color inversion rule on hover.

     • Opacity: Applies the opacity variation rule on hover.

Ensuring the Right Hover Effect

1. Preview Changes:

   • After selecting a hover effect, preview your store to see how the changes look.

   • Check the block, group, or section to ensure the hover effect is applied correctly and enhances the visual appeal and interactivity.

2. Check Consistency:

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

3. Test Across Devices:

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

Summary

By using the "Color Schema Hover" setting in AppSections, you can control the hover animation applied to your blocks, groups, and sections in your Shopify store. This flexibility allows you to enhance the visual appeal and interactivity 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.