Shopify アプリに関する話題はこちら
アプリを2カラムに表示することは可能でしょうか?
例えば、SNS投稿をインポートして表示するアプリがあったとして、
左側:アプリ | 右側:こちらが用意したテキスト
というレイアウトで表示させたいです。
=====
■コーディング例
HTML
<div class="warp">
<div class="left">
ここにアプリ(例:SNSの投稿を表示するアプリ)を表示したい
</div>
<div class="right">
<h2>商品をご紹介!</h2>
<p>{{ section.settings.text }}</p>
</div>
</div>
CSS
.wrap{
display: flex;
}
schema
{
"type": "text",
"label": "ここにテキスト",
"id": "text"
}
※該当箇所のみ抽出し、他の記述は省略しています。
=====
↑細かいところは省略していますがこのようにしたいです。
テーマエディタでアプリブロックを追加すると1カラムになります。
Liquidで@appで呼び出すやり方を試しているのですが、書き方を間違えているのか上手くいかず…。
Liquidで@appでアプリを呼び出してコーディングで2カラムにするというやり方であってますでしょうか…?
Liquidでアプリを呼び出す基本の書き方はどういう書き方になりますでしょうか?
Aoi_16さま
はじめまして、フルバランスの渡邉です。
ご質問を確認いたしました。
コーディング例のご共有ありがとうございます。
いただいた例ですと、
.left, .right{
width:50%;
}
というCSSを追加することで2分割できるかと存じます。
また、アプリブロックはschemaに"type": "@app"を追加し、{% for block in section.blocks %}内で{% render block %}すると呼び出せますので、下記記事を参考にお試しいただけますと幸いです。
https://www.shopify.com/jp/blog/partner-theme-blocks
なにかヒントになりましたら幸いです。
私たちの励みにもなりますので、
お役に立てていればBest Answerボタンを押して頂ければ嬉しいです。
分からない点があれば、またいつでもご連絡ください。
フルバランス 渡邉
Shopify アカデミーの学習パスと認定スキルバッジExpanding Your Shopify Business Internationallyを活用して、国際的にビジネ...
By Shopify Feb 7, 2025Shopify アカデミーの学習パスB2B on Shopify:立ち上げとカスタマイズで卸売販売に進出しましょう。これら3つの無料コースは、ShopifyストアでB2B機能...
By Shopify Jan 31, 2025サポートの選択肢が増えていく中、最適となる選択の判断が難しくなっているかと存じます。今回は問題の解決に最適となるサポートの選択方法を、紹介させて頂きます。 選択肢のご紹介...
By Mirai Oct 6, 2024