Product details
The section provides options to change the layout of a product page.
Product details
Use sticky columns Pin product details in the viewport when scrolling down to the end of the product gallery.
Information column
Mobile text alignment The product information (such as title, price, SKU, product type, collection, inventory status, stock, and question pop-up, share, and pop-up) can be aligned to the left or center on mobile view by selecting the required option in the picker.
Gallery
Desktop layout Select the image gallery layout on the desktop.
Note! The following options can be applied to host the image gallery. Using one of these options launches a preview of product images assigned to product variants in the admin. Clicking on a color option will switch the first image to the corresponding one. Product variants can not be changed by selecting an image in the gallery.
"First image only". Use the option to display the main image from the product gallery regardless of the number of images assigned to a product in the admin.
"Stacked". Displays the main product image across the media width, with two additional images in each row displayed below.
View the "Stacked" layout on the DEMO.
"Full-stacked". Shows product images in a full media width, one below the other.
The "Full-stacked" layout can be viewed on the DEMO.
"2 columns". This layout shows two images in each row.
"Thumbnails". The image gallery displays below the main image.
View the "Thumbnails" layout on the DEMO.
"Thumbnail carousel". Use the option to show an image carousel instead of a thumbnail list underneath the product image.
Thumbnails per row Change the number of visible thumbnails in the carousel by setting the desired value on the provided scale, ranging from 4 to 10.
The "Thumbnail carousel" layout can be viewed on the DEMO.
"Vertical thumbnail carousel". The product gallery will be moved to the left of the main image and displayed as a vertical carousel.
View the "Vertical thumbnail carousel" layout on the DEMO.
Mobile layout Select the desired option in the drop-down to specify the product gallery layout on mobile devices.
1 column:
"First image only". Use the option to display the main image from the product gallery regardless of the number of images assigned to a product in the admin.
"Bullets". The current option displays product gallery navigation as markers. The number of bullets indicates the number of available product images. Note! This option sets bullets in a line and is a good solution for product galleries with a limited number of product images.
"Thumbnails". To show the image gallery below the main image, select the provided option.
View the layout example on the DEMO.
"Arrows". Shows navigation arrows on the sides below the main image, with the image counter displayed in the center.
2 columns:
"Bullets". Product images are arranged two per row and alternate when a marker is clicked. Image navigation is accomplished using markers, each indicating a new page to view.
"Arrows". The last option shows the image gallery with two items per row. Image navigation is accomplished by switching images one at a time in a pagination style based on the number of media available in the gallery.
Media
Width Adjust the width of the screen filled with a product gallery using the scale, which varies from 40% to 60%. This function determines the size of the image gallery relative to the product information.
Position Swap the image gallery to the left or right. The option applies to the desktop view.
Fit Using the "Original" or "Fill" option in the picker, limit the main product image size to fit the screen.
Constrain to screen height Controls how the populated area displays a main product image: either in its original size or filling the entire media width.
Video
Loop video Enable the option to display a video continuously. Note! Works for a product gallery that includes a video.
Zoom scale
Enable To modify the image zoom on the desktop, activate the option.
Zoom factor Use a scale from 1 to 5 with increments of 0.1 to 0.9 points. Leaving the default value of 1 disables image scaling.
Lightbox
Enable The full-width image gallery can be used when the option is enabled. The zooming logo is placed at the bottom of a product image on all screen sizes. To view the logo on the desktop view, hover over a product image. The zoom-in icon is designed to appear on mobile without mouse hover.
Variants selection
After variant selection Use the option to group product images by the selected product variant. To deactivate this functionality, select the "Do nothing" option.
Note! If you use one of the options described below, first group images by product variants in your Shopify admin -> Products. Read the detailed instructions on the help page.
"Hide media for other variants". This option is relevant if each color variant includes a single image added in your admin. To hide images of unwanted color variants, select the current setting from the drop-down. Otherwise, all product images will be displayed in the gallery. The product variant images can be replaced with the appropriate ones when you select another variant.
"Group media by option". Group product images by the selected color variant. Images related to another color variant will be hidden. Initially, when landing on a product page, all product images will be displayed in the gallery. This functionality is activated by clicking the color swatch.
View the example on the DEMO.
"Group by 'group-gallery' tag". This option works the same as the "Group media by option", with one exception: you can specify products in your admin to use this functionality. Activate the option for a desired product using the tag 'group-gallery' in your Shopify admin -> Products. This option is unavailable for products without a custom tag.
Sidebar
Width Adjust the sidebar width to the specified parameters, ranging from 280 to 480 pixels. Add sidebar content using the provided blocks.
Layout options
Dividing line Use the drop-down to specify whether to add the line separator at the top or bottom of the "Product information" section. To display the line, select its position as "Top", "Bottom", or "Both". To hide the dividing line, use the "None" option.
Top spacing Controls the space between the breadcrumbs or Header (if the breadcrumbs are disabled) and the "Product details" section. Use the scale from 0 to 100 pixels to set the desired parameter.
Bottom spacing Use a value from 0 to 100 pixels to adjust the bottom space of the "Product details" section.
The following examples show how the product page might display on desktop and mobile:
Theme Blocks
Tip: Product information displays for products with the configured settings in your Shopify admin -> Products. Read more about setting up products and collections in the admin here.
The product page can be customized using the content blocks:
Static blocks
Gallery
Dynamic blocks
Tip: Use dynamic blocks to display only the selected product information. Change the position of each block by dragging it up or down to the desired place in the product information section.
Tip: Decide on the visibility of product tabs using theme sections and blocks.
Collapsible tabs. Display product information in expandable tabs by adding the "Collapsible tab" block. Note! Content is placed in the product information section.
Horizontally stacked. Add the "Tabs" block to show content in the horizontally stacked layout. Note! Content is placed in the product information section.
Horizontally stacked below the product gallery. Add the "Tabs" section to display content in the horizontally stacked layout below the product gallery.
Tip: To add a block, select the "Product details" section and press "Add block". Then, select the desired block from the list.
Tip: Hide unnecessary blocks by clicking the eye icon. The icon appears when you hover over a block.
Tip: Some blocks contain fields to link content using metafields. Press the dynamic source icon to add a metafield. Read the initial documentation for the required steps to build a metafield in your admin.
Last updated