Product information
Product information is the main product area. It shows the product media (images and videos) next to the product details. The details column can hold these blocks: Product heading, Badges, Product vendor, Price, Product description, Product rating, Product text, Buy buttons, Variant picker, Inventory status, Stock countdown, Product information, Complementary products, Collapsible row, Custom Liquid, Highlights, Promotion alert, Icon with text, Ask a question, Promotion countdown, Breadcrumb, Pickup availability, and app blocks.
How to add it
- In the Theme Editor, open the product template where you want the section.
- Select Add section, then choose Product information.
The package uses this section on the Product template and on the two product gallery templates (gallery left and gallery bottom).
Settings
View the section guide .
General
When Enable sticky add to cart on desktop is on, a bar with the product and its add to cart button stays fixed at the bottom right of the screen as the shopper scrolls.
| Setting | Options | Description |
|---|---|---|
| Enable sticky add to cart on desktop | Shows a floating add to cart bar with the product image, variant picker and buy button once the main buy buttons scroll out of view. The bar hides again near the footer. |
Media
Product layout on desktop sets how the media is arranged: one column, two columns, stacked, or with a horizontal or vertical thumbnail carousel. Media position set to Right puts the media on the right of the details on desktop. Image zoom: Inner zoom enlarges the image in place on hover, and Outer zoom shows the enlarged view beside the image. Enable image lightbox adds a zoom button to the images, which opens them in a PhotoSwipe lightbox.
| Setting | Options | Description |
|---|---|---|
| Product layout on desktop | • 1 column | How product media is arranged on desktop: a 1 or 2 column grid, a stack, or a main image with a horizontal or vertical row of thumbnails. |
| Media width on desktop | Share of the product area taken by the media on desktop. The product details use the rest. | |
| Media position | • Left | Places the product media on the left or the right of the product details. |
| Image zoom | • Disable | Zoom shoppers get when they hover over a product image: off, Inner zoom or Outer zoom. |
| Enable image lightbox | Lets shoppers open product images in a larger lightbox view and adds a zoom button to the gallery. | |
| Enable video looping | Repeats YouTube and Vimeo videos when they reach the end. Uploaded videos always repeat. | |
| Enable video autoplay | Videos are muted automatically to allow autoplay. Also works for YouTube and Vimeo videos. | |
| Enable custom video controls | Won't work for YouTube or Vimeo videos. | |
| Thumbnail layout on mobile | • Show thumbnails | Shows or hides the row of thumbnails under the main image on mobile. Only available with the thumbnail layouts. |
Appearance
| Setting | Options | Description |
|---|---|---|
| Color scheme | Edit color schemes in Theme settings. |
Section layout
| Setting | Options | Description |
|---|---|---|
| Section width | • Page width | Page width keeps the section inside the standard page container. Wide uses a wider container. Full width runs edge to edge. |
| Top padding | Space above the section. | |
| Bottom padding | Space below the section. |
Notes
- Videos play muted when autoplay is on, including YouTube and Vimeo videos. Custom video controls do not work for YouTube or Vimeo videos.
No comments yet