ロゴ

ウェブフローでデジタル製品を販売する方法Shopify

Webflow is the new up-and-coming no-code web design platform. It’s loved by thousands around the world. In 2022, Webflow is used by over half a million people.

In this guide, I will show you the best method to sell digital products on Webflow without any limitations you find with the Webflow platform. Unfortunately, Webflow doesn’t have great in-built tools for protecting your digital products, but this method I will show you below will solve that.

How does this method work?

This will work by using Webflow as your frontend (visual side) of the website and then using Shopify for your backend eCommerce solution.

Reasons why we’re using Shopify integrated with Webflow

Shopify is the leading platform for eCommerce for many reasons. It’s by far the best method to sell products online, even if you host them on a different platform such as Webflow. To name a few reasons why we are using Shopify integrated into Webflow:

  • Great support for digital products – much more customization
  • More protection features for digital products
  • グローバル税務ルール
  • 国際的な価格設定と販売
  • Secure, responsive checkout experience
  • Unlimited products
  • 100+ payment gateways accepted
  • Easily integrate 1000’s of apps for all needs
  • Shopify has a brilliant mobile app to track sales and analytics for orders. It dings every time you get an order ;).

Webflow’s system

Webflow is still progressing, and its support for digital products isn’t that great at the moment. It features the most basic method of selling digital products by just allowing you to add a download URL from Google Drive or similar. Nothing else.

The method we are showing you below will provide you with all the protection features, delivery options and much more for your digital products.

Plus, it will provide you with all of Shopify’s leading features for payments around the world. There is no doubt they’ve had the experience and have the best eCommerce abilities, such as international pricing, thousands of integrations, analytics and more.

Why is our method better than Webflow’s digital products?

Webflow is great for most things, but one thing they are not great at is digital products and partly eCommerce. The platform is still progressing.

You can build wonderful websites on it, but for a top-level eCommerce digital download system, I would integrate Shopify.

So this method we are teaching you today provides you with the best features for eCommerce and digital products on the market.

Webflow’s method:

  • Cannot upload files, can only add a download URL from somewhere else
  • 製品に添付するデジタルファイルは1つのみ
  • 電子メールによるトラッキングがない
  • アップグレードオプションなし
  • No file protection features
  • No fraud protection
  • ダウンロードの送信に自分の電子メールを使用することはできません。
  • メールやブランディングのカスタマイズ機能がない

Webflow’s digital product section:

webflow attach digital products

Our method:

  • プランのストレージ容量内であれば、どのファイルサイズでも販売可能
  • Attach as many digital files as you want to your products
  • ご希望のファイル形式を販売
  • ダウンロードリンクは永久に持続させることができます。
  • Eメールトラッキング付き(スケールプラン)
  • アップグレードオプション、制限なし
  • 多くのファイル保護機能
  • 自分のEメールを使ってダウンロードを送信(プロプラン)
  • 完全にカスタマイズ可能なEメールテンプレートとブランディング
  • 無料プランあり

How do digital products get delivered?

Webflow’s method

Customers will be able to access downloads via:

  • Email after the order is placed
  • On the Thank You page

Our method

Customers will be able to access downloads via:

  • Email after the order is placed
  • On the Thank You page
  • Customer account

何が必要ですか?

The method we are using in this tutorial is by using WebFlow as the main site and then using Shopify as the backend eCommerce. Using this method, we will integrate Shopify products onto your pages using the in-built tools.

  • Webflow website (for the website frontend)
  • Shopify $5 Starter plan (eコマースと製品バックエンド用)
    • をインストールします。購入ボタン「アプリをインストールする(無料)
    • Install the “Fileflare” digital product delivery app (free)

Shopify is the leading eCommerce solution for online stores, and it works great alongside WebFlow. Shopify has decades of data and experience with checkouts, including a vast app store with incredible apps that you can integrate. This is what WebFlow is missing, unfortunately, so this tutorial will give you the best of both worlds.

Does Shopify work with WebFlow?

Yes! WebFlow has added integration for Shopify products. This allows you to embed and import your Shopify products directly onto your WebFlow pages with ease.

Using this method, your customers will checkout and pay using Shopify’s system, while WebFlow will be the structure and visuals of your website.

How to sell Digital Downloads on WebFlow

1.会員登録Shopify

What you need to do is sign up for Shopify’s $5 plan. This allows you to use Shopify, but you won’t be able to create a storefront there. You will only be able to use their system, which is all we need.

Once you sign up, follow the steps, and then you will need to select the Start plan, which is $5. It will ask you to enter your card details. Once you have done this, we are ready to proceed.

Install the free apps

次に、以下のアプリをインストールする必要があります。以下の方法でインストールできます:

  1. Shopify ダッシュボードにアクセス
  2. アプリ」>「アプリと販売チャネルの設定」をクリックする。
アプリ」 > 「アプリと販売チャネルの設定」をクリックする。
  1. ストアをカスタマイズする」ボタンをクリックします。
ストアボタンのカスタマイズ
  1. 以下のアプリを検索するか、リンクをクリックしてください。
Install the Buy Button app

Click the green “Add app” button and follow the steps to accept.

