# PageFlyページでZakeke Product Customizerを使用する方法

### 概要

[Zakeke](https://help.pagefly.io/manual/how-to-use-the-zakeke-product-customizer-on-pagefly-pages/) [Shopify](https://help.pagefly.io/manual/how-to-use-the-zakeke-product-customizer-on-pagefly-pages/) - Product Customiser 2D 3D を使用すると、Tシャツ、マグカップ、パーカーからアート、ジュエリー、スマホケースまで、ストア内のあらゆる商品を顧客がパーソナライズし、購入前にどのように見えるかを確認できます。

### 必要条件

* この要素を使用するには、まず Shopify ストアに [Zakeke Shopify アプリ](https://apps.shopify.com/zakeke-interactive-product-designer) をインストールし、そのすべてのオプションを設定する必要があります。ブランドに合わせて [設定を構成](https://zakeke.zendesk.com/hc/en-us/articles/360026668693) する必要があります。詳細については、次のビデオチュートリアルをご確認ください。

{% embed url="<https://youtu.be/D0gcHPqP-Kw>" %}

* また、Shopify ストアに [PageFly](https://pagefly.link/mceUysfc) アプリがインストールされ、有効化されている必要があります。

### PageFly ページで Zakeke 製品カスタマイザーを使用する方法

#### ステップ 1: ボタン要素をドラッグアンドドロップする

ボタン要素を設定する前に、エディターに製品詳細セクションがあることを確認してください。それが完了したら、製品詳細セクションにボタン要素をドラッグアンドドロップします。

![](/files/kEoSiUv85B6dqZYplxXW)

ボタンテキストを追加します。この例では、ボタンテキストに「**今すぐカスタマイズ**」を追加しました。

![](/files/l58M2ZeNAZ8fWNpatBgq)

ボタン要素の設定の詳細については、[この記事](https://help.pagefly.io/manual/button-element/) をご確認ください。

#### ステップ 2: ボタンに URL バーを追加する

1. **General** タブに移動 > ACTION パラメータまでスクロールします。
2. **Click action** オプションで、**Go to URL** を選択 > **Select URL** ボタンをクリックします。![](/files/uDQd0ZeX2pmuwM7Hai9h)
3. URL ドロップダウンメニューで / を選択 > URL バーにコードを貼り付けます。

/apps/zakeke?pid={{product.id}}

4. **Select** ボタンをクリックします。![](/files/ixMvqSfuBYO31MgoamnA)

#### ステップ 3: クラスを更新し、Javascript コードを追加する

1. ​​**General** タブで、**ATTRIBUTES** パラメータに移動 > **HTML class** に移動 >「​​**zakeke-button**」を追加します。

![](/files/TBDBlwFrMbf0xSiBi6IZ)

2. エディターの左下サイドバーに移動 > **Add custom Code** > Custom JavaScript タブに [Javascript コード](https://pastebin.pl/view/479e0314) を貼り付けます。
3. **Save** をクリックします。![](/files/zXGQ0OyYHNrcqunwfRYU)

#### ステップ 4: Zakeke ボタンのスタイルをカスタマイズする

**Styling** タブに切り替えて、コンテンツカラー、タイポグラフィ、背景色などのボタンデザインをカスタマイズします。

![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXdxudJ5MUsxPnrPhb1o9DAZeNFXK28E1i1wsLKSLpmTNU5O9FcscQgYRLn-1jX7pLean9hKas9XZrjRGv-jbM6yco8gKLZtpk8-3lXAD7-u5NA5hfnubSXtBdH_ydmO-2VH4XsbhhdUhzMWOIdjkeysJd-P3ineLCq_loWJfXPbg.png)

すべて設定が完了したら、**Save & publish** を選択し、ライブビューで確認します。訪問者が Zakeke カスタマイズボタンをクリックすると、Zakeke のカスタマイズページに移動します。

![](/files/xoQRKCHVdS3MnvfNnHyb)

### Zakeke の設定方法

Shopify 管理画面から Apps をクリック > Zakeke Product Customiser 2D 3D を選択します。

![](/files/AlQrilD6KOwH44fU9xCe)

カスタマイズ可能な Zakeke Product Customiser 2D 3D 製品の作成に関する詳細については、[こちらのガイドライン](https://zakeke.zendesk.com/hc/en-us/articles/360026668693-Create-a-customizable-product) をご確認ください。

### ヒントとベストプラクティス

* PageFly 内で Zakeke 製品カスタマイザーボタンを設計する際は、直感的で使いやすいインターフェースを優先してください。ユーザーはカスタマイズオプションとそれらの操作方法を容易に理解できる必要があります。
* 特に複雑なオプションの場合、カスタマイズプロセスを通じてユーザーをガイドするために、カスタマイザー要素内に簡単な指示やツールチップを含めることを検討してください。
* Zakeke 製品カスタマイザー要素が、PageFly の全体的なデザインとブランドの美しさに視覚的にシームレスに統合されるようにしてください。

### よくある質問

**1. Zakeke Shopify アプリとは何ですか?**

Zakeke Shopify は、ビジュアルカスタマイザーと 3D 製品コンフィギュレーターを提供することで、売上を伸ばし顧客維持率を高めるツールをサポートします。販売者は、Zakeke Shopify と好みのプリントオンデマンド (POD) プラットフォームを統合し、店内デザインオプションを提供できます。

**2. Zakeke Shopify はいつ作成されましたか?**

Zakeke は 2017 年に作成されました。

**3. Zakeke Shopify の料金はいくらですか?**

月額サブスクリプション料金は 19.90 ドルです。

**3. Zakeke Shopify を PageFly エディターで使用できますか?**

はい、使用できます。

**4. Zakeke Shopify プランには何が含まれていますか?**

Zakeke Shopify の Starter プランには、最大 25 件の公開製品、2D ビジュアルカスタマイザー、3D コンフィギュレーター、3D/AR ビューアー、バーチャルトライオン、および「Powered by Zakeke」ラベル付きで生成された無制限のビューが含まれています。

**5. Zakeke Shopify のパートナーは誰ですか?**

Printful、CustomCat、Zapier、Order Desk、Shopney、Printeers

### その他のリソース

* [PageFly ページを Shopify メニューナビゲーションに公開する方法](https://help.pagefly.io/manual/publish-page-to-shopify-menu-navigation/)
* [PageFly で固定セクションを作成する](https://help.pagefly.io/manual/make-a-sticky-section/)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.pagefly.io/pagefly-help-center-japanese/pjito/optimization/how-to-use-the-zakeke-product-customizer-on-pagefly-pages.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.