Editing Fullscreen Menu Items.
1. Double-click on the component located on the right containing menu items.
2. Once inside the component, select each menu item by clicking on it, and adjust its text, link and photo using the "Properties" panel visible on the right.
3. If you don't need any of the items, simply select and delete them. If you'd like to add more items, just copy and paste the last one, and adjust its properties accordingly.
Changing the Logo in the Menu.
1. Double-click on the component located on the right containing the logo.
2. Once inside the component, select each version of the logo by clicking on it, and set its image source using the "Properties" panel visible on the right. Use images with transparent background.
Changing the Logo in the Footer.
1. Double-click on the component located on the right containing the logo.
2. Once inside the component, select each version of the logo by clicking on it, and set its image source using the "Properties" panel visible on the right. Use images with transparent background.
Quick Start Guide
Using Components
1. We use Components on the website - ready-made building blocks. In the Navigator panel and on the canvas, components show up in green.
2. Most of the time, you don’t need to open a component to edit it — just use the Properties panel on the right when it’s selected.
3. Keep in mind that changes in the Properties panel apply only to that specific instance. You can reuse the same component on other pages and set different properties each time.
To keep the same settings, just copy the component where you’ve already set everything and paste it on another page — all properties will carry over.
Removing the Cart Button From the Menu
1. Double-click on the "Menu" component to go inside it.
2. Using Navigator panel on the left, find and select the "Wrap Cart" element, and then delete it.
3. To exit a component after you’re done, click the green button with the component’s name at the top of the screen.
Set The Page To Open In Dark Mode By Default
All pages open in Light Mode by default. If you want a page to open in Dark Mode, you need to add the Body Dark Mode class to the Body element.
1. Select the Body element in the Navigator panel.
3. In the style selector field on the right, start typing Body Dark. The Body Dark Mode class should appear as a suggestion—click it.
Editing Template Colors Through the Variables Panel
1. While in the Designer view, click the Variables button on the left.
2. Choose the Main Colors group to edit all global template colors.
3. On the right panel, click the small color square beside the color name you want to edit, then set the desired value.
How to Edit GSAP Animations
GSAP animated numbers
1. Its name is in the very first line of the script.
2. It has to be placed in the "Before </body> tag" window in Site Settings or Page settings. To find it, Click on the Webflow icon in the top left corner, and then choose "Site settings".
3. In the left sidebar, choose Custom code.
4. The code is in the Footer Code section on the right.
5. The script targets all elements with the class .animated-number, and animates the text from 0 to chosen number.
6. The script reads attributes from custom properties of animated texts; you don't need to edit them, as they're all bound to component properties, and that's where you can adjust each animation.
7. Removal: If you don't use any components with animated numbers on the website, you don't need the script and it can be removed; to do that, delete the whole script, including its opening <script> and closing </script> tags from the "Footer code" section in Custom code tab of the Site Settings.
GSAP animated stat bars
1. Its name is in the very first line of the script.
2. It has to be placed in the "Before </body> tag" window in Site Settings or Page settings. To find it, Click on the Webflow icon in the top left corner, and then choose "Site settings".
3. In the left sidebar, choose Custom code.
4. The code is in the Footer Code section on the right.
5. The script targets all elements with the class .stat-bar, and animates the bar from 0% to chosen value.
6. The script reads attributes from custom properties; you don't need to edit them, as they're all bound to component properties, and that's where you can adjust each animation.
5. Removal: If you don't use any GSAP Slider components on the website, you don't need the script and it can be removed; to do that, delete the whole script, including its opening <script> and closing </script> tags from the "Footer code" section in Custom code tab of the Site Settings.
GSAP Sliders
1. Its name is in the very first line of the script.
2. It has to be placed in the "Before </body> tag" window in Site Settings or Page settings. To find it, Click on the Webflow icon in the top left corner, and then choose "Site settings".
3. In the left sidebar, choose Custom code.
4. The code is in the Footer Code section on the right.
5. The script targets all elements with the gsapslider attribute.
6. The script reads attributes from custom properties; you don't need to edit them, as they're all bound to component properties, and that's where you can adjust each animation.
5. Removal: If you don't use any GSAP Slider components on a page, you don't need the script and it can be removed; to do that, delete the whole script, including its opening <script> and closing </script> tags from the "Footer code" section in Custom code tab of the Site Settings.