The Product page section in a Shopify theme is a core component that displays detailed information about a specific product. This section supports displaying a variety of elements such as images, variations, prices, descriptions, add to cart buttons, and other relevant information. The ability to customize the layout, integrate additional features through app blocks, and ensure a smooth user experience on all devices
Step 01: From Shopify Admin, click on Online Store > Select Theme > In the Current theme section, click the Customize button.
Step 02: In the theme editor (Customize), click to open dropdown pages in the topbar > select Products > select Default product
Step 03: In the Sections tab, scroll and find Product Page in Template
You can change the preview product
In the Sections tab > find Preview & click Change button > search & choose a product you want preview
Once you add the Product Page section, you can customize its settings in the left or right sidebar (depending on your screen size)
Make section full width: Extend the width of the product section to fill the entire screen width, creating a spacious and prominent layout.
Color scheme: Select the overall color scheme for the product section, including background color, text color, and other elements, ensuring aesthetics and brand consistency.
Show breadcrumb: Display the breadcrumb navigation, helping customers easily track their current location on the website and navigate back to previous pages.
Hidden breadcrumb on mobile: Hide the breadcrumb navigation on mobile devices to save screen space and improve the mobile user experience.
Section padding
Top padding (Desktop/Mobile): Creates space above the content within an element, separating it from elements above and improving visual layout.
Bottom padding (Desktop/Mobile): Creates space below the content within an element, separating it from elements below and improving visual layout.
Pick Mode: Select the method of selecting the displayed product variants, can be no pick, pick first variant or pick first available variant
Hide sold out variants: Hide out-of-stock variants (not applicable for sold-out products), ensuring customers only see available options.
Page width: Defines the maximum width of the product content, controlling layout and ensuring optimal display across devices.
Use on sale badge: Displays an "on sale" badge on discounted products, attracting attention and indicating offers.
Use new badge: Displays a "new" badge on newly launched products, helping customers identify new items
Automatic "New" badge period: Set the number of days to automatically display the "new" badge on products after creation, automating the process of marking new items.
Use pre order badge: Displays a "pre-order" badge on upcoming products, allowing customers to place pre-orders.
Use sold out badge: Displays a "sold out" badge on out-of-stock products, informing customers of product availability.
Use collection link on vendor: Replace the vendor link with a collection link (requires a collection with the same name as the product's vendor), helping customers explore products by collection.
Enable history State: Update history state for product deeplinking shopify. It’s possible to create a deep-link directly to a specific variant by adding a query string to a product page URL. You can achieve this by appending the ?variant= query parameter to the URL of the product, along with the ID of the variant. Not working when product variant is No Pick.
Modal/drawer/popover color scheme: Select the color scheme for pop-up windows, drawers, or popovers, ensuring aesthetics and consistency with the overall design.
Allows users to customize by adding CSS rules, beyond the limitations of default settings. This allows for fine-tuning the design to every detail, to suit specific needs.
Add custom styles to this section only.
To add custom styles to your entire online store, go to theme settings
Clicking on the Media title under Product page section, you can customize that section's settings in the left or right sidebar (depending on your screen size)
Visible if certain conditions are met
Media
Show first media: Displays the product's first media (e.g., image, video) until customers select a specific variant, providing an initial visual.
Enable media autoplay: Enables media autoplay (videos are automatically muted to allow autoplay), displaying videos immediately upon page load.
Enable video looping: Enables video looping, allowing videos to play continuously.
Image ratio: Adjust the aspect ratio of product images, ensuring images display beautifully and propotionally (Adapt to image, Square, ASOS, Portrait, Lanscape, Custom)
Desktop
Layout: Select the display layout for product media (thumbnails left, thumbnail buttons, bars bottom), customizing how images and videos are shown.
Width: Define the width of the product media section, with width automatically optimized for mobile devices.
Space between media and product info: Adjust the spacing between product media and product information, with spacing automatically optimized for mobile devices.
Position: Select the display position of the product media section (left, right), with position automatically optimized for mobile devices.
Mobile
Layout: Select the display layout for product media on mobile (Dots, Counter, Thumbnails), customizing how images and videos are shown. ****
Image zoom
Zoom won't show video or 3D models
Image zoom: Select the image zoom style (hover zoom, click open lightbox, hover zoom and click open lightbox, no zoom). Lightbox mode is forced on touch devices.
Image hover zoom type: Select the hover zoom style (inner zoom, magnifier, external zoom), customizing how the image is displayed when zoomed.
Zoom level of zoom hover: Adjust the zoom level when hovering, controlling the image magnification.
Max zoom level of lightbox: Adjust the maximum zoom level when viewing the image in the lightbox, controlling the image magnification.
Clicking on the Information title under Product page section, you can customize that section's settings in the left or right sidebar (depending on your screen size)
Visible if certain conditions are met
No customizable settings available.
To add Badges block to the Information block, click the Add item button (plus icon ➕) under the Information.
Once the Badges block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Uppercase: Convert the heading text to uppercase, creating emphasis and prominence.
To add Vendor block to the Information block, click the Add item button (plus icon ➕) under the Information.
Once the Vendor block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
The badge will inherit its styling — such as font size, color,... — based on the Body section settings configured in the Theme settings.
No customizable settings available.
To add Title block to the Information block, click the Add item button (plus icon ➕) under the Information.
Once the Title block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
The Title will inherit its styling — such as font size, color,... — based on the Heading section settings configured in the Theme settings (Title use H5 size)
No customizable settings available.
To add Price block to the Information block, click the Add item button (plus icon ➕) under the Information.
Once the Price block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
The Price will inherit its styling — such as font size, color,... — based on the Body section settings configured in the Theme settings.
No customizable settings available.
To add Variant picker block to the Information block, click the Add item button (plus icon ➕) under the Information.
Once the Variant picker block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Color
Color selector type: Select the display style for the color selector (block, block with color swatch, list, color swatch, color swatch rectangle, dropdown, dropdown with color swatch, variant image), customizing the color selector interface.
Selector type: Select the display style for the product variant selector (block, list, dropdown), customizing the product variant selector interface
Size chart
Only show with size option.
Size chart source: Select the source for displaying the product size chart (page or image), customizing how size information is shown
Page size chart: Select the page containing the product size chart information, displaying content from the selected page.
Image size chart: Upload an image containing the product size chart information, displaying the uploaded image.
Block name: Enter a name for the content block (for internal use only, not displayed on the storefront), helping to manage and distinguish content blocks in the editor.
To add Inventory status block to the Information block, click the Add item button (plus icon ➕) under the Information.
Once the Inventory status block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Low inventory threshold: Set the low inventory threshold; when the product quantity falls below this threshold, a warning will be displayed. Choose 0 to always show "in stock" if available.
Show inventory count: Display the remaining product quantity in stock, providing customers with information about product availability.
Show progress bar: Display a progress bar indicating the remaining product quantity, helping customers visualize the stock status.
Progress bar max value: Set the maximum value for the progress bar, defining the display range of the progress bar.
For pre-order products, the inventory will appear in yellow and will not show a quantity.
For low stock threshold products, the inventory status will be displayed in red and include the quantity.
For Out of stock products, the inventory will appear in red and will not show a quantity.
For In stock products, the inventory status will be displayed in green and include the quantity.
To add Description block to the Information block, click the Add item button (plus icon ➕) under the Information.
Once the Description block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Layout: Select the display layout for the product description (full description, read more, collapsible), customizing how product information is shown.
Maximum height (Only applicable for layout of type read more.): Set the maximum height for the description when using the "read more" layout, controlling the initial display height of the description.
To add Quantity block to the Information block, click the Add item button (plus icon ➕) under the Information.
Once the Quantity block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
The quantity selector is automatically hidden if product are sold out.
To add Buy buttons block to the Information block, click the Add item button (plus icon ➕) under the Information.
Once the Buy buttons block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Add to cart button style: Select the display style for the "Add to cart" button (solid or outline), the "Outline" style is only available when dynamic checkout buttons appear.
Uppercase text: Converts the text on the "Add to cart" button to uppercase, creating emphasis and highlighting the button.
Show dynamic checkout buttons: Displays dynamic checkout buttons, allowing customers to quickly checkout using their preferred payment methods (e.g., PayPal, Apple Pay).
Show recipient information form for gift cards: Displays the recipient information form for gift cards, allowing buyers to send gift cards on a scheduled date with a personal message.
To add Icon with text block to the Information block, click the Add item button (plus icon ➕) under the Information.
Once the Icon with text block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Layout: Select the display orientation for elements (horizontal or vertical), customizing the website layout.
Items
If all three options - Icon, Custom image icon and Custom SVG icon - are added, the priority order will be: Custom SVG icon > Custom image icon > Icon
Icon (Select "none" will hide the column or row): Select an icon from the available library to display, enhancing visual appeal and conveying messages quickly.
Custom SVG icon: Use SVG icons from libraries like Remixicon or Tabler Icons, ensuring sharp image quality and scalability.
Custom image icon (200 x 200px .png recommended): Upload your own custom image icon, enabling personalization and brand alignment.
Text: Enter the text content to display, conveying information or messages to users.
How to get an SVG icon?
Step 1: Click the link Get a svg remixicon, or tabler icons under Custom SVG icon option
Step 2: Search icon you want > Click the icon > click Copy SVG button
Step 3: Go back to theme customize and paste SVG icon into the field
To add Collapsible row block to the Information block, click the Add item button (plus icon ➕) under the Information.
Once the Collapsible row block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Heading: Enter a heading to explain the content of the section, providing a clear and attention-grabbing title
Row content: Enter text content for the row, allowing customization of the displayed information in the row.
Row content from page: Select a page to retrieve content for the row, displaying content from the selected page.
Standalone: Display the row content independently, not linked to other rows.
To add Complementary products block to the Information block, click the Add item button (plus icon ➕) under the Information.
To select complementary products, add the Search & Discovery app.
1. How to display complementary products?
Step 1: Install [ Shopify Search & Discovery] app
Step 2: From Shopify Search & Discovery app > click open Recommendations tab > In the search bar, enter the product name you’re looking for > click to open that product
Step 3: After opening the product, use the search bar to find the desired product or click the Browse button to select it manually.
2. How to customize complementary products block?
Once the Complementary products block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Heading: Enter the heading for the Complementary products, providing a clear and attention-grabbing title.
Carousel style: Select the display style for the Complementary products (list or single), customizing how products are shown in the carousel.
Maximum products to show: Limit the number of products displayed
Auto-rotate: Enable/disable the auto-rotate mode for the product carousel, allowing the carousel to automatically switch products.
Change every: Set the time interval (in seconds) for the carousel to automatically switch products, controlling the transition speed.
Pause on hover: Enable/disable the pause on hover mode for the carousel, allowing users to stop the carousel to view products more closely.
Product card
Image ratio: Adjust the aspect ratio of product images, ensuring images display beautifully and propotionally (Adapt to image, Square, ASOS, Portrait, Lanscape, Custom)
Enable quick view: Enable/disable the quick view feature, allowing customers to see product details in a pop-up window without leaving the page.
Hover overlay opacity: Adjust the opacity of the image overlay on hover, controlling the brightness/darkness of the overlay effect.
To add Custom liquid block to the Information block, click the Add item button (plus icon ➕) under the Information.
Once the Custom liquid block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Liquid code: Allows you to insert custom Liquid code, app snippets, or other code to implement advanced customizations for the website.
Example:
`<span class="icon">
<svg width="24" height="24" color = "#E3A82D" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" fill="currentColor">
</svg>
</span>`
To add Intallments banner block to the Information block, click the Add item button (plus icon ➕) under the Information.
Once the Intallments banner block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
To display installments banner, your store needs to support Shop Pay Installments.
To add Line item property block to the Information block, click the Add item button (plus icon ➕) under the Information.
Once the Line item property block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Line item properties are used to collect customization information for an item added to the cart.
Label: Enter the label text for the data field, providing a clear description of the field's purpose.
Type: Select the data entry type for the field (text, checkbox, options), defining how users interact with the field.
Required: If you use required, then the customer must write a text (for text property) or tick the box (for checkbox property and options radio) to add to the cart.
Show at checkout and cart page: Uncheck this if you don't want the captured information to be shown in the order summary on the cart, checkout page.
Text
Only applicable for line item property of type Text.
Text type: Select the text input type (short or long), defining the size of the text input area and its intended use.
Maximum number of characters: Set the maximum number of characters allowed in the text field, controlling the length of the input content.
Checkbox
Only applicable for line item property of type Checkbox.
Value: Appears on the order when checked.
Options
Only applicable for line item property of type options.
Options type: Select the display style for the options (dropdown select or radio buttons), customizing how users select options.
Options: Enter the options, each option on a separate line, defining the available choices for the user.
To add Pickup availability block to the Information block, click the Add item button (plus icon ➕) under the Information.
Once the Pickup availability block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Engage local shoppers by showing where items are available for pickup — right from the product page.
How to set up the local pickup?
Step 1: From the main screen of your Shopify store, click the Settings tab in the left sidebar > navigate to and open the Locations > click Add location if you haven't set up a shipping location yet, or select and open an existing location if one is already available.
Make sure you tick on the Fullfillment (Use inventory at this location to fulfill online orders) checkbox
Step 2: Still in the Settings tab, go to the Shipping & Delivery section > scroll down to Pickup in store > click on the store you want to configure for pickup > check the box for Location status (Let customers pick up orders directly at this location) > set the expected pickup time, for example: Usually ready in 2 hours.
Don't forget to configure the Ready for pickup notification, your customers will read this information to know the time they can go to the store to pick up the products
The result: you will see the location store shows the Offers pickup tag.
To add Pop-up block to the Information block, click the Add item button (plus icon ➕) under the Information.
Once the Pop-up block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Link label: Enter the label text for the link, providing a brief description of the link's destination.
Page: Select the page to open pop-up, specifying the webpage that users will be taken to upon clicking the link.
To add Separator block to the Information block, click the Add item button (plus icon ➕) under the Information.
Once the Separator block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
No customizable settings available.
To add Connect & Share block to the Information block, click the Add item button (plus icon ➕) under the Information.
Once the Connect & Share block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Position: Select the display position of the element (left or right), customizing the website layout.
Contact
Enable contact form: Enables/disables the contact form, allowing users to send messages or request information through the website.
Show contact form phone input: Displays the phone number input field in the contact form, allowing users to provide contact information via phone.
Share
Enable social share is a feature that allows users to share content from your website to various social media platforms.
To add SKU block to the Information block, click the Add item button (plus icon ➕) under the Information.
Once the SKU block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
No customizable settings available.
To add Tax & shipping info block to the Information block, click the Add item button (plus icon ➕) under the Information.
Once the Tax & shipping info block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
No customizable settings available.
