アプリを2カラム表示したい

[aoi_16]

アプリを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を追加することで２分割できるかと存じます。

また、アプリブロックはschemaに"type": "@app"を追加し、{% for block in section.blocks %}内で{% render block %}すると呼び出せますので、下記記事を参考にお試しいただけますと幸いです。

https://www.shopify.com/jp/blog/partner-theme-blocks

なにかヒントになりましたら幸いです。

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

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

フルバランス　渡邉