発信可能な電話番号の挿入

[Kitatema]

お世話になっております。

shopify partnerのkitatemaと申します。

現在、有料テーマ「Focal」を使用してサイト構築を行なっております。

商品詳細ページにアイコン付きの発信可能な電話番号を記載したいと考えております。

また、PCの場合は電話は使用しないと思いますので発信できなくするか、非表示にしたいのですが可能でしょうか。。考えられる方法が思いつかずお力をお借りしたいです。

アイコン付きテキストブロックを使用して作成しようとしていたのですが（添付写真）、HTMLがブロック内に挿入できず、カスタムHTMLブロックかコード編集で対応になるかと探っております。

[株式会社フルバランス · Accepted solution]

Kitatemaさま

はじめまして、フルバランスの渡邉です。

ご質問を確認いたしました。

セクションによってはHTMLが使えなくて困りますよね。

既存のブロックをHTML入力可能な状態に変更してしまうのが手取り早いと思いますので、

1.テーマ -> コードを編集でtext with iconsというファイルを探してください

2. schema内に以下のような記述があるかと思います

{
"type": "richtext",
"id": "text",
"default": "<p>Free worldwide shipping and returns - customs and duties taxes included</p>",
"label": "t:sections.rich-text.blocks.text.settings.text.label"
}

この"type": "richtext",を"type": "html",に変更してみてください

schemaのtypeタグについて：

https://ec-penguin.com/blogs/shopify/schema-type-summary

3.これでHTML入力ができるようになるので、

<a href="tel:000-1234-5678">000-1234-5678</a>といった形で発信可能な電話番号が入力できると思います。

参考：https://webliker.info/html/65145/

PCでは発信不可にする方法ですが、

aタグ付きとaタグなしの電話番号を２つ記入し、それぞれクラス名をつけてcssのメディアクエリでdisplay:none;で出しわけするのはいかがでしょうか。

ご参考になりましたでしょうか。

私たちの励みにもなりますので、
お役に立てていればBest Answerボタンを押して頂ければ嬉しいです。

分からない点があれば、またいつでもご連絡ください。

フルバランス　渡邉

[Kitatema]

フルバランス　渡邉様

お世話になっております。

ご返信いただきありがとうございます！！

ご教示いただいた内容で思い通りに表示することができました。

お力を貸していただきありがとうございます！