Product page
Overview:
The Product page is one of the most important pages on any store. It’s where customers can access in-depth information and learn about other products they might be interested in. More importantly, it’s where purchases are most frequently made, and as such, an effective Product page is essential for any Shopify store.
Section Configuration:
| Setting |
Description |
| Gallery View |
Choose how the product images are displayed. |
Breadcrumb Settings
| Setting |
Description |
| Show Breadcrumb |
A checkbox to toggle the display of breadcrumbs, defaulting to true. |
| Show Top Border |
A checkbox to toggle the display of the top border, defaulting to false. |
| Show Bottom Border |
A checkbox to toggle the display of the bottom border, defaulting to true. |
| Color Scheme |
A color scheme selector for the breadcrumb with a default value of "scheme2". |
Slideshow settings
| Setting |
Description |
| Show Navigation |
A checkbox to toggle the display of navigation arrows in the slideshow, defaulting to true. |
Color Scheme Settings
| Setting |
Description |
| Color Scheme |
Choose a predefined color scheme to ensure consistency with the store’s branding. |
Spacing Settings
| Setting |
Description |
| Top Padding |
Adjust the space above the section content. |
| Bottom Padding |
Adjust the space below the section content. |
Blocks Configration:
Stock box
| Setting |
Description |
| Show Stock |
Checkbox to show or hide stock information. |
| Text |
Inline rich text field for the stock box text. |
| Text Size |
Select field for the text size with options for small, medium, large, and extra large. |
| Bottom Margin |
Range field to set the margin below the block. |
Price and share
| Setting |
Description |
| Enable Share and Compare |
Checkboxes to enable or disable share and compare buttons. |
| Bottom Margin |
Range field to set the margin below the block. |
Title
| Setting |
Description |
| Heading Size |
Select field for the heading size with options from extra extra large to medium. |
| Bottom Margin |
Range field to set the margin below the block. |
Vendor and rating
| Setting |
Description |
| Text Size |
Select field for the text size with options for small, medium, and large |
| Bottom Margin |
Range field to set the margin below the block. |
Separator
| Setting |
Description |
| Bottom Margin |
Range field to set the margin below the block. |
Variation and SKU
| Setting |
Description |
| Show Variation and SKU |
Checkboxes to show or hide variation and SKU. |
| Bottom Margin |
Range field to set the margin below the block. |
| Setting |
Description |
| Show Subtotals |
Checkbox to show or hide subtotals. |
| Bottom Margin |
Range field to set the margin below the block. |
| Setting |
Description |
| Show Dynamic Checkout |
Checkbox to show or hide dynamic checkout buttons. |
| Show Gift Card Recipient |
Checkbox to show or hide the gift card recipient option. |
| Size Chart Image |
Image picker for the size chart image. |
| Bottom Margin |
Range field to set the margin below the block. |
WhatsApp Settings
| Setting |
Description |
| Show WhatsApp |
Checkbox to toggle the display of WhatsApp share button. |
| WhatsApp Number |
Text field for the WhatsApp number. |
| Custom Message |
Textarea for the custom WhatsApp message. |
Pickup Availability
| Setting |
Description |
| Show Pickup |
Checkbox to toggle the display of pickup options. |
| Enable Complementary |
Checkbox to toggle the display of complementary product recommendations. |
| Media Size |
Select field for the media size with options for adapt, square, portrait, and landscape. |
| Show Navigation |
Checkbox to toggle the display of navigation arrows in the slideshow. |
| Bottom Margin |
Range field to set the margin below the block. |
Message Box
| Setting |
Description |
| Heading |
Rich text field for the message box heading. |
| Text Size |
Select field for text size. |
| Bottom Margin |
Range field to set the margin below the block. |
Text
| Setting |
Description |
| Heading |
Rich text field for the text block heading. |
| Text Size |
Select field for text size. |
| Show Rating |
Checkbox to show or hide the product rating. |
| Bottom Margin |
Range field to set the margin below the block. |
Content
| Setting |
Description |
| Make Open Close |
Checkbox to toggle the collapsible functionality of the content block. |
| Open by Default |
Checkbox to open the row by default. |
| Heading |
Text field for the content block heading. |
| Bottom Margin |
Range field to set the margin below the block. |
Collapsible Row
| Setting |
Description |
| Heading |
Rich text field for the collapsible row heading. |
| Description |
Rich text field for the collapsible row description. |
| Open by Default |
Checkbox to open the row by default. |
| Bottom Margin |
Range field to set the margin below the block. |
Icon Description
| Setting |
Description |
| Image |
Image picker for the icon. |
| Heading |
Rich text field for the heading. |
| Description |
Rich text field for the description. |
| Bottom Margin |
Range field to set the margin below the block. |
Product recommendations:
If a customer redirects to a product page from your store, related products will be shown in the product recommendation. Based on the product currently being viewed, this section displays similar products, product with a similar description, or products that are frequently bought together with this product.
Note – The “ Product recommendations” section is only available on the default product and feature pages.
General Settings
| Setting |
Description |
| Heading |
Inline rich text field for the section heading. |
| Heading Size |
Select field for the heading size with options ranging from extra extra large to medium. |
| Description |
Inline rich text field for the section description |
| Text Size |
Select field for the text size with options for small, medium, and large. |
Grid Settings
| Setting |
Description |
| Number of Columns on Desktop |
Range field for the number of columns on desktop. |
| Number of Rows on Desktop |
Range field for the number of rows on desktop. |
| Number of Columns on Mobile |
Select field for the number of columns on mobile with options for 1 or 2 columns. |
| Mobile columns css query |
Range field to set the css query on mobile devices. Note- The query works using 'Mobile first'. |
Product Card Settings
| Setting |
Description |
| Media Size |
Select field for the media size with options for adapt, square, portrait, and landscape. |
| Button Layout |
Select field for button layout with options for none, enable add to cart, and show view details. |
| Show Discount |
Checkbox to toggle the display of product discounts. |
| Show Vendor |
Checkbox to toggle the display of product vendors. |
Layout Settings
| Setting |
Description |
| Section Text Alignment |
Text alignment selector for the section. |
| Mobile Text Alignment |
Select field for mobile text alignment with the same options. |
| Color Scheme |
Color scheme selector for the section. |
Slideshow Settings
| Setting |
Description |
| Enable Slideshow |
Checkbox to enable the slideshow. |
| Show Navigation |
Checkbox to toggle the display of navigation arrows. |
| Show Pagination |
Checkbox to toggle the display of pagination controls. |
Spacing Settings
| Setting |
Description |
| Top Padding |
Adjust the space above the section content. |
| Bottom Padding |
Adjust the space below the section content. |