Styles
In this section, you can change the style and appearance of several features in the theme.
Images border radius
This option works for all images in the entire store including images in the Mega Menu, product cards on collection pages, product images, and images in the sections and blocks.
The image border radius can be set on a scale from 0 pixels to 20 pixels.
Check the following examples to view the difference in settings:
Input and button border radius
Change the border radius of buttons, badges, and input fields from 0 pixels to 40 pixels.
In the following examples, you can view how the described settings might display on a desktop and mobile:
Animations
Enable appearance effect
Activate the option to add a bottom-up effect of content revealing in sections on every page. The floating content loading works on scrolling down the page only once when landing on the page:
Fixed effect for the footer
Note! To trigger the feature, a few requirements should be completed:
This option works with the disabled Fullwidth logo. To hide the logo in the Footer, go to the corresponding static section and deactivate the "Show logo" option.
The effect requires enough space on a page. If the content in the Header is too high or the browser window height is too small, the effect will be disabled automatically.
The feature can be applied to the desktop only.
Using the fixed footer effect or fixed footer effect with overlay, the content in the Footer points to be fixed on the desktop and can be covered by another section placed before the Footer when scrolling up from the very bottom of a page.
The "Enable with overlay" option adds a slight background color to the Footer section while using the fixed footer effect. Control the color overlay transparency in Theme settings -> Colors -> Other changing parameters in percents on the "Substrate transparency" slider.
The Fixed effect for the footer feature can be viewed on the DEMO.
Images desktop hover animation
To add the hover animation to images in the Mega Menu of the Header on the desktop, use the provided drop-down. Here one can decide if to apply the "Zoom in" or "Zoom out" animation. Or disable the hover effect by selecting the "None" option.
Card image desktop hover animation
In the drop-down, decide whether to display the hover animation for the product cards on collection pages and collections displayed in the sections. The theme allows activating one of the options: "Zoom in" or "Zoom out". This functionality works only on the desktop.
The "None" option disables using the zooming effect on the image card.
Card buttons desktop hover animation
The appearance of the "Add to cart" and "Quick View" buttons over the product cards of collection pages and collections displayed in the sections can be changed using one of the options in the drop-down: "None", "Fade", or "Fade up".
The "Fade up" setting can be viewed on the DEMO. Hover over the product card to view the appearance effect.
Product button animation
The theme includes three types of "Add to cart" button animations that work on Product pages and the "Featured product" section. The animation fires every two seconds without the mouse hovering over the button to attract the attention of visitors:
"Light". This option adds the light effect animation. The animation effect extends beyond the boundaries of the button.
View the example of the option on the DEMO.
"Wobble top". Select the option to add the shake effect to the top of the button and text. The bottom of the button will remain static.
An example of the effect can be viewed on the DEMO.
"Buzz out". Use the option in terms of adding the rotation shaking animation with a static center axis of the button.
Check the example on the DEMO.
Banner image desktop hover animation
If you apply the "Inherit global settings" option in the sections that provide the "Desktop hover animation" drop-down, you can apply the hover animation effect to the banner images in bulk for all the required sections.
If you need to add an animation inside the image container, choose the suggested option from the list. The options "Zoom in" and "Zoom out" place the zooming effect to enlarge or decrease an image on the mouse hover. You can activate the opacity over the image by choosing "Add overlay opacity" and selecting a color for the "Image overlay background" or "Image overlay gradient" (in each section). To use this option, ensure that the "Image overlay opacity" is set up to be transparent (in each section). The overlay opacity and zooming effect on an image can be achieved with an active "Zoom in, add overlay opacity" or "Zoom out, add overlay opacity". The option "None" deactivates the animation.
You can read more about the described options on the following help page.
Image animation duration
The current option works in conjunction with the "Image overlay opacity coefficient" and determines the speed of the color or gradient overlay when hovering over an image. Handle the animation effect on a scale from 0,5 to 3 seconds.
Image zoom coefficient
Use the current scale to control the zooming ratio from 1 to 10 for banner images across the entire store. This option inherently works only with the enabled "desktop hover animation" in the global settings or on a per-section basis.
Image overlay opacity coefficient
This option controls the depth of the background color on the mouse hover banner images with set options "Zoom in, add overlay opacity", "Zoom out, add overlay opacity", or "Add overlay opacity" in the global setting or each section individually.
The transparency of an image color or gradient overlay can be changed from 0 to 100% using the scale, where 0% - is a transparent background, and 100% - the image will be replaced by the color or gradient.
Last updated
