1. What is Product Three Columns?
The Product three columns section is a dedicated product page template that presents your product content in a structured three-column layout: a Media gallery on the left, Product information (containing product details and purchase options) in the center, and a customizable Third column on the right for supplementary content such as promotions, trust badges, or social data.
2. Section Components
| Level | Name | Description |
|---|---|---|
| Section | Product three columns | A three-column product page layout that maximizes space for showcasing product features and details. |
|
1st-level blocks (Add directly inside the section) |
Media gallery | Displays the product's images, videos, and 3D media in the left column. |
| Product information | Container block in the center column that holds the Product details and Product purchase sub-blocks. | |
|
2nd-level blocks (Add inside Product information blocks only) |
> Product details | Houses all product information blocks such as title, price, variant picker, buy buttons, and more. |
| > Product purchase | Contains purchase-related blocks such as discount badge, inventory status, and items list. |
3. Location & Setup
1. Go to "Online Store" > "Themes" > "Customize".
2. Click the page dropdown and navigate to the product page you want to customize.
3. Click "Add Section".
4. Search for Product three columns and click to add.
⚠️ Note:
- Only one Product three columns section can be added per page.
- If you use this Product three columns section, we recommend to remove the Product information section to advoid confusion for your customers.
4. Highlight Features
- Three-column layout that maximizes product page real estate on desktop.
- Fully configurable media gallery with zoom effects, video autoplay, and sound control.
- Independent alignment and spacing controls for each column block.
5. Common Use Cases
🤔 How to add Product Three Columns to your product page?
Want to replace the standard product page with a feature-rich three-column layout? Here's how:
Step 1:
◦ Navigate to the product page template you want to use. (clicking on Homepage dropdown on the top > Products > choose the template)
◦ Click "Add Section", search for Product three columns, and click on it.
That's it! The section is ready to use as soon as you add it - no extra configuration required.
The section will immediately display your product's media gallery, product information, and purchase options in a three-column layout using your store's default settings.
Step 2: (Optional) You can control the position of the media gallery - click the Product three columns section, scroll to Section layout, and switch Desktop media gallery position between Left and Right.
🤔 How to customize which product details are shown?
Want to control exactly what information appears in the center column - such as showing a countdown timer, hiding the rating, or reordering content? Here's how:
Step 1: Open the Product details block.
◦ In the left panel, expand Product information and click on Product details.
Step 2: Add or remove content blocks.
◦ Click "Add block" inside Product details to add new content.
◦ Available blocks include: Product title, Price, Rating, SKU/Barcode, Variant picker, Buy buttons, Countdown timer, Estimated delivery time, Text, and more.
◦ To remove a block, click on it and select the delete option.
◦ Drag blocks to reorder them.
Step 3: Fine-tune alignment.
◦ Click Product details and adjust Horizontal alignment (Left, Center, Right) for desktop 🖥 and mobile 📱 separately to control how content is aligned within the column.
6. Other Customization Options
For the whole Product three columns section:
|
What you can do |
How |
|
✨ Change color scheme |
Click the Product three columns section and choose Color scheme (light) and Color scheme (dark). |
|
✨ Show/hide breadcrumbs |
Click the section and toggle Show breadcrumbs. |
|
✨ Change section width |
Click the section, go to Section layout, and choose Page width, Full width padded, or Full width. |
|
✨ Move the media gallery |
Click the section, go to Section layout, and set Desktop media gallery position to Left or Right. |
|
✨ Adjust padding or add a divider |
Click the section and use the Padding sliders (default 28px top/bottom) or toggle Show section divider in Style. |
For the Media gallery block:
|
What you can do |
How |
|
✨ Change image aspect ratio |
Click Media gallery and choose Media ratio: Square (1:1), Landscape (4:3), Wide (16:9), Portrait (2:3), or Standard (3:4). |
|
✨ Set zoom effect on images |
Click Media gallery and choose Zoom effect: None, Magnifier (hover zoom), or Enlarge (click to open popup). On mobile 📱, popup zoom always applies for Magnifier and Enlarge. |
|
✨ Control video autoplay and sound |
Click Media gallery and toggle Enable video autoplay and Show sound control. |
|
✨ Adjust gallery width |
Click Media gallery and adjust Desktop width (20–80%, default 40%). |
For the Product details and Product purchase sub-blocks:
|
What you can do |
How |
|
✨ Control alignment |
Click the sub-block and set Vertical alignment (Top, Middle, Bottom) and Horizontal alignment (Left, Center, Right) for desktop 🖥 and mobile 📱 separately. |
|
✨ Add a border |
Click the sub-block, scroll to Style, and toggle Show border (desktop) or Show border (mobile). |
|
✨ Change color scheme |
Click the sub-block and choose Color scheme (light) and Color scheme (dark). |
|
✨ Add inner spacing |
Click the sub-block, go to Inner Spacing, and set Inner vertical and Inner horizontal. Switch between Desktop and Mobile to configure each separately. |
7. Change Logs
• Version 1.5.0: Product three columns section first introduced.
8. Support Information
Need help? Contact our support team at Omni Themes Support
