Maximize Theme User Guide

Text with image cards

Ask AI

Open in ChatGPT

Ask ChatGPT about this page

Open in Claude

Ask Claude about this page

1. What is Text with image cards?

The Text with image cards section is a stylish layout feature that organizes content into multiple cards, each combining text and images. The section is ideal for highlighting key details, showcasing products, or presenting services.

2. Section Components

Section		Add a section showing multiple text and image cards in 2 layouts: Vertical or Horizontal.
Available block		Used to add a card (that has image and text inside) to the section.

3. Location & Setup

Go to "Online Store" > "Themes" > "Customize"
Select where you want to place it
Click "Add Section"
Search for Text with image cards
Click on it to add.

4. Core Features

Optimized card layouts: Seamless display on desktop and mobile.
Fully customizable: Each card can have Image, Text, and Button.
Drive engagement: Images can link to products, collections, or any destination.

5. Common Use Cases

🤔 How to set up the Text with image cards section?

If you want to display key information and images through the Text with image cards section, follow these steps:

STEP 1: Add the section

Add the Text with image cards section to your desired page.

STEP 2: Set up the section heading

Click on the Text with image cards section to open its settings panel, then fill in:

Subheading: A short line displayed above the main heading.
Heading: The main title of the section. You can wrap text between [] to add text highlights (e.g., Adding [marker] will underline [highlight] text).
Heading size: Choose Small, Medium, or Large.
Heading tag: Select the appropriate HTML heading tag for SEO (e.g., H2).
Heading alignment: Choose Left, Center, or Right.
Highlight effect: Choose how the bracketed text in your heading or text is styled — e.g., Underline, Marker, etc.
Text transform: Optionally force text to Uppercase, Italic, or leave as None.

STEP 3: Set up each Card block's content

By default, the section includes 4 Card blocks. You can delete, hide, or add more as needed. Click on a Card block to open its settings, then fill in:

Image: Upload your own image or explore free images from the built-in library.
Image link: Paste a URL or search for a page to make the image clickable. Toggle Open this link in a new tab if needed.
Subheading: A short line displayed above the card heading.
Heading: The main title of the card. Supports the same [] text highlight syntax as the section heading.
Heading size: Choose Small, Medium, or Large for the card heading independently from the section heading.
Text: Enter the card's body content using the rich text editor. Supports the same [] highlight syntax.
Highlight effect & Text transform: Same options as the section level — applied to this card's text content.
Button label & Button link: Add a clickable button to the card. Toggle Open this link in a new tab if needed.
Button style: Choose Primary or Secondary.

STEP 4: Click "Save".

🤔 How to adjust the Text with image cards layout?

STEP 1: Click on the Text with image cards section to open its settings panel.

STEP 2: Configure the card style

Under the Card group, set the following:

Layout: Choose how the image and text are arranged within each card:
- Vertical — Image sits on top of the text. Works with up to 4 columns on desktop.
- Horizontal — Image sits side-by-side with the text. ⚠️ Note: Horizontal layout caps at a maximum of 2 cards per row on desktop and 1 card per row on mobile, regardless of the column number settings.
Content alignment: Choose Left, Center, or Right to align the text content within each card.
Image style: Choose the shape/ratio of the card image — e.g., Square (1:1), Portrait, Round, etc.

STEP 3: Configure the desktop layout

Under the Desktop layout group:

Number of columns: Drag the slider to set how many cards appear per row on desktop (up to 4). If Horizontal layout is selected, this is automatically capped at 2.
Block spacing: Adjust the gap (in px) between cards on desktop.

STEP 4: Configure the mobile layout

Under the Mobile layout group:

Number of columns: Choose 1 or 2 columns per row on mobile. If Horizontal layout is selected, this is automatically set to 1.
Block spacing: Adjust the gap (in px) between cards on mobile.

STEP 5: Click "Save".

🤔 How to enable carousel for Text with image cards?

Want to save layout space and let customers scroll through cards? Here's how to enable carousel mode:

STEP 1: Click on the Text with image cards section to open its settings panel.

STEP 2: Scroll down to the Carousel group and toggle the options you need:

Enable carousel on desktop 🖥️: Turns the grid into a scrollable carousel on desktop.
Enable swipe on mobile 📱: Allows customers to swipe through cards on mobile.

STEP 3: (Optional) Set Auto-play every to a value between 1–10 seconds to make the carousel advance automatically. Leave it at 0 to disable auto-play and let customers navigate manually.

STEP 4: Click "Save".

🤔 What customization options can you give your Text with image cards?

For the whole Text with image cards section:
✨ Change the color scheme	Click on the Text with image cards section, scroll to the Colors group, and choose a Color scheme (light) and Color scheme (dark) for the section's overall appearance.
✨ Add a background color to each column	Click on the Text with image cards section, scroll to the Colors group, and set Column background (light) and Column background (dark) to apply a distinct background color to each card column — useful to visually separate cards from the section background.
✨ Change the section heading size	Click on the Text with image cards section and choose Heading size to be Small, Medium, or Large.
✨ Change the heading tag (for SEO)	Click on the Text with image cards section and choose a Heading tag from the dropdown (H1 through H6 or paragraph).
✨ Change the heading alignment	Click on the Text with image cards section and choose Heading alignment to be Left, Center, or Right.
✨ Change the section width, padding, or add a divider	Click on the Text with image cards section and scroll down to the Section layout group to adjust Section width, Top padding, Bottom padding, and toggle Show section divider.
For a single Card block:
✨ Make the card image clickable	Click on the Card block and paste a URL or search for a page in the Image link field. Optionally toggle Open this link in a new tab ON.
✨ Change the card heading size	Click on the Card block and choose Heading size to be Small, Medium, or Large. This is independent from the section-level heading size.
✨ Change the button style	Click on the Card block and set Button style to Primary or Secondary.
✨ Open the button link in a new tab	Click on the Card block, scroll to the Button link field, and toggle Open this link in a new tab ON.

Need help? Contact our support team at Omni Themes Support.