Instructions - Webflow Ecommerce Website Template

1. Webflow

If you're new to Webflow, take a look at this Webflow 101 Crash Course to understand the basics and essentials.

2. Customization

To make color, fonts and style modifications easier and quicker, this Template utilizes Webflow variables feature.

3. Style Guide

This template utilizes components and variables feature in Webflow - this means the style and feel of this template can be changed easily, with just a few clicks.

4. SVG

Icons in this template are custom-made SVG code embed elements. To change an icon's size, select it and update its Height and Width values in the Style panel. To change its color, update the text color of the icon or its parent element.

5. Animated Number Counter

This template uses GSAP and ScrollTrigger to create animated number counters with a rolling digit effect. Each digit animates vertically in alternating directions when the counter enters the viewport.

How to Customize:

Enable Counter: Add the custom attribute train-counter="true" to any text element you want to animate.
Set the Number: Enter your desired number as the element's text content in Webflow Designer. The animation automatically reads the number and creates the rolling digit effect.
Animation Trigger: The counter animation starts when the element reaches approximately 80% of the viewport height.
Animation Speed: Adjust the duration value in the GSAP animation to control how long the number animation takes. The default duration is 2.5 seconds.
Animation Easing: Customize the ease value to change how the digits slow down at the end of the animation.
Digit Direction: Each digit automatically animates upward or downward in an alternating pattern.
One-Time Animation: Each counter animates only once when it enters the viewport.

Important Notes:

Include the GSAP and ScrollTrigger libraries before this script.
Keep the train-counter="true" attribute unchanged unless you also update the script.
Keep the required class names unchanged unless you also update them in the script.
The counter supports numeric digits and static characters, such as decimal points and percentage symbols.
The script automatically creates the digit structure and applies the required styling.
Avoid manually adding digit wrappers inside the counter element, as the script generates them automatically.

Remove Animated Number Counter

To disable the number animation, remove the counter script from your Webflow custom code. If GSAP and ScrollTrigger are no longer used elsewhere, you can remove their library imports as well. Publish your website to apply the changes.

6. Smooth Scrolling (Lenis)

This template uses Lenis Smooth Scroll to create a smooth and natural scrolling experience throughout the website.

How to Customize:

Lerp: Adjust the lerp value to control the smoothness of the scrolling. Lower values create smoother, slower movement, while higher values make scrolling feel more responsive.
Enable Smooth Scroll: Make sure the Lenis library is loaded before running the initialization script.
Remove Smooth Scroll: If you prefer the default browser scrolling behavior, remove the Lenis initialization script.

Note: Avoid adding multiple Lenis instances, as this may cause scrolling conflicts.

Remove Smooth Scrolling

To disable Lenis Smooth Scroll, remove the Lenis initialization script from your Webflow custom code. If the Lenis library is no longer used elsewhere, remove its library import as well. Publish your website to restore the default browser scrolling behavior.

7. Auto-Changing Tabs with Progress Animation

This template uses GSAP to create interactive tabs with automatic content switching, smooth fade transitions, and animated progress bars.

How to Customize:

Tab Buttons: Use the .collection-v2-tab-btn class for each tab button.
Tab Content: Use the .collection-v2-tab-content class for the corresponding content panels. Keep the tab buttons and content panels in the same order.
Active Tab: The .collection-v2-tab-btn-active class identifies the currently active tab.
Progress Bar: Use .collection-v2-tab-progress inside each tab button to display its animated progress indicator.
Autoplay Speed: Change the delay value in the script to adjust how long each tab stays active. The default is 3000 milliseconds (3 seconds).
Animation: Adjust the duration value in the GSAP animation to control the content fade-in speed.
Viewport Behavior: Autoplay starts when the tab section enters the viewport and pauses when it leaves the viewport.

Important Notes:

Include the GSAP library before this script.
Make sure each tab button has a matching content panel in the same order.
Active Tab: The .collection-v2-tab-btn-active class identifies the currently active tab.
Keep the required class names unchanged unless you also update them in the script.
Clicking a tab manually switches to that tab and restarts the autoplay sequence.

Remove Auto-Changing Tabs

To disable autoplay, remove the tab animation script from your Webflow custom code. The tabs will no longer switch automatically.

8. Responsive Expandable Items with Hover Animation

This template uses GSAP to create interactive expandable items with smooth width transitions. When users hover over an item, it expands to fill the available space while the other items collapse to their original heading widths.

How to Customize:

Main Wrapper: Use .why-choose-v3-items for the container holding all items.
Items: Use .why-choose-v3-item for each expandable item.
Heading Toggle: Use .why-choose-v3-head-toggle for the heading area that collapses when its item becomes active.
Content Body: Use .why-choose-v3-toggle-body for the content revealed inside the expanded item.
Active State: The .active class is automatically added to the currently expanded item.
Animation Speed: Adjust ITEM_DURATION, HEAD_DURATION, and BODY_DURATION to control the animation speed of the items, headings, and content.
Animation Easing: Customize ITEM_EASE, HEAD_EASE, and BODY_EASE to change the animation feel.
Responsive Behavior: The hover animation is enabled on screens 992px and wider. Below this breakpoint, the script removes its animation styles and hover events so the layout can use its default responsive styling.

Important Notes:

Include the GSAP library before this script.
Keep the required class names unchanged unless you also update them in the script.
Set the CSS width of each .why-choose-v3-head-toggle to control the collapsed width of its item.
The first item is expanded by default on desktop.
This interaction uses hover, so ensure the content remains accessible on touch devices through the default mobile layout.
The script recalculates item widths when the browser is resized.

Remove Expandable Hover Animation

To disable the hover animation, remove the GSAP script responsible for the expandable items from your Webflow custom code. Publish your website to apply the changes.

9. Interactive Brand Collection Slider

This template uses GSAP to create an interactive brand collection slider. Clicking a brand name smoothly moves the collection items vertically to display the selected item as the active slide.

How to Customize:

Brand Names: Use .brands-collection-name for each clickable brand name.
Collection Items: Use .brands-collection-item for each corresponding content item. Keep the items in the same order as the brand names.
Slider Wrapper: Use .brands-collection-item-truck as the container for all collection items.
Active Brand: The selected brand name automatically becomes fully visible, while inactive names appear with reduced opacity.
Animation Speed: Adjust the duration value in the GSAP animations to control how quickly the items move between slides.
Animation Easing: Change the ease value to customize the movement style.
Item Spacing: The slider automatically calculates item height and container gap to determine the vertical movement distance.
Responsive Behavior: Item positions are recalculated automatically when the browser window is resized.

Important Notes:

Include the GSAP library before this script.
Make sure the number and order of brand names match the collection items.
Keep the required class names unchanged unless you also update them in the script.
Users cannot switch to another item while an animation is in progress.
The first collection item is active by default.
Ensure the collection wrapper and items are styled correctly in Webflow Designer for the slider to display as intended.

Remove Brand Collection Slider

To disable the slider animation, remove the GSAP script responsible for the brand collection slider from your Webflow custom code. Publish your website to apply the changes.

10. Still Confused?

If you still have any confusion or need clarification on anything, feel free to reach out to us directly. You can contact us via email at bidbat.com@gmail.com. We’re happy to help!