FROM CACHE - jp_header

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

解決済
Kitatema
Shopify Partner
16 0 0

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

shopify partnerのkitatemaと申します。

 

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

 

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

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

 

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

 

スクリーンショット 2022-12-08 0.08.58.png

1 件の受理された解決策

ベストソリューション
株式会社フルバランス
Shopify Partner
958 323 494

成功

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タグなしの電話番号を2つ記入し、それぞれクラス名をつけてcssのメディアクエリでdisplay:none;で出しわけするのはいかがでしょうか。

 


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

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

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

フルバランス 渡邉

株式会社フルバランス(Shopify Experts)
Shopify専門のEC成長支援会社です。ECの技術・実務・成長、お悩みのことがあれば、気軽にご相談ください。
『すべてのブランドの特大成長エンジンを搭載する』 株式会社フルバランス

元の投稿で解決策を見る

2件の返信2
株式会社フルバランス
Shopify Partner
958 323 494

成功

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タグなしの電話番号を2つ記入し、それぞれクラス名をつけてcssのメディアクエリでdisplay:none;で出しわけするのはいかがでしょうか。

 


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

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

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

フルバランス 渡邉

株式会社フルバランス(Shopify Experts)
Shopify専門のEC成長支援会社です。ECの技術・実務・成長、お悩みのことがあれば、気軽にご相談ください。
『すべてのブランドの特大成長エンジンを搭載する』 株式会社フルバランス
Kitatema
Shopify Partner
16 0 0

フルバランス 渡邉様

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

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

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

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