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.

Anyway you could create this tutorial?! This is exactly what I have been looking for!!! Thank you soooo much!!!

Welcome to the community @Honma_Golf!

Are you having trouble with any of the steps above? I’d recommend trying to follow along and let me know if you get stuck on any of the steps—I’d be happy to clarify as needed.

That said, I’d actually recommend hosting your Landing Pages on Webflow instead as you’ll get less bloat, faster loading times, and you can take advantage of the immediate publishing. If you opt to use Shopify’s ecosystem, you’ll need to export your project and add/update lots of things within Shopify each time you want to create a new page or update an existing one.

I am going to give it a try now! Am I able to host on Webflow but still use my same shopify domain? I want everything to live within our existing domain. Thanks so much for your assistance. Do you know if Udesy would help with this?

You’d want to host it on a subdomain (landing.yourdomain.com for example) so that it shares the same root URL but doesn’t interfere with your main Shopify site. If you run into issues with that there should be some threads around here in the forum that cover adding it to a project—however keep in mind it requires a Site plan.

Udesy is a good tool to convert entire projects into Shopify templates, although it still requires a bunch of extra work in the code to get Page Sections and stuff working as expected.

Hello, this is the best discussion I have found to maybe help with my situation. Please excuse me I am a newbie, I do have some experience with code but no much at all, just enough to create a custom page on Shopify using the homepage assets and creating an alternate-page.

Currently using Shopify and as my knowledge grows the more it is limiting. Found Webflow and plan to use it exclusively in the future for entire sites. Now I am working on a clients site that I will eventually completely redo on Webflow, but for now I would like to make a landing page for their about us page that is more of a blog, laid out like this- https://www.patagonia.com/stories/
Can Webflow export code to a custom landing page in Shopify, that links to blogs and other pages created in Shopify?

Thank you all in advance. Sorry if this sounds confusing.

Welcome to the community @goodWRLD!

You can definitely export the project and integrate the code within Shopify as I outlined in the steps above, however keep in mind that this content export will only contain static content (meaning you can’t utilize the Webflow CMS).

To make sure the links are setup correctly, you’d either add these to your elements in the Designer before exporting, or you could update the code that’s generated after the fact—but all changes after the export would need to be either made in Webflow and re-exported (requiring the code in Shopify to be updated as well) or updated manually within the code in Shopify without the help of the Webflow interface.

That said, for the price there are definitely page builder Shopify App alternatives that I’d look into that will give you much more design flexibility with a lot less headache:



I doubt any of these have advanced animation capabilities, although they’d allow for much more streamlined content updates.

More traditional landing pages that are used to tailor content based on marketing campaigns are easier to accomplish by linking up a custom subdomain and hosting them on Webflow (as I mentioned above).

In my opinion, for the work it takes to merge a custom Webflow page within a Shopify site, it’s not really worth it.

Thanks Mike for your help. I kinda really needed to hear someone tell me not to. It is only for one client and I just want to make it as easiest to upload new content as possible. But am completely obsessed with WF.

Do you have any experience with any of those suggestions? At least ones that are gonna get me closer to that Patagonia reference?

No problem, glad I could provide some insight!

I hear you on the obsession with Webflow, I definitely try to get as many of clients onto the platform as possible (as long as it’s the right fit for their business needs) but Shopify is my go-to for ecommerce builds that require more functionality.

Do you have any experience with any of those suggestions? At least ones that are gonna get me closer to that Patagonia reference?

Honestly I haven’t tried any of the suggestions but I’ve heard the most about Shogun—probably because I feel like they were one of the original page builders for the platform. It’s the most expensive, but each of them has a free trial (with LayoutHub even offering a free plan) so I’d recommend giving them a shot and seeing the limitations of each.

Personally I have no problem jumping into the code, so I opt to just develop things from scratch and rely on their Page Section functionality to give my clients control over various pieces of content.

Hey Mike one more question if you don’t mind.
What about creating a landing page and making it a shopify template through Udesy? Already having limitations through Shogun. Just need a sweet looking landing page that can link to some blogs and a few static pages. Man if Shopify bought WF that would epic!

I only tried out the Udesy converter once, but it’s not possible to convert a single page with it—it converts the entire exported project into a theme that you apply sitewide. You can definitely create cool themes with it that “work” on Shopify, but it will probably need a fair bit of tweaking to really get the most out of the platform features.

@mikeyevin any tips for creating a shopify theme from scratch?

I did some research and I’m going to start with the debut shopify theme and delete/adjust what is needed.

Creating a Shopify theme from scratch is a bit outside of my comfort zone, so I’d probably follow a similar path that you’re thinking about. I could probably make it happen, but I tend to lean more towards design as opposed to development and typically try to avoid writing JS from scratch if I can help it.

There are a huge selection of great themes, and it’s fairly easy to find something that has the base functionality you’re looking for, then it’s just a matter of adjusting sitewide elements and creating new sections/templates as needed.