SScale Themedocs

Side-by-side section with image (or gallery) and text content. Supports single and gallery modes, videos, curved edges and many content blocks.

Image with Text

The Image with Text section displays a media element (image, video or multi-image gallery) on one side and text content on the other. It is one of the most versatile sections in the theme, usable for storytelling, product showcasing or brand presentation.

2 image modes

ModeDescriptionIdeal for
SingleA single image or videoProduct presentation, simple storytelling
GalleryMulti-image gallery with creative presetsLookbooks, portfolios, visual presentations

Single mode

Media types

TypeDescription
ImageStatic image with lazy loading and srcset
VideoShopify video in autoplay, muted and looping

Curved Edge

Single mode offers a unique curved edge effect on the image:

SettingDescriptionOptions
Enable curved edgeActivates the curve effect on the mediaOn / Off
IntensityCurve strengthSubtle / Medium / Bold / Extreme
StyleCurve shapeSymmetric / Wave Bottom / Wave Top / Bubble
💡The curved edge effect is a signature design element of Scale Theme. It adds a premium touch without overloading the page. Prefer the Medium intensity for an elegant effect.

Gallery mode replaces the single image with an interactive multi-image composition. 10 presets are available:

PresetDescription
CollageArtistic magazine-style layout
Overlap CardsOverlapping cards with animation
GridRegular image grid
Polaroid StackPolaroid stack effect
Floating OrbitFloating images in orbit
Split RevealTwo-part reveal
Diagonal CascadeDiagonal cascade
Frame in FrameImage within a frame
MasonryCompact masonry layout
Showcase HeroOne large image with thumbnails
SettingDescriptionOptionsDefault
Mobile layoutBehavior on mobileAdapt / Stack / Slider / Hero onlyAdapt
Slider typeIf slider, navigation typeCSS / NavigationCSS
ArrowsShow arrows (navigation slider)On / OffOn
DotsShow dots (navigation slider)On / OffOn
Click animationEffect on image clickShuffle / Flip / Pop / Lift / NoneShuffle

Main settings

Layout

SettingDescriptionOptionsDefault
Image ratioMedia proportionsAdapt / Square / Landscape / Landscape Wide / 16:9 / Portrait / Portrait TallAdapt
Image widthWidth percentage for the image20-80%50%
Border radiusCorner rounding0-50px8px
PositionImage on left or rightImage first / Text firstImage first
Layout styleContainer appearanceNormal / CardNormal
Remove gapRemove the gap between image and textOn / OffOff
Max text widthMaximum width of the text block300-1000px700px

Text alignment

SettingDescriptionOptionsDefault
Desktop vertical positionVertical text alignmentTop / Middle / BottomMiddle
Desktop alignmentDesktop horizontal alignmentLeft / Center / RightLeft
Mobile alignmentMobile horizontal alignmentLeft / Center / RightLeft

Available blocks

BlockDescriptionLimit
HeadingMain title (H1 to H4) with adjustable size-
TextRich text paragraph-
ButtonCTA button with link and style-
Icon ListIcon list with text (shipping, warranty, etc.)-
Tabs ContentContent organized in tabs-
Multi ImageImage for the gallery (Gallery mode only)-
AppShopify app block-
Custom LiquidCustom Liquid code-

Use cases

Brand presentation

  • Single mode with lifestyle image
  • Blocks: Heading + Text + Button
  • Text first position (text on left, image on right)
  • Vertical alignment Middle

Enriched product page

  • Single mode with product image
  • Curved edge enabled in Symmetric style
  • Blocks: Heading + Icon List (product benefits) + Button
  • Image width at 60%

Lookbook / Portfolio

  • Gallery mode with Collage or Overlap Cards preset
  • 3-5 Multi Image blocks
  • Text blocks: Heading + Text
  • Shuffle click animation for interactivity

About page

  • Gallery mode with Polaroid Stack preset
  • Team or behind-the-scenes photos
  • Blocks: Heading + Text + Button to contact
  • Gap removed for an immersive look
⚠️In Gallery mode, the recommended number of images depends on the preset. For example, Collage works best with 3-5 images, while Grid can accommodate more. Too few images in a complex preset can produce an incomplete look.
ℹ️The Image width setting (20-80%) controls the distribution between the media and text. At 50%, the split is equal. At 70%, the image visually dominates -- ideal for product pages where the visual is paramount.