SFCC B2B Webflow Integration and CSS Conflict Resolution
We are seeking an experienced developer to assist with integrating pages designed in Webflow into the Salesforce Commerce Cloud (SFCC) B2B edition.
Please have a look at this sandbox page which is a current MVP we're working on:
aafy-004.dx.commercecloud.salesforce.com/on/demandware.store/Sites-DE-Site/de_DE/ExternalContent-Landingpage
The webflow page HTML is fetched via an http get request. This is loaded between the SFCC header and footer in the SFCC environment. We notice a significant amount of webflow CSS bleeding into the SFCC CSS.
We tried working around that CSS bleed by
- wrapping all webflow content into a parent div
div id="webflow-master-container"
- creating additional CSS loaded before the default webflow CSS via
raw.githubusercontent.com/sindbod/wflpcss/refs/heads/main/styles.css
Despite these changes, still the default webflow CSS loaded via
cdn.prod.website-files.com/6672d5c2172cfe77e4ccdeb5/css/ecomtriumph.webflow.3d5c4def5.css
gets applied to the webflow content and the SFCC CSS is negatively effected. For example you can hover over the main menu items and will see that it's all appearing in black, same as the footer. Please check the header and footer on uk.triumph.com to see what it should actually look like.
Your task is to suggest a robust and elegant solution to this problem and indicate the detailed steps we need to take to prevent the CSS from webflow from bleeding into the SFCC CSS.
The ideal candidate will have a strong understanding of both platforms and proven experience in web integration. You will work closely with our design and development teams to ensure seamless functionality and aesthetics. If you're passionate about creating exceptional user experiences and have the expertise to bridge Webflow and SFCC, we would love to hear from you!
Job Qualifications
- The ideal candidate will have a strong understanding of both platforms and proven experience in web integration
Job Benefits
- wrapping all webflow content into a parent div