Page types
Each page has its own default sections and settings.
On this page
Product pages
By default, product pages have aProduct informationsection and aProduct recommendationssection.
TheProduct informationsection contains the following default blocks:
- Text (default displays the
vendor
attribute) - Title
- Text (default displays the
product subtitle
attribute) - Price
- Variant picker
- Quantity selector
- Buy buttons
- Description
- Share
You can also add the following blocks:
- Text
- Custom liquid
- Product rating
- Collapsible tab
- Pop-up
- Complementary products
- Inventory
- SKU
- Icon with text
TheProduct informationsection can contain up to 16 blocks.
Product information section settings
Setting | Description |
---|---|
Enable sticky content on desktop | When scrolling down a page, the product information column doesn't begin scrolling until all images have been scrolled through. |
Desktop media width | Choose 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 height | Selecting this option sets a maximum media height based on the height of the browser window of any device. |
Media fit | SelectOriginalto maintain the media's original aspect ratio orFillto fit the media to its container. |
Desktop layout | How the product media display on desktop. |
Desktop media position | Select 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: |
Mobile layout | Choose to hide or show thumbnail images on mobile. |
Hide other variants' media when a variant is selected | When a variant is selected, images of other variants are hidden from view. Images reappear when variant is deselected. |
Enable video looping | Sets the video to play on a loop, so that the video will replay automatically when it finishes. |
Section padding | Add 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 theProduct informationsection.
Text block
The text block can be used to display static text or variable data usingdynamic 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'sVendorfield, which would change depending on which product is being viewed.
Setting | Description |
---|---|
Text | Adds information to the product page. Supports text or dynamic sources. |
Text style | Changes the style of the text:
|
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.
Setting | Description |
---|---|
Type | Changes how the variants are displayed to customers:
|
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.
Setting | Description |
---|---|
Show dynamic checkout buttons | 迪splays any dynamic checkout options that you have enabled in yourPaymentssettings. |
Show recipient information form for gift card products | 迪splays 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).
迪splaying product ratings requires a product review app such asShopify Product Reviews, andmetafield definitionsforreviews.rating_count
andreviews.rating
.
Complementary products block
This block displays complementary products which need to be set up with theShopify Search and Discovery app.
Setting | Description |
---|---|
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 shown as a collapsible row. |
Maximum products to show | Select the maximum number of complementary products to show. 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 appears below the images.
|
Image ratio | Determines the aspect ratio of the product card images.
|
迪splay 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 displaysChoose optionsand the relevant product details in a pop-up. Customers can select variants to add to cart, check out immediately with theBuy it nowoption, or else click to view an item's full details. TheBuy it nowoption needs to be set up separately from theproduct pageto appear in the quick add options. When theBuy it nowoption 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.
Setting | Description |
---|---|
Text | The clickable text that customers click to share the product to their social media. |
SKU block
这一块显示库存单位(SKU)ssociated with the product, when relevant.
Setting | Description |
---|---|
Text style | Changes the style of the text:
|
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.
Setting | Description |
---|---|
Layout | Choose between a horizontal or vertical layout for this section. |
First icon | Choose a standard icon. |
First image | Choose an image for your first icon. Choosing an image overrides any icons that you selected in the first icon setting. ClickSelect Imageto choose an image, or click theChangebutton to change or remove the image. |
Edit alt text | Add a brief image description to improve SEO and to describe the image for customers using screen readers. |
First heading | Add a heading for the first icon. |
Second icon | Choose a standard icon. |
Second image | Choose an image for your second icon. Choosing an image overrides any icons that you selected in the second icon setting. ClickSelect Imageto choose an image, or click theChangebutton to change or remove the image. |
Edit alt text | Add a brief image description to improve SEO and to describe the image for customers using screen readers. |
Second heading | Add a heading for the second icon. |
Third icon | Choose a standard icon. |
Third image | Choose an image for your third icon. Choosing an image overrides any icons that you selected in the third icon setting. ClickSelect Imageto choose an image, or click theChangebutton to change or remove the image. |
Edit alt text | Add a brief image description to improve SEO and to describe the image for customers using screen readers. |
Third heading | Add a heading for the third icon. |
Inventory status block
This block displays the inventory status of the product.
Setting | Description |
---|---|
Text style | Select the style for the text. Choose betweenBody,Subtitle, orUppercase. |
Low inventory threshold | 使用滑块设置的门槛时,products displays low inventory from 0 to 100. If you set the slider to zero, then the stock shows as always available until it's completely out of stock. |
Show inventory count | Select this option when you want to show 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 displayscustom Liquid or HTML codethat you can add to the block.
Setting | Description |
---|---|
Custom liquid | 迪splays content that you can enter asLiquid 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.
Setting | Description |
---|---|
Heading | The title of the tab. Displays when collapsed and expanded. |
Tab content | 选项卡的内容。迪splays only when the tab is expanded. |
Tab content from page | 迪splays 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 inTab contentdisplays 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.
Setting | Description |
---|---|
Link label | The clickable text that customers click to display the pop-up window. |
Page | The 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 aboutadding 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 anotherIcon with textblock.
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 theShow inventory countcheckbox, then the exact amount of items in stock displays to customers.
When you're sold out of an item, theout of stockstatus appears. However, if you've selected toContinue selling when out of stock, then theIn stockinventory 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.
Setting | Description |
---|---|
Heading | The title of the section. You can use a dynamic source for the section heading. |
Heading size | Change the size of the heading text. Choose between small, medium, or large. |
Maximum products to show | Use the range slider to select the maximum number of recommended products to show. Minimum: 2. Maximum: 10. |
Number of columns on desktop | Number of columns to display on desktop computers. Minimum: 1. Maximum: 4. |
Color scheme | A set of colors that you can apply to this section. Learn more aboutcolor schemes. |
Image ratio | The image ratio for the images of the recommended products:
|
Show second image on hover | When the customer hovers their cursor over the image, displays the second image for the product if the product has one. |
Show vendor | 迪splays the vendor for each product. |
Show product rating | 迪splays the average product rating in stars with the number of reviews in parenthesis, for example: ★★★★★ (8). Also requires a product review app such asShopify Product Reviews, andmetafield definitionsforreviews.rating_countandreviews.rating. |
Number of columns on mobile | Set a specific column layout for mobile devices. Choose between 1 and 2 columns. |
Section padding | Add 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 toUnderstanding product recommendations.
Quick order list section settings
You can add theQuick order listsection to yourProductstemplate, so that your customers can easily purchase bulk orders of multiple product quantities across different product variants.
Setting | Description |
---|---|
Color scheme | A set of colors that you can apply to this section. Learn more aboutcolor schemes. |
Section padding | Add 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 images | 迪splays the variant images. |
Show SKU | 迪splays the variant SKUs. |
Learn more aboutadding theQuick order listsection to your product page.
Collection pages
By default, collection pages have aCollection bannerand aProduct gridsection.
Collection banner section settings
Setting | Description |
---|---|
Show collection description | 迪splays the description of the collection. |
Show collection image | 迪splays the collection image. |
Color scheme | A set of colors that you can apply to this section. Learn more aboutcolor schemes. |
Product grid section settings
Setting | Description |
---|---|
Products per page | The 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 desktop | Use the range scale to select the number of columns that appear on desktop computers. Minimum is 1, maximum is 5. |
Image ratio | The image ratio for the product images:
|
Image shape | Choose one of the following image shapes for your product images:
|
Show second image on hover | When the customer hovers their cursor over the product image, displays the second product image if the product has one. |
Show vendor | 迪splays the vendor for each product. |
Show product rating | 迪splays the average product rating in stars with the number of reviews in parenthesis, for example: ★★★★★ (8). Also requires a product review app such asShopify Product Reviews, andmetafield definitionsforreviews.rating_countandreviews.rating. |
Enable 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 will readChoose optionsand display the product details in a pop-up, where the customer can select the desired variants, add the item to cart, checkout immediately withBuy it now, or click to view the item's full details. Note that this setting is dependent on theBuy it nowbutton being enabled on yourproduct page. IfBuy it nowbutton isn't enabled on the product template, then customers have the option to add the product to their cart, but the quickBuy it nowcheckout workflow doesn't display. TheDesktop media positionsetting for the page determines which side the media displays on in the quick add modal. |
Enable filtering | Lets customers filter the products in the collection based on the filters in yourNavigationsettings. |
Desktop filter layout | Choose between a horizontal (default), vertical, or drawer layout. |
Enable sorting | Allows customers to sort search results. |
Number of columns on mobile | Set a specific column layout for mobile devices. Choose between 1 and 2 columns. |
Section padding | Add 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.
Setting | Description |
---|---|
Heading | The title of the page. |
Sort collections by | Determines in what order to display your collections:
|
Image ratio | The image ratio for the collection images:
|
Number of columns on desktop | Number of columns to display on desktop computers. Minimum: 1. Maximum: 5. |
Number of columns on mobile | Set 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 aBlog postssection.
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.
Setting | Description |
---|---|
Layout on large screens | 迪splays blog posts in either a grid or a collage. |
Show featured image | 迪splays the blog post's featured image. |
Featured image height | Use the drop-down menu to choose between the defaultAdapt to image,Small,Medium, orLarge. |
Show date | For each blog post, displays the date that the blog post was published. |
Show author | For 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 aBlog postsection. TheBlog postsection has no customizable settings by itself, but contains the following default blocks:
- Featured image
- Title
- Share
- Content
Featured image block
Setting | Description |
---|---|
Featured image height | Determines the height of the blog post's featured image:
|
Featured image sizes
Small cards | Large cards |
---|---|
Small featured image height
|
Large featured image height
|
Medium featured image height
|
Medium featured image height
|
Large featured image height
|
Large featured image height
|
Title block
Setting | Description |
---|---|
Show date | 迪splays the date that the blog post was published. |
Show author | 迪splays 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.
Setting | Description |
---|---|
Text | The 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 anItemsand aSubtotalsection.
Items section settings
TheItemssection displays the products and quantities that a customer has added to their cart.
Setting | Description |
---|---|
Show vendor | 迪splays the vendors of each product in the cart. |
Subtotal section settings
TheSubtotalsection has aSubtotal priceand aCheckout buttonblock. Neither block has any customizable settings.
Setting | Description |
---|---|
Enable cart note | 迪splays theCart notefield where customers can enter additional information. |
Password page
The password page displays when password protection is enabled on your online store and a customer tries to visit your website. This page has its own header and footer, and contains anEmail signupsection by default.
Password header section
Setting | Description |
---|---|
Color scheme | A set of colors that you can apply to this section. Learn more aboutcolor 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.
Setting | Description |
---|---|
Color scheme | A set of colors that you can apply to this section. Learn more aboutcolor schemes. |
Make section full width | Extends the section to be the width of the browser window. |
Heading block
Setting | Description |
---|---|
Heading | The title of the section. |
Subheading block
Setting | Description |
---|---|
Description | The 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.
Password footer section
Setting | Description |
---|---|
Color scheme | A set of colors that you can apply to this section. Learn more aboutcolor 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 aSearch resultssection by default.
Search results section settings
Setting | Description |
---|---|
Number of columns on desktop | Number of columns to display on desktop computers. Minimum: 1. Maximum: 5. |
Image ratio | The image ratio for the images of the recommended products:
|
Image shape | Choose one of the following image shapes for your product images:
|
Show second image on hover | When a customer hovers their cursor over the product image, displays the second product image if the product has one. |
Show vendor | 迪splays the vendor for each product. |
Show product rating | 迪splays the average product rating in stars with the number of reviews in parenthesis, for example: ★★★★★ (8). Also requires a product review app such asShopify Product Reviews, andmetafield definitionsforreviews.rating_countandreviews.rating. |
Enable filtering | Click to enable filtering of search results. |
Desktop filter layout | Choose between a horizontal (default), vertical, or drawer layout. |
Enable sorting | Click to enable sorting of search results. |
Show date | For each blog post, displays the date that the blog post was published. |
Show author | For each blog post, displays the author of the blog post. |
Number of columns on mobile | Set a specific column layout for mobile devices. Choose between 1 and 2 columns. |
Section padding | Add 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. |