Image with table
What is the Image with table section?
The “Image with table” section pairs an image with text-based content, allowing you to display structured information such as features, details, or specifications next to a visual. The table is created directly using simple text formatting and is limited to two columns, making it ideal for clear, readable layouts without the need for apps or custom code. This section works well for presenting information in an organized, visually balanced way alongside an image.
Main settings
General
- Heading: Set the title for the image with text section to introduce the content.
- Use rich text field for heading: Enable a rich text heading to choose the heading level (H1–H6) for SEO purposes and connect dynamic sources if needed.
Desktop Layout
- Desktop layout: Choose the layout for desktop devices (options: Image first, Text first).
- Desktop percentage image width: Adjust the percentage width of the image on desktop devices.
- Make section full width: Enable this setting to make the section span the entire width of the container.
Section Height
Height
- Height: Choose between adapting the height to the image or setting a fixed height.
- Desktop fixed height: Adjust the fixed height for desktop view.
- Mobile fixed height: Adjust the fixed height for mobile view.
Colors
- Heading color: The 'Transparent' value is the default and subsequently inherits the value from the global settings.
- Section background color: The 'Transparent' value is the default and subsequently inherits the value from the global settings.
- Background opacity: Adjust the opacity of the background color.
- Text color: The 'Transparent' value is the default and subsequently inherits the value from the global settings.
- Text container color: The 'Transparent' value is the default and subsequently inherits the value from the global settings.
- Background opacity: Adjust the opacity of the text container background color.
Large Screen Version
Image
- Image: Select an image for the large screen version of the section.
Large Screen Text Alignment
- Large screen text alignment: Choose the alignment of the text on the section for large screens (options: Top, Center, Bottom, Left, Center, Right).
Mobile Version
Image
- Image: Select an image for the mobile version of the section.
Mobile Screen Text Alignment
- Mobile screen text alignment: Choose the alignment of the text on the section for mobile screens (options: Left, Center, Right).
Section Spacing
- Distance from the top: Adjust the spacing from the top of the section.
- Distance from the bottom: Adjust the spacing from the bottom of the section.
Customize heading block
Click one of the preloaded heading block to customize it.
Customize text block
Click one of the preloaded text block to customize it.
Customize table block
Click on the preloaded table block to customize it.
Table block lets you add a simple two-column table using a multiline text input.
How to set up the table:
- In the multiline metafield field or directly in the theme editor, start writing your table.
- The first line is the header for the left column.
- The next line(s) are the content for the right column, which can span multiple lines.
- Separate each table row with one empty line.
Customize button block
Click one of the preloaded button block to customize it.
Customize Icon with text block
Icon with text block allows you to display an icon next to text, making it perfect for creating custom bullet points or highlighting key information.
Customize Countdown timer block
The Countdown Timer block is a dynamic feature designed to create urgency and encourage customer action by displaying a countdown to a specific date and time. This block is perfect for highlighting limited-time offers, upcoming events, or product launches. It helps drive engagement and motivates customers to act before the timer expires.
Customize Spacer block
Spacer block lets you add spacing between blocks, allowing for a more flexible and visually balanced layout.
Mobile view example
