How we built the Hemp shoes demo website with WoodMart
In this article, we’ll take a look at the Hemp Shoes demo. To see the final result and how everything comes together, visit: https://woodmart.xtemos.com/demo-hemp-shoes/demo/hemp-shoes/
Discover WoodMart’s Hemp Shoes Demo: Sustainable Ecommerce Design. This demo can be imported with a single click and offers complete design adaptability for eco-friendly and sustainable product businesses.
Every element is fully customizable, making it easy to align with your sustainable brand identity and business goals. The Hemp Shoes demo demonstrates how to effectively communicate product benefits, environmental impact, and brand values while maintaining a clean, conversion-focused design.
Website Structure
After importing, each element — from content and images to formatting and appearance — can be adjusted per your needs. The main menu consists of the following items:
- Home
- Nature
- Materials
- Our Team
- Testimonials
- Contact Us
The menu in the header moves us around the main page, this was created using the Navigation anchor element and the enabled anchor option in the menu item settings.
Then you need to set the link for this item to be like this: http://your_site.com/home_page/#anchor_id where anchor_id will be the ID of the Container on your home page.
Header builder
The demo uses a simple header in which such elements as Logo, main menu, Button, Cart are defined.
Only the Main Header is used. The top bar and header bottom are hidden for desktop and mobile.
Exploring The Home Page
The demo uses Full width container. Full width is the standard container width of 1222px. It is set by default.
The first section uses two Image gallery elements that are synchronized with each other.
Synchronization: this option gives the ability to synchronize 2 carousels (parent and child), thus when you scroll the parent category, the child category scrolls as well.
In order to adjust such work, you need 2 image carousels (first as a parent, second as a child), child category should have the same ID as the parent carousel has.
The section below uses Parallax on scroll functionality:
The video section uses a Video element, background image, and section title and a text block.
In the settings of our Video element, there is a Play button design where you can change the size and after update 8.3 change the text.
The ‘Choose your pair of shoes’ section uses synchronization functionality, the same as the first section.
Before the last section uses a Marquee element.
Speed, direction, and other settings can be changed in the element’s own settings.
Conclusion
The WoodMart Hemp Shoes demo perfectly illustrates how sustainable businesses can create compelling, conversion-focused eCommerce experiences. From the synchronized image galleries and immersive parallax effects to the streamlined anchor navigation and dynamic marquee elements.
We’d love to hear from you! What aspects of the Hemp Shoes demo inspired you most? Are you planning to incorporate sustainable design elements or any of these advanced features in your own WoodMart project? Share your thoughts, questions, or experiences in the comments below — your feedback helps us create even better demos and tutorials for the WoodMart community.