Entiendo perfectamente tu frustración, y te pido disculpas. Dejemos de lado las optimizaciones y los métodos complejos.
Vamos a usar la solución más simple y directa posible, que no depende de nada más que del scroll de la página.
Este método hace dos cosas:
1. **JavaScript:** Vigila si la página está desplazada hacia abajo. Si lo está, añade una clase global a la página.
2. **CSS:** Usa esa clase global para cambiar el estilo de tu barra.
Este enfoque es a prueba de fallos porque es la comprobación más básica que existe y no interfiere con otros scripts.
-----
### Solución Directa y Final
Por favor, **borra cualquier script anterior** que te haya dado y pega este único bloque de código en la configuración de tu página, en la sección de **Custom Code** \> **Before `
` tag**.
```html
```
Esto funcionará.
Building a Foundational Site for REcreate [Charlotte's Web]
New brand website, Charlotte's Web, http://charlottesweb.com/
Brand
Charlotte's Web Holdings, Inc. introduced the REcreate product line to target the sports market and appeal to Millennial and Gen Z consumers, focusing on lifestyle and botanical wellness under the "Charlotte's Web™ Performance" brand. As a leader in hemp-derived CBD products, the company is known for its high-CBD, low-THC proprietary hemp strain, which gained attention for its benefits in the case of Charlotte Figi. Founded by the Stanley Brothers, Charlotte's Web is a Certified B Corporation, highlighting its commitment to social and environmental standards. The company offers a variety of products, including oils, gummies, capsules, and topicals, while ensuring quality, safety, and transparency.
About our collaboration
Our agency partnered with REcreate (later Charlotte's Web) to develop a sophisticated and user-centric headless eCommerce platform. The core objective was to create a flexible, scalable, and visually appealing online store capable of showcasing a diverse range of CBD and wellness products. We leveraged the power of Prismic Headless CMS to manage all content, ensuring seamless updates and robust performance. This allowed for a highly dynamic front-end experience while providing the client with complete control over their product catalog, marketing content, and overall site structure. The result is a modern, intuitive, and conversion-optimized platform that reflects the brand's commitment to natural wellness and scientific efficacy.
Challenge
Recreate, an emerging leader in the wellness sector, required a digital commerce platform that could scale at the pace of their growth while empowering marketing stakeholders. Their challenge was to move beyond a monolithic architecture that hindered go-to-market speed and create a dynamic, content-driven customer journey. The objective was to architect a future-ready, headless solution that would seamlessly integrate content and commerce, enabling operational agility and a superior brand experience.
Outcomes
We delivered a comprehensive digital transformation of Recreate's eCommerce ecosystem by implementing a composable architecture powered by Prismic's headless CMS. This solution decoupled the front-end presentation layer from back-end systems, creating significant value by placing content strategy and execution directly into the hands of the marketing team. The implementation of a dynamic, component-based system resulted in a high-performance, conversion-optimized platform that dramatically reduced the time-to-market for new campaigns and established a scalable foundation for omnichannel growth.
Here’s the homepage we implemented for wellness brand REcreate, using Prismic as the headless CMS. We structured the page using dynamic Slices, allowing the client to easily update the hero, featured products, and the "Shop by Your Need" section without any code. This approach gives their marketing team full content control while maintaining a lightning-fast and fully custom front-end experience.
Bringing these clean product comparison cards to life on a headless stack. Each card is a reusable front-end component that pulls data directly from a 'Product' custom type we configured in Prismic. We set up specific fields for key specs like CBD/THC content and unique features, which are fetched via API. This allows for effortless updates and the creation of new curated collection pages on the fly.
This is our implementation of the product listing page (PLP), fully powered by Prismic. We integrated the front-end with Prismic's API to pull the product catalog and built out the filtering logic. Product benefits and categories are managed as a flexible taxonomy in the CMS, allowing for dynamic and accurate filtering. We also implemented data fields for promotional tags like 'New' and 'Bestseller,' giving the client easy control over product merchandising.
To optimize the path to purchase, the Product Detail Page was strategically engineered around a core principle of conversion-centric design. We implemented a clean information architecture that elevated critical purchase drivers—such as the product gallery and dynamic attributes like size and dosage—to prime engagement zones, thereby accelerating the customer's decision-making process. Social proof mechanisms were seamlessly integrated to build consumer trust and validate choice, while the entire user journey was meticulously mapped to create a frictionless funnel toward the primary call-to-action. Finally, an integrated product discovery component was leveraged to increase average order value and deepen user engagement with the broader product ecosystem.
Wrap up
The strategic implementation of a headless commerce platform provided Recreate with a critical competitive advantage, enabling the synergy of a rich brand narrative with a seamless transactional experience. This newfound agility not only enhanced the customer journey but also directly contributed to increased brand equity, positioning the company as a market leader and a valuable asset. The project serves as a clear blueprint for how a forward-thinking digital architecture can accelerate growth and drive significant enterprise value, culminating in the brand's successful transformation into what is now Charlotte's Web.
Keep| reading, browsing, paging
5.0 Google
Our case studies unite high-performance design and tangible results.
"The team delivered the design prototypes in Figma and promptly applied the suggested changes. They also impressed the client with their communication skills (...)"
Psychologist Keith Gibson founded CE Learning Systems in 1999, successfully growing the parent company of CE-Go into a national leader in professional development services.
A pioneering force in blockchain technology. $200 million Series B funding. Delivering privacy and scalability for decentralized apps.
Trusted by
Dwellito
Revolutionizing real estate transactions with innovative technology, focusing on the growing prefab home market.
Trusted by
Charlotte's Web
A pioneering force in the CBD wellness industry, boasting a market-leading position and generating annual revenue exceeding $60M.
Trusted by
Immerse Education
Over 2,500 programs delivered to students from 125+ countries, recently recognized on the shortlist for the BETA Best Innovation Award 2023.
Trusted by
Dronisos
Global leader in drone entertainment, mesmerizing people with synchronized drone light shows at major events worldwide (e.g. Super Bowl or Winter Olympics).
Trusted by
Ayusa
Promoting global understanding through cultural exchange programs, hosting over 2,000 international students annually.
atQuo, registered as Quo Agency, Inc. in New York, is a multifaceted company that blends the expertise of a creative agency with the efficiency of a tech-driven professional services firm. The company is structured to help brands scale their creative output through a suite of three distinct products: Relia, Kit, and Agency. Our model is designed to eliminate wasted time at every stage of your growth. Start fast by launching a defined project in minutes with a fixed-price Kit, which lets you bypass the entire proposal and negotiation process. As your needs become more frequent, build momentum with a flexible Relia subscription to get an on-demand creative team for all day-to-day tasks without the repetitive hiring loop. Finally, for your most mission-critical initiatives, you can immediately activate our strategic Agency partner, skipping the months-long search for a vetted, top-tier firm.
