Concept Documentation
Open a Store for FREEExclusive OffersServicesResources
  • Exclusive Offers 🔥
  • Greeting + Useful Resources
  • Changelog
  • Overview
    • Full Theme Features
    • Online Store 2.0
      • Color Gradient
      • Dynamic Source
  • Installation
    • Install Theme 🎯
    • Update Theme 🔔
      • Update Theme
      • Theme Update Service
    • Install App
      • Product Review
      • Shopify Search & Discovery
      • Shopify Forms
  • Basic Configuration
    • Customer registration
    • Shipping rates
    • Location
    • Language
    • Payment
    • Currency
    • Navigation
  • Theme Settings
    • General
    • Colors
      • Color schemes
    • Typography
    • Multiple layouts
    • Animations
    • Buttons
    • Variant pills
    • Inputs
    • Product cards
    • Media
    • Dropdowns and pop-ups
    • Drawers
    • Badges
    • Social Media
    • Search behavior
    • Favicon
    • Currency format
    • Cart drawer
    • Login
    • Multitasking bar
    • Preloading screen
    • Custom CSS
  • Header Group
    • Demo & Settings Data
    • Advanced settings
      • Dropdown menu
      • Mega menu
    • Header
    • Announcement bar
      • Announcement
    • Link list
      • Text
      • Menu
    • Countdown Showcase Hero
      • Heading
      • Countdown
      • Button
      • Logo
  • Footer Group
    • Demo & Settings Data
    • Footer
      • Menu
      • Text
      • Email signup
      • Social
    • Footer bottom
  • Section
    • Section on every page
    • Before/after image
    • Blog posts
      • [Block] Tags
      • [Block] Heading
      • [Block] Content
      • [Block] Author
      • [Block] Date
      • [Block] Button
    • Brand list
      • [Block] Brand
    • Carousel images
      • [Block] Slide
    • Category list
      • [Block] Category
    • Category slide
      • [Block] Slide
    • Collapsible collection
      • [Block] Collapsible row
    • Collection banner
      • [Block] Collection
    • Collection video
      • [Block] Video
    • Collection with bundle
      • [Block] Slide
    • Collection with product
      • [Block] Slide
    • Coutdown showcase hero
      • [Block] Heading
      • [Block] Countdown
      • [Block] Button
      • [Block] Logo
    • Collage
      • [Block] Image
      • [Block] Text
    • Collapsible content
      • [Block] Collapsible row
      • [Block] Caption
    • Collection list
      • [Block] Collection
    • Contact form
      • [Block] Heading
      • [Block] Caption
      • [Block] Text
      • [Block] Button
    • Custom tab
      • [Block] Custom tab
    • Custom liquid
    • Double banner
      • [Block] Heading
      • [Block] Button
    • Email signup
      • [Block] Heading
      • [Block] Email form
    • Featured blog post
    • Featured collection
      • [Block] Heading
      • [Block] Information
    • Featured collection tab
      • [Block] Tab
    • Featured images
      • [Block] Image
    • Featured product
      • [Block] Text
      • [Block] Title
      • [Block] Vendor
      • [Block] Price
      • [Block] Information
      • [Block] Inventory status
      • [Block] Countdown
      • [Block] Variant picker
      • [Block] Buy buttons
      • [Block] Description
      • [Block] Custom liquid
      • [Block] Product rating
      • [Block] Icon with text
    • Featured product tab
      • [Block] Tab
    • Icon with text
      • [Block] Icon with text item
    • Image banner
      • [Block] Heading
      • [Block] Text
      • [Block] Button
      • [Block] Link
      • [Block] Countdown
      • [Block] Thumbnail images
      • [Block] Image with text
    • Image gallery
      • [Block] Image
    • Image with collection
    • Image with text
      • [Block] Logo
      • [Block] Subheading
      • [Block] Heading
      • [Block] Text
      • [Block] Navigation
      • [Block] Link
    • Instagram
      • [Block] Image
    • Lookbook
      • [Block] Image
    • Map
    • Marquee
      • [Block] Marquee
    • Multicolumn
      • [Block] Column
      • [Block] Column: Text
    • Multiple options
      • [Block] Options
    • Outstanding reviews
      • [Block] Slide
    • Page
    • Product column
      • [Block] Collection
    • Quotes
      • [Block] Slide
      • [Block] Heading
    • Rich text
      • [Block] Heading
      • [Block] Caption
      • [Block] Text
      • [Block] Buttons
    • Slideshow
      • [Block] Slide
      • [Block] Lookbook
    • Slide banner
      • [Block] Slide
    • Spotlight products
    • Testimonial
      • [Block] Slide
    • Visual hightlight
      • [Block] Slide
    • Video
      • [Block] Heading
      • [Block] Text
      • [Block] Button
      • [Block] Countdown
    • Video with text
      • [Block] Caption
      • [Block] Heading
      • [Block] Text
      • [Block] Button
  • 🔥POPUP GROUP
    • Before you leave
    • Newsletter popup
      • Heading
      • Text
      • Newsletter
    • Recently purchased
    • Toolbar mobile
      • Search
      • Account
      • Cart
      • Wishlist
      • Link
  • Collection
    • Demo & Settings Data
    • Collection
      • Collection banner
      • Product grid
    • Storefront filtering
  • Collection List
    • Collection list page
  • Product
    • Demo & Settings Data
    • Product
    • Product information
      • Text
      • Title
      • Vendor
      • Price
      • Positive vibes bundle
      • Information
      • Inventory status
      • Countdown
      • Variant picker
      • Buy buttons
      • Description
      • Custom liquid
      • Collapsible row
      • Pop-up
      • Drawer
      • Product rating
      • Complementary products
      • Icon with text
      • Trust badge
      • Ask an expert
      • Size chart
    • Product recommendations
    • Pre-order product
    • Local pickup
  • Blogs
    • Demo & Settings Data
    • Blogs page
    • Blog posts
      • Side block: Products form collection
      • Side block: Collections list
      • Side block: Brands list
      • Side block: Posts list
      • Side block: Tags list
      • Side block: Image
      • Side block: Text
  • Article
    • Demo & Settings Data
    • Article page
    • Blog post
      • Featured image
      • Title
      • Rich text
      • Textarea
      • Image with text
      • Content
      • Lookbook
      • Quote
      • Tag
      • Side block: Products form collection
      • Side block: Collections list
      • Side block: Brands list
      • Side block: Posts list
      • Side block: Tags list
      • Side block: Image
      • Side block: Text
    • Comment
  • Cart
    • How to set up sections for Cart Page?
    • Items
  • Pages
    • How to create a page?
    • Default page
  • Other pages
    • Search page
    • Password page
      • Heading
      • Paragraph
      • Email form
    • 404 page
    • Knowledge base
      • Getting started in Shopify
      • Shopify help center
      • Shopify developers platform
    • FAQs
  • Theme Support
