Streaming live at 10am (PST)

Webflow to Shopify Landing Page Integration

Hello,

I have a Shopify website and have worked on a brand landing page on Webflow and want to know how to add the code to shopify so it shows my landing page. Any help + tips are welcome, total newbie.

1 Like

I actually just played around with this myself for a client and was able to get it working with a bit of setup. Just as a heads up, you should be comfortable working with code and somewhat familiar with the Shopify ecosystem.

Here’s a rough outline of what I did:

  • After you’re happy with your Webflow page, export the project
  • Create a new Shopify theme template (aka layout) and strip out any content you don’t want on your landing page (this includes things like your default Shopify header/footer, and any unnecessary code/scripts that may create unwanted bloat), include any necessary head code from your Webflow markup, and make sure you leave both {{ content_for_header }} and {{ content_for_layout }} as they are required to render the page within Shopify
  • Add both the CSS and JS files from your Webflow export to your Shopify assets panel and reference them within your new layout
  • Make a new page template and replace the code with the HTML from your export, making sure to take only what’s inside your tags (depending on your theme you may need to modify how/where the page content is injected into your new layout file)
  • Reference the new layout file by including {% layout ‘theme.your-new-layout’ %} at the very top of your new page template
  • Create a new page, fill out the necessary meta information, and assign it the page template you created (the one with your Webflow site markup)
  • Your landing page should now be available at yoursite.com/pages/your-landing-page-slug, but I’d recommend adding a redirect so you have a nicer end URL (ex: yoursite.com/landing-page or landing-page.yoursite.com)

I may be persuaded to make a proper tutorial if there’s enough demand, but that should be a good outline to get you going.