TextWithImage

Purpose

The TextWithImage component renders one or more “image + text + button” blocks.

It:

renders an optional section header (settings.header)

renders one block per settings.sets[]

supports different horizontal/vertical alignment per block

supports a special “image-only” layout when a set has an image but no title/text/button

Inputs (model contract)

Model shape (storefront example)

{
  "name": "TextWithImage",
  "view": "Default",
  "section": "SectionA",
  "settings": {
    "sets": [
      {
        "image": {
          "link": "https://example.com/media/sample.jpg",
          "alt": "Sample text"
        },
        "title": "Sample title",
        "text": "Sample text",
        "buttonText": "Sample button text",
        "buttonLink": "/sample",
        "verticalAlignment": 0,
        "horizontalAlignment": 2
      },
      "..."
    ],
    "id": "Component Id",
    "section": "SectionA",
    "type": "NoirTextWithImage",
    "name": "TextWithImage",
    "configuredInContentApi": true,
    "view": "Default",
    "displayName": "Sample text",
    "cssClass": "",
    "header": "",
    "alignment": "Left"
  },
  "translations": {
    "clickToLearnMoreAbout": "Sample text",
    "noImageAltAvailable": "Sample text"
  }
}

Required fields

settings.id

settings.sets[]

Optional fields

settings.cssClass

settings.header

settings.alignment (Left, Center, Right)

Per set:

set.image.link

set.image.alt

set.title

set.text

set.buttonText

set.buttonLink

set.horizontalAlignment (numeric)

set.verticalAlignment (numeric)

translations.clickToLearnMoreAbout

translations.noImageAltAvailable

JavaScript

Global object

Components/TextWithImage/Default.js currently exports an empty object:

There’s no Alpine binding (x-data) in this component’s Liquid template.

Dependencies

None (Liquid-only rendering)

Notes

horizontalAlignment and verticalAlignment are numeric enums interpreted in Liquid.

Image alt falls back to: set.image.alt → set.title → settings.header → translations.noImageAltAvailable.

Extras

Template behavior (Liquid + Alpine)

Computes a responsive widthClass based on how many sets exist:

2 sets → md:w-1/2

3 sets → md:w-1/3

4+ sets → md:flex-1

Uses onlyImage = set.image and set.title == null to switch image sizing (cover vs contain).

Alignment rules:

horizontalAlignment: 0 = left, 2 = center, 3 = right

verticalAlignment: 0 = top, 2 = center, 3 = bottom

Shows the button only when both buttonText and buttonLink exist.

TextWithImage

Purpose#

Inputs (model contract)#

Model shape (storefront example)#

Required fields#

Optional fields#

JavaScript#

Global object#

Dependencies#

Notes#

Extras#

Template behavior (Liquid + Alpine)#