Powered by GitBook
On this page
  1. Section

Image with text

To add this section, please follow the below steps:

  1. From your Shopify admin, go to Online Store -> Themes.

  2. Find the theme that you want to edit, and then click Customize.

  3. Click Add section and choose "Image with text".

Setting
Description

Layout style

Select the layout style for the section:

  • Special

  • Classic

  • Modern

Section width

Select the section width from the dropdown menu:

  • Full width

  • Page width

  • Custom width

Custom width

Determines the width of the section when you choose 'Custom width' option at 'Section width' setting . Can be from 1000px to 1800px, increasing arithmetically of 50px (pixel)

Color scheme

Select a color scheme to set the text and background colors for the section

Image

Upload an image

Heading

Add text to display as a section heading (Leave the field blank to hide the heading)

Heading size

Font size of text:

  • Default

  • XX-Small

  • X-Small

  • Small

  • Medium

  • Large

  • X-Large

  • XX-Large

  • XXX-Large

Link label

Add text to display as a link label on the section (Leave the field blank to hide the link)

URL

Set the link, for example the customer service page

Text (Color)

Set the color for the text

Show top separator line

Displays a line at the top to visually separate this section from the other sections

Show bottom separator line

Displays a line at the bottom to visually separate this section from the other sections

Content

Setting
Description

Set background for content box

Select this checkbox to background for content box. (The 3 following settings only take effect if this checkbox is ticked)

Text (Color)

Set the color for the text or icon

Background

Set the background color for content box (If a background gradient is set, the section's background will be set according to the background gradient setting)

Background gradient

Set the background gradient for content box

Desktop layout

Setting
Description

Desktop image placement

Select desktop layout from the dropdown menu:

  • Image first

  • Image second

Desktop content position

Select desktop content position from the dropdown menu:

  • Top

  • Middle

  • Bottom

(Position is automatically optimized for mobile. This setting applies to the position of the entrie content block)

Desktop content alignment

Select desktop content alignment from the dropdown menu:

  • Left

  • Center

  • Right

Mobile layout

Setting
Description

Mobile image placement

Select mobile layout from the dropdown menu:

  • Image first

  • Image second

Mobile content alignment

Select mobile content alignment from the dropdown menu:

  • Left

  • Center

  • Right

Animations

Setting
Description

Reveal sections on scroll

Apply effects to the images on scroll.

Select the images animation from the dropdown menu:

  • None

  • Fade in up

  • Fade in down

  • Zoom in

  • Zoom out

Text animation

Select the text animation from the dropdown menu:

  • None

  • Fade in up

  • Fade in down

  • Zoom in

  • Zoom out

  • Split

Section padding

Setting
Description

Top padding

Determines the height of the top inner space of the section. Can be from 0px to 100px, increasing arithmetically of 1px (pixel).

Bottom padding

Determines the height of the bottom inner space of the section. Can be from 0px to 100px, increasing arithmetically of 1px (pixel).

Top padding on mobile

Determines the height of the top inner space of the section on mobile. Can be from 0px to 100px, increasing arithmetically of 1px (pixel).

Bottom padding on mobile

Determines the height of the top inner space of the section on mobile. Can be from 0px to 100px, increasing arithmetically of 1px (pixel).

PreviousImage with collectionNext[Block] Logo

Last updated 10 months ago