Page types

Each page has its own default sections and settings that you can edit and customize in the theme editor.

You can add up to a maximum of 25 sections to a page, and up to maximum of 50 blocks to a section.

Product pages

By default, product pages have a Product information section and a Related products section.

The Product information section contains the following default blocks:

  • Text (the default display is the vendor attribute)
  • Title
  • Price
  • Variant picker
  • Quantity selector
  • Buy buttons
  • Description
  • Share

You can also add the following default blocks:

  • Text
  • SKU
  • Inventory status
  • Custom Liquid
  • Collapsible row
  • Pop-up
  • Product rating
  • Complementary products
  • Icon with text

Product information section settings

The settings for the product information section
SettingDescription
Enable sticky content on desktopWhen scrolling down a page, the product information column doesn't begin scrolling until all images have been scrolled through.
Desktop media widthChoose between small, medium, or large media width. This setting only applies for users accessing the page on a desktop computer, because the media position is automatically optimized for mobile devices.
Constrain media to screen heightSelecting this option sets a maximum media height based on the height of the browser window of any device.
Media fitSelect Original to maintain the media's original aspect ratio or Fill to fit the media to its container.
Desktop layout

How the product media display on desktop.

  • Thumbnail carousel - If the product has more than one media type, then the remaining media are displayed as thumbnails in a carousel below the main product media. The customer can click any thumbnail to load it, or use the carousel navigation arrows to display other media.
  • Thumbnails - If the product has more than one media type, then the remaining media are displayed as thumbnails below the main product media. The customer can click any thumbnail to load it.
  • Stacked - Displays all product media stacked upon each other. Clicking a stacked media type opens a pop-up window with a larger view of the selected media.
  • Desktop media positionSelect whether to have the featured product media on the left or right. This setting only applies for users accessing the page on a desktop computer.
    Image zoom

    Choose how the image zooms on desktop:

  • Open lightbox - Opens the large image. Default for mobile.
  • No zoom - Deactivates the zoom on images. Recommended for images that aren't high resolution.
  • Click and hover - Click to zoom in on the image, then hover to view different sections zoomed in. Zoom on hover is deactivated when the enlarged image is clicked again or when the mouse leaves the image's container. When this setting is activated and the user is on a mobile device, the image will default to opening in a modal (lightbox).
  • Mobile layoutChoose to hide or show thumbnail images on mobile.
    Hide other variants' media when a variant is selectedWhen a variant is selected, images of other variants are hidden from view. Images reappear when variant is deselected.
    Enable video loopingSets the video to play on a loop, so that the video will replay automatically when it finishes.
    Section paddingAdd spacing to the top or bottom of Product Information section. Use the range slider to add between 0px and 100px of space above or below the Product Information.

    Product information blocks

    The following blocks can be added to the Product information section.

    Text block

    The text block can be used to display static text or variable data using dynamic sources. For example, you could add text displaying a marketing message, such as "Free shipping over $100 USD", which would display the same on each product. You could also add a dynamic source, such as the product's Vendor field, which would change depending on which product is being viewed.

    The settings for the text block in the product information section
    SettingDescription
    TextAdds information to the product page. Supports text or dynamic sources.
    Text style

    Changes the style of the text:

    • Body - Changes the text to paragraph-style text.
    • Subtitle - Changes the text to subtitle text, which is slightly larger than paragraph-style text.
    • Uppercase - Changes the text to be smaller than paragraph-style text, and puts all characters in caps.

    Title block

    This block displays the product's title. It has no adjustable settings.

    Price block

    This block displays the product's pricing information, such as price and compare-at price. It has no adjustable settings.

    Variant picker block

    This block displays any variant options for the product. The variant picker displays only for products that have variant options. If you remove this block and you have products with variant options, then your customers can't choose the variant option they want and can't purchase the product.

    The settings for the variant picker block in the product information section
    SettingDescription
    Type

    Changes how the variants are displayed to customers:

    • Pills - Displays the variants as clickable buttons. These can be displayed as a swatch or text only.
    • Dropdown - Displays the variants in an expandable drop-down menu. These can be displayed as a swatch or text only.

    Buy buttons block

    This block displays the "Add to cart" button and any in-store pickup information. It can also show any dynamic checkout buttons.

    The settings for the buy buttons block in the product information section
    SettingDescription
    Show dynamic checkout buttonsDisplays any dynamic checkout options that you've activated in your Payments settings.
    Show recipient information form for gift card productsDisplays an optional checkbox on the gift card products that lets customers send and schedule a gift card to a recipient along with a personal message.

    Description block

    This block displays the product's description. It has no adjustable settings.

    Product rating block

    This block displays the average product rating in stars, with the number of reviews in parenthesis, for example: ★★★★★ (8).

    Displaying product ratings requires a product review app, and metafield definitions for reviews.rating_count and reviews.rating.

    Complementary products block

    This block displays complementary products which need to be set up with the Shopify Search and Discovery app.

    The settings for the complementary products block in the product information section
    SettingDescription
    Heading

    The title of the block.

    Show as collapsible row

    When selected, the content displays as collapsed under a row tab. When a customer clicks a title, the tab expands to display additional content.

    Icon

    Select an icon to pair with your heading when complementary products are displayed as a collapsible row.

    Maximum products to show

    Select the maximum number of complementary products to display. You can select a minimum of 1, and a maximum of 10.

    Number of products per page

    The number of complementary products that you want to display per slider page. Select a value between 1-4.

    Pagination style

    The style of the slider navigation that displays below the images.

    • Dots
    • Counter (default)
    • Numbers
    Image ratio

    Determines the aspect ratio of the product card images.

    • Portrait
    • Square (default)
    Display quick add button

    The quick add button allows customers to add an item to their cart from the product card. If the product has variants, then the button displays Choose options and the relevant product details in a pop-up. Customers can select variants to add to cart, check out immediately with the Buy it now option, or else click to view an item's full details. The Buy it now option needs to be set up separately from the product page to display in the quick add options. When the Buy it now option isn't set up, customers can still add the item to their cart.

    Share block

    This block displays a clickable link that lets customers share the product on their social media.

    The settings for the share block in the product information section
    SettingDescription
    TextThe clickable text that customers click to share the product to their social media.

    SKU block

    This block displays the Stock Keeping Unit (SKU) associated with the product, when relevant.

    The settings for the SKU block in the product information section
    SettingDescription
    Text style

    Changes the style of the text:

    • Body - Changes the text to paragraph-style text.
    • Subtitle - Changes the text to subtitle text, which is slightly larger than paragraph-style text.
    • Uppercase - Changes the text to be smaller than paragraph-style text, and puts all characters in caps.

    Icon with text block

    This block displays up to three icons with text. You can choose between standard logos or choose your own logo image.

    The settings for the Icon with text block in the product information section
    SettingDescription
    LayoutChoose between a horizontal or vertical layout for this section.
    First iconChoose a standard icon.
    First imageChoose an image for your first icon. Choosing an image overrides any icons that you selected in the first icon setting. Click Select Image to choose an image, or click the Change button to change or remove the image.
    Edit alt textAdd a brief image description to improve SEO and to describe the image for customers using screen readers.
    First headingAdd a heading for the first icon.
    Second iconChoose a standard icon.
    Second imageChoose an image for your second icon. Choosing an image overrides any icons that you selected in the second icon setting. Click Select Image to choose an image, or click the Change button to change or remove the image.
    Edit alt textAdd a brief image description to improve SEO and to describe the image for customers using screen readers.
    Second headingAdd a heading for the second icon.
    Third iconChoose a standard icon.
    Third imageChoose an image for your third icon. Choosing an image overrides any icons that you selected in the third icon setting. Click Select Image to choose an image, or click the Change button to change or remove the image.
    Edit alt textAdd a brief image description to improve SEO and to describe the image for customers using screen readers.
    Third headingAdd a heading for the third icon.

    Inventory status block

    This block displays the inventory status of the product. You can display the remaining inventory or display the remaining inventory after the product inventory count reaches the threshold that you set. The inventory status displays only for products that have inventory tracking activated.

    The settings for the inventory status block in the product information section
    SettingDescription
    Text styleSelect the style for the text. Choose between Body, Subtitle, or Uppercase.
    Low inventory thresholdUse the slider to set the threshold for when the products displays low inventory from 0 to 100. If you set the slider to zero, then the stock displays as always available until it's completely out of stock.
    Show inventory countSelect this option when you want to display the in stock inventory count for your products.

    Quantity selector block

    This block displays a quantity selector that customers can use to change how many units of the product that they want to purchase. It has no adjustable settings. The default quantity is 1.

    Custom liquid block

    This block displays custom Liquid or HTML code that you can add to the block.

    The settings for the custom liquid block in the product information section
    SettingDescription
    Custom liquidDisplays content that you can enter as Liquid or HTML code.

    Collapsible tab block

    This block displays a collapsible tab with a title. When a customer clicks the title, the tab expands to display additional content.

    The settings for the collapsible tab block in the product information section
    SettingDescription
    HeadingThe title of the tab. Displays when collapsed and expanded.
    Tab contentThe content of the tab. Displays only when the tab is expanded.
    Tab content from pageDisplays content from a page in the tab. Displays only the page content from the page editor, no Liquid styling from the page's template displays in this block. Any content entered in Tab content displays above the page content.

    Pop-up block

    This block displays clickable text that opens a pop-up window when clicked. This pop-up displays content from one of your pages.

    The settings for the pop-up block in the product information section
    SettingDescription
    Link labelThe clickable text that customers click to display the pop-up window.
    PageThe page you want to display content from in the pop-up window. Displays only the page content from the page editor. The pop-up doesn't display any Liquid styling from the page template.

    SKU block

    This block displays the SKU (stock keeping unit) of a product when your variant has a SKU associated with it. Learn more about adding SKU numbers to your product variants from the admin.

    Icon with text block

    This block displays up to three icons that you can select from a list of preinstalled icons, or from an image that you upload. If you choose to upload an image, then the uploaded image overrides any icon drop-down selection.

    For the layout of your icons, you can select vertical or horizontal. To delete an icon, clear the heading field. To display more than three icons, add another Icon with text block.

    Inventory status block

    This block displays a products inventory status, such as in stock, low inventory, or out of stock. By default, the low inventory threshold is set to 10. You can change the low inventory threshold to be any number from 0 to 100. If you select the Show inventory count checkbox, then the exact amount of items in stock displays to customers.

    When you're sold out of an item, the out of stock status appears. However, if you've selected to Continue selling when out of stock, then the In stock inventory status continues to display after your inventory reaches zero and below.

    Product recommendations section settings

    Based on the product currently being viewed, this section displays similar products, products with a similar description, or products that are frequently bought together with this product.

    The settings for the product recommendations section
    SettingDescription
    HeadingThe title of the section. You can use a dynamic source for the section heading.
    Heading sizeChange the size of the heading text. Choose between small, medium, or large.
    Maximum products to showUse the range slider to select the maximum number of recommended products to display. Minimum: 2. Maximum: 10.
    Number of columns on desktopNumber of columns to display on desktop computers. Minimum: 1. Maximum: 4.
    Color schemeA set of colors that you can apply to this section. Learn more about color schemes.
    Image ratioThe image ratio for the images of the recommended products:
    • Adapt to image - Uses the aspect ratio of the images. This prevents the image from being cropped.
    • Portrait - Crops the images to use a 2:3 ratio.
    • Square - Crops the images to use a 1:1 ratio.
    Show second image on hoverWhen the customer hovers their cursor over the image, displays the second image for the product if the product has one.
    Show vendorDisplays the vendor for each product.
    Show product ratingDisplays the average product rating in stars with the number of reviews in parenthesis, for example: ★★★★★ (8). Also requires a product review app, and metafield definitions for reviews.rating_count and reviews.rating.
    Number of columns on mobileSet a specific column layout for mobile devices. Choose between 1 and 2 columns.
    Section paddingAdd spacing to the top or bottom of the section. Use the range slider to add between 0px and 100px of space above or below the section.

    To learn more about product recommendations, refer to Understanding product recommendations.

    Quick order list section settings

    You can add the Quick order list section to your Products template, so that your customers can easily purchase bulk orders of multiple product quantities across different product variants.

    The settings for the Quick order list section
    SettingDescription
    Color schemeA set of colors that you can apply to this section. Learn more about color schemes.
    Section paddingAdd spacing to the top or bottom of the section. Use the range slider to add between 0px and 100px of space above or below the section.
    Show imagesDisplays the variant images.
    Show SKUDisplays the variant SKUs.

    Learn more about adding the Quick order list section to your product page.

    Collection pages

    By default, collection pages have a Collection banner and a Product grid section.

    Collection banner section settings

    The settings for the collection banner section
    SettingDescription
    Show collection descriptionDisplays the description of the collection.
    Show collection imageDisplays the collection image.
    Color schemeA set of colors that you can apply to this section. Learn more about color schemes.

    Product grid section settings

    The settings for the product grid section
    SettingDescription
    Products per pageThe number of products that you want to display on each page. Can be any multiple of 4, from 8 to 24. Defaults to 16.
    Number of columns on desktopUse the range scale to select the number of columns that display on desktop computers. Minimum is 1, maximum is 5.
    Image ratioThe image ratio for the product images:
    • Adapt to image (default) - Uses the aspect ratio of the images. This prevents the images from being cropped.
    • Portrait - Crops the images to use a 2:3 ratio.
    • Square - Crops the images to use a 1:1 ratio.
    Image shapeChoose one of the following image shapes for your product images:
    • Default - Changes your product image into a rectangle shape.
    • Arch - Curves the top your product image.
    • Blob - Rounds your product image into one of the six random blob shapes that has a unique animation on hover.
    • Chevron left - Changes your product image into a chevron shape that has a sharp bend to the left.
    • Chevron right - Changes your product image into a chevron shape that has a sharp bend to the right.
    • Diamond - Changes your product image into a four-sided diamond shape.
    • Parallelogram - Changes your product image into a shape that has two pairs of parallel lines.
    • Round - Rounds your product image into a circle or oval shape that has a unique animation on hover.
    Show second image on hoverWhen the customer hovers their cursor over the product image, displays the second product image if the product has one.
    Show vendorDisplays the vendor for each product.
    Show product ratingDisplays the average product rating in stars with the number of reviews in parenthesis, for example: ★★★★★ (8). Also requires a product review app, and metafield definitions for reviews.rating_count and reviews.rating.
    Enable quick add buttonThe quick add button allows customers to add an item to their cart from the product card. If the product has variants, then the button will read Choose options and display the product details in a pop-up, where the customer can select the desired variants, add the item to cart, checkout immediately with Buy it now, or click to view the item's full details. Note that this setting is dependent on the Buy it now button being activated on your product page. If Buy it now button isn't activated on the product template, then customers have the option to add the product to their cart, but the quick Buy it now checkout workflow doesn't display. The Desktop media position setting for the page determines which side the media displays on in the quick add modal.
    Enable filteringLets customers filter the products in the collection based on the filters in your Navigation settings.
    Desktop filter layoutChoose between a horizontal (default), vertical, or drawer layout.
    Enable sortingAllows customers to sort search results.
    Number of columns on mobileSet a specific column layout for mobile devices. Choose between 1 and 2 columns.
    Section paddingAdd spacing to the top or bottom of the product grid. Use the range slider to add between 0px and 100px of space above or below the product grid.

    Collections list page

    The collections list page displays all your collections that are available on the Online Store sales channel.

    The settings for the collection list page
    SettingDescription
    HeadingThe title of the page.
    Sort collections by

    Determines in what order to display your collections:

    • Alphabetically, A-Z - Displays the collections in alphabetical order.
    • Alphabetically, Z-A - Displays the collections in reverse alphabetical order.
    • Date, new to old - Displays the collections from the newest to the oldest, based on when each collection was created in your store.
    • Date, old to new - Displays the collections from the oldest to the newest, based on when each collection was created in your store.
    • Product count, high to low - Displays the collections based on how many products they contain, from highest to lowest.
    • Product count, low to high - Displays the collections based on how many products they contain, from lowest to highest.
    Image ratioThe image ratio for the collection images:
    • Adapt to image (default) - Uses the aspect ratio of the images. This prevents the images from being cropped.
    • Portrait - Crops the images to use a 2:3 ratio.
    • Square - Crops the images to use a 1:1 ratio.
    Number of columns on desktopNumber of columns to display on desktop computers. Minimum: 1. Maximum: 5.
    Number of columns on mobileSet a specific column layout for mobile devices. Choose between 1 and 2 columns.

    Pages

    You can create custom pages in your Shopify admin to create content for your customers, such as an About Us page, or extra information about your products. These pages have no extra settings within the theme editor.

    Blog pages

    Blog pages are the homepage for any blogs that you create within your Shopify admin. By default, they contain a Blog posts section.

    Blog posts section settings

    The blog posts section displays the latest blog posts within the blog. Each blog posts displays any blog image, the blog title, and either the excerpt or the first few words of the blog post. For larger screens, you can choose to display your blog posts in a grid or a collage format.

    The settings for the blog posts section
    SettingDescription
    Layout on large screensDisplays blog posts in either a grid or a collage.
    Show featured imageDisplays the blog post's featured image.
    Featured image heightUse the drop-down menu to choose between the default Adapt to image, Small, Medium, or Large.
    Show dateFor each blog post, displays the date that the blog post was published.
    Show authorFor each blog post, displays the author of the blog post.

    Blog post pages

    Blog post pages display the content of the blog post. By default, they contain a Blog post section. The Blog post section has no customizable settings by itself, but contains the following default blocks:

    • Featured image
    • Title
    • Share
    • Content
    The settings for the featured image block on the blog post page
    SettingDescription
    Featured image height

    Determines the height of the blog post's featured image:

    • Adapt to image (default) - Keeps the image's original aspect ratio.
    • Image specifications are listed below. Choose between a small, medium, or large featured image.
    Sizes of the featured image block on the blog post page
    Small cardsLarge cards
    Small featured image height

    • Desktop - 177 px
    • Tablet - 143 px
    • Mobile - N/A
    Large featured image height

    • Desktop - 275 px
    • Tablet - 220 px
    • Mobile - 110 px
    Medium featured image height

    • Desktop - 307 px
    • Tablet - 219 px
    • Mobile - N/A
    Medium featured image height

    • Desktop - 550 px
    • Tablet - 440 px
    • Mobile - 220 px
    Large featured image height

    • Desktop - 407 px
    • Tablet - 275 px
    • Mobile - N/A
    Large featured image height

    • Desktop - 825 px
    • Tablet - 660 px
    • Mobile - 330 px

    Title block

    The settings for the title block on the blog post page
    SettingDescription
    Show dateDisplays the date that the blog post was published.
    Show authorDisplays the author of the blog post.

    Share block

    This block displays a clickable link that lets customers share the blog post on their social media.

    The settings for the share block on the blog post page
    SettingDescription
    TextThe clickable text that customers click to share the blog post to their social media.

    Content block

    The content block displays the content of the blog post. It has no customizable settings.

    Cart page

    By default, the cart page has an Items and a Subtotal section.

    Items section settings

    The Items section displays the products and quantities that a customer has added to their cart.

    The settings for the items section on the cart page
    SettingDescription
    Show vendorDisplays the vendors of each product in the cart.

    Subtotal section settings

    The Subtotal section has a Subtotal price and a Checkout button block. Neither block has any customizable settings.

    The settings for the subtotal section on the cart page
    SettingDescription
    Enable cart noteDisplays the Cart note field where customers can enter additional information.

    Password page

    The password page displays when password protection is active on your online store and a customer tries to visit your website. This page has its own header and footer, and contains an Email signup section by default.

    Password header section

    The settings for the password header section on the password page
    SettingDescription
    Color schemeA set of colors that you can apply to this section. Learn more about color schemes.

    Email signup section

    This section is intended to provide a way for customers to subscribe to your email marketing so they can learn more about your business, such as when it opens for business.

    The settings for the email signup section on the password page
    SettingDescription
    Color schemeA set of colors that you can apply to this section. Learn more about color schemes.
    Make section full widthExtends the section to be the width of the browser window.

    Heading block

    The settings for the heading block in the password header section on the password page
    SettingDescription
    HeadingThe title of the section.

    Subheading block

    The settings for the heading block in the password header section on the password page
    SettingDescription
    DescriptionThe text content of the section.

    Email form block

    This block displays the email form field where customers can enter their email address. This block has no customizable settings.

    The settings for the password footer section on the password page
    SettingDescription
    Color schemeA set of colors that you can apply to this section. Learn more about color schemes.

    404 page

    The 404 page displays when a customer tries to visit a link to your site that doesn't exist, such as a product page for a product that you deleted from your store. This page has no customizable settings.

    Search page

    The search page is where customers can search for specific products or pages within your online store. The page contains a Search results section by default.

    Search results section settings

    The settings for the search results section
    SettingDescription
    Number of columns on desktopNumber of columns to display on desktop computers. Minimum: 1. Maximum: 5.
    Image ratioThe image ratio for the images of the recommended products:
    • Adapt to image (default) - Uses the aspect ratio of the images. This prevents the images from being cropped.
    • Portrait - Crops the images to use a 2:3 ratio.
    • Square - Crops the images to use a 1:1 ratio.
    Image shapeChoose one of the following image shapes for your product images:
    • Default - Changes your product image into a rectangle shape.
    • Arch - Curves the top your product image.
    • Blob - Rounds your product image into one of the six random blob shapes that has a unique animation on hover.
    • Chevron left - Changes your product image into a chevron shape that has a sharp bend to the left.
    • Chevron right - Changes your product image into a chevron shape that has a sharp bend to the right.
    • Diamond - Changes your product image into a four-sided diamond shape.
    • Parallelogram - Changes your product image into a shape that has two pairs of parallel lines.
    • Round - Rounds your product image into a circle or oval shape that has a unique animation on hover.
    Show second image on hoverWhen a customer hovers their cursor over the product image, displays the second product image if the product has one.
    Show vendorDisplays the vendor for each product.
    Show product ratingDisplays the average product rating in stars with the number of reviews in parenthesis, for example: ★★★★★ (8). Also requires a product review app, and metafield definitions for reviews.rating_count and reviews.rating.
    Enable filteringClick to activate filtering of search results.
    Desktop filter layoutChoose between a horizontal (default), vertical, or drawer layout.
    Enable sortingClick to activate sorting of search results.
    Show dateFor each blog post, displays the date that the blog post was published.
    Show authorFor each blog post, displays the author of the blog post.
    Number of columns on mobileSet a specific column layout for mobile devices. Choose between 1 and 2 columns.
    Section paddingAdd spacing to the top or bottom of the search results. Use the range slider to add between 0px and 100px of space above or below the search results.
    Can’t find the answers you’re looking for? We’re here to help.