Media with text

An image or video on one side, text on the other. Works for almost any story, which is why most pages use one.

Media with text section in the Sublime theme

At a glance: Add it to any page with Add section. Holds up to 3 blocks.

Good for

Telling your brand story next to a photo
Explaining a product feature beside a close-up or short video
Several stories in a swipeable row, one item each

How to add the section

From your Shopify admin, go to Online Store → Themes and click Customize on Sublime.
Open the page you want to edit from the dropdown at the top of the editor.
In the left sidebar, click Add section.
Search for Media with text and select it.
Drag it into position, adjust the settings below, and click Save.

Section settings

Layout

Enable full width	Stretches the section edge to edge instead of holding it inside the page container.Off by default.
Desktop content alignment	Text alignment on desktop.Default: Left.
Mobile content alignment	Text alignment on mobile.Default: Left.
Desktop media layout	Which side of the text the image or video sits on, on desktop.Choose Left (default) or Right.
Mobile media layout	On mobile the media and text stack. This chooses whether the media comes above or below the text.Choose Top (default) or Bottom.
Enable parallax on desktop	Moves the image at a different speed from the page as it scrolls. Subtle values read as depth; strong ones as motion.On by default.
Desktop media ratio	Crops the media to a fixed shape on desktop. Hidden when desktop parallax is on, because parallax always uses a square frame.Choose Portrait (3:4), Landscape (4:3) or Square (1:1) (default). Only appears when Enable parallax on desktop* is off.*
Mobile media ratio	Crops the media to a fixed shape on mobile.Choose Portrait (3:4) (default), Landscape (4:3) or Square (1:1).
Enable carousel on mobile	With more than one item in the section, lets shoppers swipe between them on mobile instead of scrolling past them one below another. Desktop already shows several items as a carousel.On by default.

Appearance

Color scheme

Sets the background, text, border and button colors for the section. Schemes are defined once in Theme settings → Colors and reused everywhere, so changing a scheme updates every section using it.

Spacing

Top and bottom spacing for desktop, with optional separate values for mobile. These are the same controls on every section. See Settings every section shares.

Blocks

Blocks are the individual pieces inside the section. In the sidebar, click Add block under the section to add one, and drag blocks to reorder them. The order in the sidebar is the order on the page.

Content block

Inside each Content block you can add these nested blocks: Badge group, Heading, Text, Icon with text and Button group. Click the block in the sidebar, then Add block beneath it.

Media

Media type	Add multiple media and text blocks.Choose Image (default) or Video.
Desktop image	Background image used on desktop.2880 x 1280px (large) .jpg recommended.Only appears when Media type is Image.
Mobile image	A separate image used on mobile. Leave empty to reuse the desktop image.1200 x 900px .jpg recommended.Only appears when Media type is Image.
Desktop video	Video shown on desktop.Only appears when Media type is Video.
Mobile video	A separate, usually lighter video for mobile.Replaces the video URL.Only appears when Media type is Video.
Desktop cover image	Shown before the video plays. Leave it empty to use the video's own preview frame.Only appears when Media type is Video.
Mobile cover image	A separate cover image for phones. Leave it empty to use the desktop cover image.Only appears when Media type is Video.
Video link	Accepts YouTube and Vimeo URLs.Only appears when Media type is Video.
Enable video autoplay	Starts the video as soon as it is in view. Autoplaying video is always muted, because browsers block sound without a click.Off by default. Only appears when Media type* is Video.*
Enable video looping	Restarts the video when it reaches the end.Off by default. Only appears when Media type* is Video.*

Icon with text block

Icon

Icon	Upload your own icon image.Choose None, Store, Phone, Heart, User, Check, Check circle, Star (default), Lab, Info, Truck, Free shipping, Ruler, Returning, Return, Secure, Credit card, Gift, Tag, Discount, Map pin, Package, Clock, Wallet, Coupon, Award, Barcode, Diamond, Leaf, Apple, Gluten free, Gluten, Vegan, Dairy, Dairy free, No added sugar, Protein, Droplet, Droplet free, Bolt, Moon, Brain, Recycle, Envelope, Chat, Sparkle, Flame, Recurring, Lock, Globe, Calendar, Nut off, Sprout, Arrow right, Arrow up right, Arrow left, Chevron right, Chevron down, Plus, Minus, Cross, Play, Cart, Shopping cart, Search, Link, Download, Home, Hamburger, Edit, Login, Error, Arrow up, Chevron left, Chevron up, Arrow down, Filter, Trash, Share, Eye, Sound on, Sound off, Expand, Copy, Question, Warning, Sticky note, Notification, Swap, List, Grid or Logout.
Custom icon	Your own icon, used instead of the preset icon above.Overrides the icon above. Use a transparent .svg or .png.
Icon size	Displayed size of the icon.Adjustable from 16px to 120px (default 24px).

Content

Text

The text content of this block.

Spacing

Top and bottom spacing for desktop, with optional separate values for mobile. These are the same controls on every section. See Settings every section shares.

Tips

Alternate sides down the page. When you stack several of these sections, switch Desktop media layout between Left and Right so the page zig-zags.
Match the ratio to the photo. Portrait (3:4) suits people and product shots. Landscape (4:3) suits rooms and scenery.
Add more items for a carousel. Each item becomes a slide on desktop, with dots below to move between them.

Troubleshooting

Problem	Fix
I can't find the desktop media ratio	It's hidden while desktop parallax is on, because parallax always uses a square frame. Turn off parallax to choose a ratio.
On mobile the items appear one below another	Turn on Enable carousel on mobile to make them swipeable.