見出し画像

【Shopify】【Infinite Options】アプリの導入方法とか設置とかかゆいところに手が届くように

アプロ総研

こんにちは。大野です。

前回の悩みからの解決法のアプリの紹介です。

商品オプションを増やすアプリとして、「Infinite Options」というのがあるので今回はこちらの内容をまとめます。

Infinite Options
https://apps.shopify.com/custom-options?locale=ja
トライアル期間：14日間
月額費用：$7.99〜

レビューも多いので人気のアプリなんでしょう。

たしかに、かゆいところに手が届くな〜と思ったアプリです。

ざっくりいうと
・オプションを表示する条件を指定できる
・メールにも内容を表示できる
・アラート文の日本語化ができる（要コード編集）
このあたりに手が届きます。

1. 「Infinite Options」の導入手順

「アプリ管理」から「Shopify アプリストアに行く」

画像1

アプリストアに飛ばされますのでInfinite Optionsといれて検索をする

画像2

検索するとそれらしいものがいっぱい出てきて目移りしますがいったん下記のアイコンのページ詳細に行き、インストールします

画像3

2.「Infinite Options」の設定

①「Option Sets」のタブから②「option set」をクリックし、新たにオプションを設定しましょう

画像4

③の箇所は管理画面内で管理するために設定するタイトルなのでそれが分かるような表記にします
④の箇所でオプションを表示する商品の条件を指定します
・Tag
・Vendor
・Type
・URL
・Handle
・All Product
上記6つを設定でき、「AND（かつ）」「OR（または）」で細かく設定が可能です

画像5

⑤Label: 商品ページのオプション上部に表示される項目
⑥Field Name: メールへの表示に必要な場合、この箇所は英語にしないと動作しません
⑦Input Type: 入力欄の種類を決めます。テキストエリアとかチェックボックス、カラースウォッチも表示できます
⑧Option Value: ⑦で選択した項目に応じて可変する箇所です。
キャプチャで設定しているradioを選択しているため、選択肢の項目を入れていきます
⑨Advance Options: ⑦で選択する項目によって内容は可変しますが
・class名
・必須にするか
・文字数制限　などが設定できます
⑩Conditional Logic: 項目を表示または非表示にする条件を設定できます
キャプチャの設定では、名入れを希望すると入れたときのみテキストエリアを出すようにしています

画像6

下記、商品ページへの表示です

画像7

3. かゆいところ云々のおはなし

(1) メールに項目の表示 

{% comment %}
以下、オプション項目名入れの表示
{% endcomment %}
    {% if line.properties.naire != blank %}
        <span>名入れ希望：{{ line.properties.naire }}</span><br/>
    {% endif %}
    {% if line.properties.moji != blank %}
        <span>{{ line.properties.moji }}</span><br/>
    {% endif %}


line.properties. のあとに、⑥Field Nameで設定した文字列を入れます

(2) アラート文の日本語化

必須の入力欄を入れずにカートに入れたり購入を進めようとした場合、画面にエラー表示が出ますがそれの日本語化の対応です（下部のような）

画像8

これはそれぞれ項目ごとに追記する箇所が違うようなので開発元のコードを参照ください

項目選択肢ごとに最適なコードを /sections/product-template.liquid の一番下に貼り付け、適宜日本語化します

※こちらはコードに改変を加えるのでテーマのアップデートは手動で行うようにしましょう

(3)CSSの追加で装飾可能

「Settings」の「Custom CSS」の箇所にCSSを足すことで独自のスタイルにも変更可能です

画像9

最後に

コードの変更、表示確認、動作確認は必ず行いましょう！

他にも目移りするアプリは多々出てきますので、比較記事などまとめたいと思っています。

アプロ総研では『はじめてEC』というサービスを運営しています。
EC初心者に向けて、初期構築を弊社が行いすぐに販売可能なサイトをお作りいたします。月々のサポートやウェビナーも開催されますのでEC初心者にも安心してご利用いただけます。

ご契約やサービス内容を詳しく知りたい場合は以下のお問合せページよりご連絡をお待ちしております！


いいなと思ったら応援しよう！