Hello. Very new user here. Using the Debut theme. I am trying to figure out if there is a way to justify the text in ‘Image With Text’ sections on a section by section basis? i.e. I have two of the ‘Image with Text’ sections on my home page. I’d like to leave the first one’s text left justified as is default, but right justify the text in the second one. And I have several other ‘Image with Text’ sections on other pages in the site that Id like to treat the same way. (Did my making custom sections following guidance on forum). Can I justify text on a section by section basis by editing the code in each section as opposed to adding code to the bottom of the css theme file (which appears to work but alters the text on all of the ‘Image with Text’ sections?
Hi @TheBurpBoss
You could change the text in the " Image with text" section by editing your theme.
- From Online Store > Theme > Customize
- On the top navigation menu, select Product > Product Default.
- Scroll down to Image with text section you want to justify text, click on the “T” symbol and change the heading as a picture below:
If this answers your question, please mark it as a solution.
All the best.
Thanks. Unfortunately, when I tried following these steps, I don’t have any such options. The ‘Image with Text’ sections I’d like to modify are not Products. Can I change the text justify on a per section basis? I have created duplicates of the original image with text code and renamed these sections and placed them into other landing pages via a template I made for said landing page.
Well if you want to do it per section basis, it needs to be a “section setting”.
That seems to make sense. When I access the liquid code for each section that I created by duplicating original, what line must I change? I know nothing about code. Would like to set some of these ‘Image with Text’ sections as right and others centered.
Kind thanks to anyone who can assist. I see other threads about pasting code at the bottom of the Asset Theme.CSS, but I couldn’t see any threads on my specific situation.
I would do it for you if you share your myshopify url, trying to make you do it would take 4-5 more messages I guess.
Will it be just replacement of words like left or default with center or right? Would like to learn how to do. Thanks!
Ok, let me tell you what I would do then.
I would first create a checkbox in the section settings, right here:
then I would grab this classname conditionally
There should be this expression in your theme.css
then I would add it to probably this container but not sure about this one:
resulting feature-row.liquid file would be this:
{% capture image_layout %}
{% if section.settings.image != blank %}
{% capture img_id %}FeatureRowImage-{{ section.id }}{% endcapture %}
{% capture wrapper_id %}FeatureRowImageWrapper-{{ section.id }}{% endcapture %}
{%- assign img_url = section.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{% include 'image-style', image: section.settings.image, height: 545, wrapper_id: wrapper_id, img_id: img_id %}
{% else %}
{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
{% endif %}
{% endcapture %}
{% if section.settings.layout == 'left' %}
{{ image_layout }}
{% endif %}
{% assign text_center_class = '' %}
{% if section.settings.text_centered %}
{% assign text_center_class = ' text-center' %}
{% endif %}
{% if section.settings.title != blank %}
## {{ section.settings.title | escape }}
{% endif %}
{% if section.settings.text != blank %}
{{ section.settings.text }}
{% endif %}
{% if section.settings.button_label != blank and section.settings.button_link != blank %}
{%- capture ariaLabel -%}
{{- section.settings.button_label -}}
{%- if section.settings.button_link.type == 'frontpage_link' -%}
: {{ 'homepage.general.title' | t -}}
{%- elsif section.settings.button_link.type == 'catalog_link' -%}
: {{ 'collections.catalog.title' | t -}}
{%- elsif section.settings.button_link.object.title -%}
: {{ section.settings.button_link.object.title -}}
{%- endif -%}
{%- endcapture -%}
{{- section.settings.button_label | escape -}}
{% endif %}
{% if section.settings.layout == 'right' %}
{{ image_layout }}
{% endif %}
{% schema %}
{
"name": {
"cs": "Obrázek s textem",
"da": "Billede med tekst",
"de": "Foto mit Text",
"en": "Image with text",
"es": "Imagen con texto",
"fi": "Kuva tekstillä",
"fr": "Image avec texte",
"it": "Immagine con testo",
"ja": "テキスト付き画像",
"ko": "텍스트 포함 이미지",
"nb": "Bilde med tekst",
"nl": "Afbeelding met tekst",
"pl": "Obraz z tekstem",
"pt-BR": "Imagem com texto",
"pt-PT": "Imagem com texto",
"sv": "Bild med text",
"th": "รูปภาพพร้อมข้อความ",
"tr": "Metin içeren görsel",
"vi": "Hình ảnh có chữ",
"zh-CN": "带文本图片",
"zh-TW": "附文字的圖片"
},
"class": "index-section",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": {
"cs": "Obrázek",
"da": "Billede",
"de": "Foto",
"en": "Image",
"es": "Imagen",
"fi": "Kuva",
"fr": "Image",
"it": "Immagine",
"ja": "画像",
"ko": "이미지",
"nb": "Bilde",
"nl": "Afbeelding",
"pl": "Obraz",
"pt-BR": "Imagem",
"pt-PT": "Imagem",
"sv": "Bild",
"th": "รูปภาพ",
"tr": "Görsel",
"vi": "Hình ảnh",
"zh-CN": "图片",
"zh-TW": "圖片"
}
},
{
"type": "select",
"id": "layout",
"label": {
"cs": "Zarovnání obrázku",
"da": "Justering af billede",
"de": "Fotoausrichtung",
"en": "Image alignment",
"es": "Alineación de imagen",
"fi": "Kuvan tasaus",
"fr": "Alignement de l'image",
"it": "Allineamento immagine",
"ja": "画像アラインメント",
"ko": "이미지 정렬",
"nb": "Bildejustering",
"nl": "Afbeelding uitlijnen",
"pl": "Wyrównanie obrazu",
"pt-BR": "Alinhamento da imagem",
"pt-PT": "Alinhamento da imagem",
"sv": "Bildjustering",
"th": "การจัดวางรูปภาพ",
"tr": "Görsel hizalaması",
"vi": "Căn chỉnh hình ảnh",
"zh-CN": "图片对齐方式",
"zh-TW": "圖片對齊"
},
"default": "left",
"options": [
{
"value": "left",
"label": {
"cs": "Doleva",
"da": "Venstre",
"de": "Links",
"en": "Left",
"es": "Izquierda",
"fi": "Vasen",
"fr": "Gauche",
"it": "Sinistra",
"ja": "左",
"ko": "왼쪽",
"nb": "Venstre",
"nl": "Links",
"pl": "Do lewej",
"pt-BR": "Esquerda",
"pt-PT": "Esquerda",
"sv": "Vänster",
"th": "ด้านซ้าย",
"tr": "Sol",
"vi": "Bên trái",
"zh-CN": "左侧",
"zh-TW": "左方"
}
},
{
"value": "right",
"label": {
"cs": "Doprava",
"da": "Højre",
"de": "Rechts",
"en": "Right",
"es": "Derecha",
"fi": "Oikea",
"fr": "Droite",
"it": "Destra",
"ja": "右",
"ko": "오른쪽",
"nb": "Høyre",
"nl": "Rechts",
"pl": "Do prawej",
"pt-BR": "Direita",
"pt-PT": "Direita",
"sv": "Höger",
"th": "ด้านขวา",
"tr": "Sağ",
"vi": "Bên phải",
"zh-CN": "右侧",
"zh-TW": "右方"
}
}
]
},
{
"type": "text",
"id": "title",
"label": {
"cs": "Nadpis",
"da": "Overskrift",
"de": "Titel",
"en": "Heading",
"es": "Título",
"fi": "Otsake",
"fr": "En-tête",
"it": "Heading",
"ja": "見出し",
"ko": "제목",
"nb": "Overskrift",
"nl": "Kop",
"pl": "Nagłówek",
"pt-BR": "Título",
"pt-PT": "Título",
"sv": "Rubrik",
"th": "ส่วนหัว",
"tr": "Başlık",
"vi": "Tiêu đề",
"zh-CN": "标题",
"zh-TW": "標題"
},
"default": {
"cs": "Obrázek s textem",
"da": "Billede med tekst",
"de": "Foto mit Text",
"en": "Image with text",
"es": "Imagen con texto",
"fi": "Kuva tekstillä",
"fr": "Image avec texte",
"it": "Immagine con testo",
"ja": "テキスト付き画像",
"ko": "텍스트 포함 이미지",
"nb": "Bilde med tekst",
"nl": "Afbeelding met tekst",
"pl": "Obraz z tekstem",
"pt-BR": "Imagem com texto",
"pt-PT": "Imagem com texto",
"sv": "Bild med text",
"th": "รูปภาพพร้อมข้อความ",
"tr": "Metin içeren görsel",
"vi": "Hình ảnh có chữ",
"zh-CN": "带文本图片",
"zh-TW": "附文字的圖片"
}
},
{
"type": "richtext",
"id": "text",
"label": {
"cs": "Text",
"da": "Tekst",
"de": "Text",
"en": "Text",
"es": "Texto",
"fi": "Teksti",
"fr": "Texte",
"it": "Testo",
"ja": "テキスト",
"ko": "텍스트",
"nb": "Tekst",
"nl": "Tekst",
"pl": "Tekst",
"pt-BR": "Texto",
"pt-PT": "Texto",
"sv": "Text",
"th": "ข้อความ",
"tr": "Metin",
"vi": "Văn bản",
"zh-CN": "文本",
"zh-TW": "文字"
},
"default": {
"cs": "
Zkombinujte velký text a obrázek, abyste zaměřili pozornost návštěvníků na zvolený produkt, kolekci či příspěvek na blogu. Pak můžete připojit podrobnosti o dostupnosti a stylu, nebo dokonce recenzi.
",
"da": "
Kombiner stor tekst med et billede for at give dit valgte produkt, din valgte kollektion eller dit valgte blogopslag fokus. Tilføj oplysninger om tilgængelighed, stil og eventuelt også en anmeldelse.
",
"de": "
Kombinieren Sie große Schrift mit einem Foto, um einen Fokus auf Ihr ausgewähltes Produkt, die Kategorie oder einen Blogpost zu legen. Sie können dann Details zur Verfügbarkeit und dem Style oder sogar eine Bewertung hinzufügen.
",
"en": "
Pair large text with an image to give focus to your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.
",
"es": "
Vincula un texto largo con una imagen para dar visibilidad a tu producto, colección o artículo de blog seleccionados. Agrega detalles sobre disponibilidad, estilo, o incluso ofrece una reseña.
",
"fi": "
Korosta valitsemaasi tuotetta, kokoelmaa tai blogijulkaisua lisäämällä kuvaan suuri teksti. Lisää saatavuustiedot, määritä tyyli tai näytä vaikkapa arvostelu.
",
"fr": "
Ajoutez une image à un long paragraphe de texte pour mettre l'accent sur un produit de votre choix, une collection, ou un article de blog. Ajoutez des détails sur la disponibilité, le style, ou mettez un commentaire client en avant.
",
"it": "
Associa un testo di grandi dimensioni a un'immagine per dare importanza al prodotto, alla collezione o all'articolo del blog di tua scelta. Aggiungi dettagli sulla disponibilità, sullo stile o fornisci una recensione.
",
"ja": "
あなたが選んだ商品、コレクション、またはブログ記事に注目を集めるため、大きなテキストと画像を組み合わせます。可用性、スタイル、またはレビュー提供についての詳細を追加します。
",
"ko": "
이미지와 큰 텍스트를 짝지어 선택한 제품, 컬렉션, 블로그 게시판을 강조합니다. 사용 가능성, 스타일에 대한 자세한 정보를 추가하거나 리뷰를 제공합니다.
",
"nb": "
Koble stor tekst med et bilde for å drive fokus mot det valgte produktet, samlingen eller blogginnlegget. Legg til detaljer om tilgjengelighet, stil eller vis frem en vurdering.
",
"nl": "
Plaats een afbeelding bij grote stukken tekst om de aandacht op je gekozen product, collectie of blogpost te richten. Voeg details over beschikbaarheid en stijl toe of plaats een productrecensie.
",
"pl": "
Połącz duży tekst z obrazem, aby skierować uwagę na wybrany produkt, kolekcję lub post na blogu. Dodaj szczegóły dotyczące dostępności, stylu lub nawet dołącz recenzję.
",
"pt-BR": "
Emparelhe textos grandes com uma imagem para destacar o produto, a coleção ou o post do blog escolhido. Adicione informações sobre disponibilidade, estilo ou até mesmo uma avaliação.
",
"pt-PT": "
Associe um texto grande a uma imagem para dar ênfase ao produto, coleção ou publicação no blogue que escolheu. Adicione detalhes sobre disponibilidade, estilo ou uma avaliação.
",
"sv": "
Para ihop stor text med en bild för att ge fokus åt din valda produkt, kollektion eller blogginlägg. Lägg till information om tillgänglighet, stil eller tillhandahåll till och med en recension.
",
"th": "
จับคู่ข้อความขนาดใหญ่กับรูปภาพเพื่อให้ความสำคัญกับสินค้า คอลเลกชัน หรือโพสต์บล็อกที่คุณเลือก เพิ่มรายละเอียดเกี่ยวกับความพร้อม สไตล์ หรือแม้กระทั่งเขียนรีวิว
",
"tr": "
Geniş metni bir görselle eşleyerek seçtiğiniz ürüne, koleksiyona veya blog gönderisine dikkat çekin. Stok durumu, stil hakkındaki ayrıntıları ekleyin, hatta inceleme sağlayın.
",
"vi": "
Ghép nối văn bản lớn với hình ảnh để làm nổi bật sản phẩm, bộ sưu tập hoặc bài viết blog đã chọn. Thêm chi tiết về tình trạng còn hàng, kiểu hoặc đưa ra đánh giá.
",
"zh-CN": "
将大文本与图片配对，以便将焦点置于您选择的产品、产品系列或博客文章。添加有关可用性和样式的详细信息，甚至是提供评论。
",
"zh-TW": "
大型文字搭配圖片，以便強調特定產品、商品系列或部落格貼文。您可以加上各種有關可用性、樣式的資料，甚至可以提供使用心得。
"
}
},
{
"type": "text",
"id": "button_label",
"label": {
"cs": "Text tlačítka",
"da": "Knaptekst",
"de": "Button-Etikett",
"en": "Button label",
"es": "Etiqueta de botón",
"fi": "Tekstipainike",
"fr": "Texte du bouton",
"it": "Etichetta pulsante",
"ja": "ボタンのラベル",
"ko": "버튼 레이블",
"nb": "Knappetikett",
"nl": "Knoplabel",
"pl": "Przycisk z etykietą",
"pt-BR": "Etiqueta de botão",
"pt-PT": "Etiqueta do botão",
"sv": "Knappetikett",
"th": "ป้ายกำกับปุ่ม",
"tr": "Düğme etiketi",
"vi": "Nhãn nút",
"zh-CN": "按钮标签",
"zh-TW": "按鈕標籤"
}
},
{
"type": "url",
"id": "button_link",
"label": {
"cs": "Tlačítkový odkaz",
"da": "Knaplink",
"de": "Button-Link",
"en": "Button link",
"es": "Enlace de botón",
"fi": "Painikelinkki",
"fr": "Lien du bouton",
"it": "Link pulsante",
"ja": "ボタンのリンク",
"ko": "버튼 링크",
"nb": "Kobling for knapp",
"nl": "Knoplink",
"pl": "Link przycisku",
"pt-BR": "Link de botão",
"pt-PT": "Ligação do botão",
"sv": "Knapplänk",
"th": "ลิงก์ปุ่ม",
"tr": "Düğme bağlantısı",
"vi": "Liên kết trên nút",
"zh-CN": "按钮链接",
"zh-TW": "按鈕連結"
}
},
{
"type": "checkbox",
"id": "text_centered",
"label": {
"en": "Center the text"
}
}
],
"presets": [
{
"name": {
"cs": "Obrázek s textem",
"da": "Billede med tekst",
"de": "Foto mit Text",
"en": "Image with text",
"es": "Imagen con texto",
"fi": "Kuva tekstillä",
"fr": "Image avec texte",
"it": "Immagine con testo",
"ja": "テキスト付き画像",
"ko": "텍스트 포함 이미지",
"nb": "Bilde med tekst",
"nl": "Afbeelding met tekst",
"pl": "Obraz z tekstem",
"pt-BR": "Imagem com texto",
"pt-PT": "Imagem com texto",
"sv": "Bild med text",
"th": "รูปภาพพร้อมข้อความ",
"tr": "Metin içeren görsel",
"vi": "Hình ảnh có chữ",
"zh-CN": "带文本图片",
"zh-TW": "附文字的圖片"
},
"category": {
"cs": "Obrázek",
"da": "Billede",
"de": "Foto",
"en": "Image",
"es": "Imagen",
"fi": "Kuva",
"fr": "Image",
"it": "Immagine",
"ja": "画像",
"ko": "이미지",
"nb": "Bilde",
"nl": "Afbeelding",
"pl": "Obraz",
"pt-BR": "Imagem",
"pt-PT": "Imagem",
"sv": "Bild",
"th": "รูปภาพ",
"tr": "Görsel",
"vi": "Hình ảnh",
"zh-CN": "图片",
"zh-TW": "圖片"
}
}
]
}
{% endschema %}
I ended up doing the below. Don’t feel confident enough to follow above directions but patched in two separate lines in the bottom of the theme.css file. It appears the code for each text with image is slightly different in that I had to make two seperate lines, one to affect the section with image on right and another for where image is on left. Thanks for the help all.
.feature-row__item.feature-row__text.feature-row__text–right {
text-align: right!important;
}
.feature-row__item.feature-row__text.feature-row__text–left {
text-align: left!important;
}