Product Information
From your Shopify admin, go to Online Store -> Themes.
Find the theme that you want to edit, and then click Customize.
Choose Products from the dropdown window.
Section settings
General
Section width
Select the layout width of the whole section. The options are: Default (same as the body width) Width (1170px) Width (1770px) Full width (100% of the viewport width)
Padding for 'full width' option on desktop
Determine the left and right spacing of the full width layout.
Enable sticky Product information on desktop/tablet.
Enable sticky Product information on desktop/tablet.
Media
Learn more about media types
Media fit
Select the main image crop type. There are 3 types: Original: The image will keep its current scale ratio to adapt. Fit content: The image will scale to cover up the full area of set product card image with retained ratio. Fill: The image will scale to scale up until the width or height reached the width or height of the set product card image with retained ratio. Note: Learn more about media fit.
Product image ratio
Select the desired ratio of the image: Adapt to image (the original image width and height are adopted) Portrait (the image is cropped to be portrait) Square (the image is cropped to be square)
Portrait aspect ratio
Determine the ratio between the width and height of the image. Note: Only applicable to the portrait option of the product image ratio setting.
Video layout
Select the layout for video media. There are 2 options: Thumbnails Popup
Enable zoom image
Enable the use image zoom function when hovering over the image.
Zoom image style
Select the style for the zoom image function. There are 2 options:
Cursor
Enable custom cursor
Enable the use custom cursor when hovering over the image. Note: When the 'Enable custom cursor' setting is enabled, the Image Zoom feature will be disabled.
Icon color
Set the color for the icon.
Main images
Main image position
Select the display position of the main image. There are 2 options left or right.
Layout
Select the layout for the main image. There are 3 options: Style 1 Style 2 Style 3
Show navigation arrows on desktop
Enable to show navigation arrows on desktop.
Show navigation arrows on mobile
Enable to show navigation arrows on mobile
Show slide counter on mobile
Enable to show slide counter on mobile.
Show parallax on mobile
Enable to show parallax on mobile.
Show zoom icon on mobile
Enable to show zoom icon on mobile.
Thumbnails
Show thumbnails on mobile
Enable to show thumbnails on mobile.
Desktop layout
Select the display position of the thumbnail relative to the main image. There are 4 options:
Show thumbnails on the left
Show thumbnails on the right
Show thumbnails on the bottom Hide thumbnails
Maximum thumbnails to show
Determine the maximum number of images displayed on thumbnails.
Sidebar
The sidebar displays when blocks with the prefix [Sidebar] are added.
Enable sticky sidebar
Enable to show sticky sidebar.
Layout
Choose the layout for the sticky sidebar. There are 2 options: Layout 1 Layout 2
Collapsible block style
Choose the collapsing styles of the blocks on the sidebar. There are 3 options: Dropdown Swipe right (on mobile) None
Collapsible
Choose how to display blocks when the page first loads. There are 2 options: Expanded by default Closed by default
Position
Select sidebar position to display on left or right.
Block heading
Font family
Set font family for heading.
Font size
Set font size for heading.
Font weight
Set font weight for heading.
Text style
Set text transform for heading.
Badge
Show product badges
Enable to show product badges.
Quantity
Show subtotal
Enable to show subtotal.
Style
Select the style for subtotal. There are 2 options: Style 1 Style 2
Sticky add to cart
Enable sticky add to cart
Enable to show sticky add to cart.
Style
Select the style for sticky add to cart. There are 2 options: Style 1 Style 2
Always show sticky add to cart on Mobile
Enable to always show sticky add to cart on mobile. Note: Only applicable when the 'Style' setting is set to Style 1.
Show vendor
Enable to show the vender on sticky add to cart.
Quick order list
Show quick order list
Enable to show the quick order list.
Show images
Enable to show the images on the quick order list.
Show SKUs
Enable to show the SKUs on the quick order list.
Tabs
Show tabs
Enable to show the product tabs.
Desktop layout
Select the desktop layout for product tabs. There are 4 options: Vertical Vertical with sidebar Horizontal Popup
Mobile layout
Select the mobile layout for product tabs. There are 3 options: Vertical Vertical with sidebar Popup
Vertical layout style
Select the style for the vertical layout if you choose this option.
Tab titles
Font size
Set font size for the tab titles on desktop.
Font size on mobile
Set font size for the tab titles on mobile.
Font weight
Set font weight for the tab titles.
Text style
Set text transform for the tab titles.
Top/Bottom padding
Determines the height of the top and bottom inner space of the tab item.
Border color
Set the color for the border of tab titles. Note: Only applicable when the 'Style' setting is set to Style 1.
Border gradient color
Set the gradient color for the border of tab titles.
Product bundle
Enable Product Bundle
Enable to show the product bundle. Note: Learn more product bundle.
Background
Set the background color for the product bundle.
Title
Enter the title for the product bundle.
Title alignment
Select the alignment of the title to be either Left, Right, or Center.
Product items
Style
Select the style for product items.
Image ratio
Select the desired ratio of the image: Adapt to image (the original image width and height are adopted) Portrait (the image is cropped to be portrait) Square (the image is cropped to be square)
Discount
Enable bundle discount
Enable to show the bundle discount.
Text
Enter the text for more info. Note: Use [discount] to show the discount rate.
Text color
Set the color for more info text.
Add all to cart button
Label color - Border color - Background color - Background gradient - Label hover color - Border hover color - Background hover color - Background hover gradient
Set the text color, background, and border color for both the normal and hover states of the add all to cart button.
Slider layout
Show navigation dots
Enable to show the navigation dots.
Show navigation arrows
Enable to show the navigation arrows.
Top padding
Desktop
Determines the height of the top inner space of the section on the desktop device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).
Tablet
Determines the height of the top inner space of the section on the tablet device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).
Mobile
Determines the height of the top inner space of the section on the mobile device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).
Bottom padding
Desktop
Determines the height of the bottom inner space of the section on the desktop device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).
Tablet
Determines the height of the bottom inner space of the section on the tablet device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).
Mobile
Determines the height of the bottom inner space of the section on the mobile device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).
Top padding
Desktop
Determines the height of the top inner space of the section on the desktop device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).
Tablet
Determines the height of the top inner space of the section on the tablet device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).
Mobile
Determines the height of the top inner space of the section on the mobile device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).
Bottom padding
Desktop
Determines the height of the bottom inner space of the section on the desktop device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).
Tablet
Determines the height of the bottom inner space of the section on the tablet device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).
Mobile
Determines the height of the bottom inner space of the section on the mobile device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).
You can drag & drop all blocks in Product Information to arrange the position you want.
How to show brand/collection logo on the product detail page
Last updated