buy button shopify app store
Install the Fileflare app

Click the green “Add app” button and follow the steps to accept. When you get to the pricing page, choose a plan 14-day free trial, or click the continue button to use the free plan.

ファイルフレア デジタルダウンロード

2.商品をShopify

  1. Shopify のダッシュボードに戻り、"Products" にアクセスする。
shopify
  1. ここで、「商品を追加する」ボタンをクリックします。すでに商品を作成している場合は、緑色の「商品を追加」ボタンが表示されます。
商品を追加する 緑色のボタン
  1. Now, enter your product details including the name etc.
  2. Shipping"セクションまでスクロールダウンし、"This is a physical product"ボックスのチェックを外します。これにより、デジタル商品であることがシステムに伝わります。これは非常に重要です。
physcial products

デジタルなので、"Track quantity "ボックスのチェックも外しておくといいでしょう。完了したら「保存」をクリックします。

3.デジタル製品をアップロードして添付する

Now, all you need to do is:

  1. Click the “Apps” button on the left of your Shopify dashboard
  2. Fileflare」をクリックします。新しいタブが開きます。
  3. 次に、「資産」ページに移動する。
upload new digital file
  1. 新しいアセットのアップロード」ボタンをクリックして、デジタル製品をアップロードしてください。

次に、そのファイルをShopify に添付する。

  1. アップロードしたデジタルファイル(青い文字)をクリックします。
click the digital product
  1. 検索ボックスにShopify の製品名を入力し、該当するものを選択して「添付」ボタンを押してください。
select the product and attach it

これでデジタルファイルが添付され、武装されたことになります。誰かがこの製品を購入すると、ダウンロードメールが配信されます。

4. Add the products to your Webflow site

Now, here is the fun bit! This is where you are going to add the Shopify products to your Webflow pages. This one is more of a fun step for you to be creative.

  1. Shopify にアクセスし、"Apps" > "Buy Button" をクリックする。
  2. 次に、「購入ボタンを作成する」緑色のボタンをクリックします。
購入ボタンアプリ
  1. 商品購入ボタン」をクリックし、商品を選択して次へ進みます。
商品購入ボタン
  1. さあ、あなたのスタイルに合わせてボタンをカスタマイズしましょう!クリエイティブに、いくつかのオプションを使うことができます。

色、レイアウトスタイル、カート、ボタンボーダー、テキストなどを変更できます。

顧客がボタンをクリックしたら、即座にチェックアウトに誘導したり、商品をカートに入れるだけなど、アクションを自由に変更することができます。

購入ボタン
  1. Once you are done, click the “Next” button in the top-left of the window. If you make any style adjustments, you will need to copy and paste this code again into Webflow.
  2. コードをコピーするよう促されます。コードをコピーする」ボタンをクリックしてください。
コピーコード

Go to your Webflow site

  1. Load up your website editor page in Webflow
  2. Click the “+” icon in the top-left
  3. Scroll down and find the “Embed” option
embed html in webflow
  1. Paste the copied embed code for your Buy Button into the box and place it on your webpage.
  2. Now you can customize the styling and place the button wherever you need to.

Follow this process for all of your products or collections and you will be flying!

完了した!

That’s exactly how you can add your Shopify products to Webflow and also allow digital products using the best protection features on the market for eCommerce.

buy button example on wix

Remember, you still need to finalise some other things, such as your payment gateways and business data in Shopify, because all of your orders will be going through Shopify’s system.

で支払いゲートウェイを設定します。Shopify

Shopify PaymentsとPayPalをゲートウェイとして使用することをお勧めします。ユーザーに2つの選択肢を与えることができますし、PayPalを使う方が安心できる場合もあります。

また、この方法で最高のレートを得ることもできる。Shopify ペイメントは他のゲートウェイと比較して最高の取引コストを持っています。

  1. こちらへShopify
  2. 設定" > "支払い"をクリック
  3. ここでは、Shopify Payments、PayPalまたはあなたが選択した他のゲートウェイを設定することができます。
設定 > 支払い

Fileflareアプリのカスタマイズ

I recommend you go back to the Fileflare app and add some customisations to your digital product experience. You can do a lot of things! You can even prevent customers from sharing products with others.

機能とチュートリアル:

digital products custom

何かお困りのことがありましたら、何でもお気軽にご相談ください!ご予算が限られている場合は、カスタムプランも承ります。

Download email template and styling

The customer will receive a digital download email instantly. You can also show the download links on the checkout Thank You page if you have the Basic plan or higher. You are also able to customize the email templates to suit your brand; this is available on the Growth plan or higher.

メールテンプレート

サンキューページの例

以下は、お客様がサンキューページに到達した後に、ダウンロードリンクがどのように表示されるかの例です。

shopify 、デジタル商品でチェックアウトする際のサンキューページ

概要

デジタル製品は、販売する国によって異なる税金がかかります。デジタル商品の税金については、お住まいの国の法律をご確認ください。ヨーロッパではークラブはークラウドはークラウドはークラウドはークラウドはークラウンはークラウドはークラウチデジタル商品税についての詳細はこちらをご覧ください。