FROM CACHE - jp_header
このコミュニティはピアツーピアサポートに移行しました。Shopify サポートは今後、このコミュニティへのサービスを提供いたしません。これからもぜひ、他のマーチャントやパートナーとつながり、サポートし合い、経験を共有してください。 当社の行動規範に違反する行動や削除を希望するコンテンツがありましたら、引き続きご報告ください

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

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

aoi_16
Shopify Partner
25 1 4

アプリを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でアプリを呼び出す基本の書き方はどういう書き方になりますでしょうか?

1件の返信1

株式会社フルバランス
Shopify Partner
1701 599 785

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ボタンを押して頂ければ嬉しいです。

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

フルバランス 渡邉