The Product info section is the main part of your product page. It shows the product images on one side and the product details (name, description, and order form) on the other. It is required on the product page, so you can style it but you cannot delete it.
Where to find it
- Open the builder and choose Product page in the Pages tab.
- Pick a product to preview. This only changes what the preview shows: your design applies to all products at once.
- Click Product info in the preview or in the Sections tab.
The section has two fixed parts, Media and Details. You cannot remove or move them, only set them up. On phones they stack: images first, then details.
Section settings
- Section width: Page keeps the content at your page width, Full goes edge to edge.
- Equal columns: on, the images and the details each take half of the width. Off, each column takes the room it needs.
- Color scheme, Gap (space between the two columns), padding, and Custom CSS.
Media: the image gallery
Shows the photos and videos you added to the product.
- Mode: Carousel (one image at a time) or Grid (all images at once).
- Sticky: Off, Desktop, Mobile, or Both. A sticky gallery stays in view while shoppers scroll the details.
- Grid: Columns (1 or 2), Gap, and Full width first (the first image spans both columns).
- Carousel: Navigation icons (Arrows, Chevrons, or None), Icon background, Desktop pagination (Dots, Counter, Thumbnails), and Mobile pagination (Dots, Counter, Hint, Thumbnails). Hint shows a peek of the next image.
- Thumbnails: with thumbnails on desktop, set Desktop position (Left, Bottom, Right) and Desktop size. On phones they always sit under the image.
- Aspect ratio: Auto keeps each image's own shape. With Portrait, Square, or Landscape, Media fit picks Cover (fill and crop) or Contain (show the whole image).
- Enable zoom: shoppers click or tap an image to see it full screen.
Details: the blocks next to the images
Details has a Gap and Sticky on desktop (the column stays in view while shoppers scroll past the images). Select it and click Add new block to add blocks, and drag them into any order.
- Title: the product name, once per page. Set Width, Alignment, Preset, Line height, and Letter spacing. Show above image on mobile moves the name (with its rating) above the gallery on phones. Show reviews above title puts the star rating over the name.
- Description: the text from your product. Set line height and letter spacing. With Click image to scroll on, a click inside the description scrolls to the order form when no form is on screen. Links still work.
- Form: the price, variants, and buy button. Its options are in How do I set up the Landing info section and the order form (buttons, countdown, WhatsApp)?
- Divider: up to 2 lines between blocks.
- Collapsibles, Delivery timeline, Size guide, Badges, and Before and after: see How do I add collapsible tabs, delivery dates, a size guide, badges, or before and after images to my product page?
Form and Description are required: you can move them but not delete them.
Sticky button
Keeps a way to buy on screen once shoppers scroll away from the order form. It hides again while any form is visible. Mode:
- None: no sticky element.
- Bar: a bar at the bottom with the price, quantity, and buy button.
- Button: a floating button that scrolls to the form. Set Label (empty uses your buy button text), Style (Primary or Secondary), Position (Start, Center, End), and Animation (Pulse, Heartbeat, Shake, Bounce, Glow, Ripple, Wiggle, or None).
- Image: a floating image of your choice that scrolls to the form, with Position and Animation.
In the builder the sticky element shows while the section is selected, so you can style it.