أنواع الصفحات المتوفرة في Be Yours

Each page has its own default sections and settings.

On this page

Product pages

By default, product pages have a Product information section, a Product details section and a Product recommendations section.

The Product information section contains the following default blocks:

  • Text (default displays the vendor attribute)
  • Title
  • Product rating
  • Text (default displays the product subtitle attribute)
  • Variant picker
  • Price
  • Inventory status
  • Buy buttons
  • Share
  • Related info buttons

You can also add the following blocks:

  • Text
  • Description
  • Custom Liquid
  • Product rating
  • Collapsible tab
  • Pop-up
  • Empty space

The Product information section can contain up to 16 blocks.

 

The Product details section is located right  contains the following default blocks:

  • Description
  • Collapsible tab

You can also add the following blocks:

  • Collapsible tab

The Product details section can contain up to 16 blocks.

 

Product information section settings

The settings for the product information section
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 size The size of the images/media on desktop:
  • Small - The media fills up 40% of the container's width.
  • Medium - The media fills up 50% of the container's width.
  • Large - The media fills up 60% of the container's width.
Desktop layout

Determines how the images are displayed on desktop:

  • Stacked - Stacks one after another vertically.
  • Slider - Displays in one-item carousel style.
Desktop image ratio

The image ratio for the product images on desktop:

  • Adapt to image - Uses the aspect ratio of the images. This prevents the images from being cropped.
  • Square - Crops the images to use a 1:1 ratio.
  • Portrait - Crops the images to use a 2:3 ratio.
  • Landscape - Crops the images to use a 3:2 ratio.
  • Wide - Crops the images to use a 16:9 ratio.
  • Adapt to first image (default) - Uses the aspect ratio of the first image for all the rest.
Show thumbnails on desktop
On desktop, sticks click-able product thumbnails at the side of the image placement for easy navigation until all images have been scrolled through.
Hide other variants' media after selecting a variant When a variant is selected, images of other variants are hidden from view. Images reappear when variant is deselected.
Enable image zoom Turns on the zoom feature for main images.
Enable video looping Sets the video to play on a loop, so that the video will replay automatically when it finishes.
Mobile image ratio

The image ratio for the product images on mobile:

  • Adapt to image - Uses the aspect ratio of the images. This prevents the images from being cropped.
  • Square - Crops the images to use a 1:1 ratio.
  • Portrait - Crops the images to use a 2:3 ratio.
  • Landscape - Crops the images to use a 3:2 ratio.
  • Wide - Crops the images to use a 16:9 ratio.
  • Adapt to first image (default) - Uses the aspect ratio of the first image for all the rest.
Show thumbnails on mobile
On mobile, sticks click-able product thumbnails at the bottom of the image placement for easy navigation.

Product information section padding settings

The padding settings for the section
Setting Description
Top padding Determines the height of the top inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.
Bottom padding Determines the height of the bottom inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.

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
Setting Description
Icon Choose a pre-made SVG icon that accommodates your text. The None option will disable the icon.
Text Adds 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.

The settings for the title block in the product information section
Setting Description
Title size The size of the product's title:
  • Small
  • Medium
  • Large

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 settings for the variant picker block in the product information section
Setting Description
Show variant labels Displays the variants labels of the product.
Type Changes how the variants are displayed to customers:
  • Button - Displays the variants as clickable buttons.
  • Dropdown - Displays the variants in an expandable drop-down menu.
Enable color swatches Displays color selection in swatches. This section only applies if Type is set to Button.
Swatch type The swatches appearance. This section only applies if Type is set to Button.
  • Round
  • Square
Size chart page If you sell clothing items that require customers to know their size before they make a purchase, you can add a custom size chart to your product page. Here's to choose your page that represents size chart content. If a product is eligible, a size chart button should display along with the Size option. When clicked, it opens a popup containing the page's content.

For more info about size chart, please check this article.

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
Setting Description
Show quantity selector Displays a quantity selector that customers can use to change how many units of the product that they want to purchase. The default quantity is 1.
Show dynamic checkout buttons Displays any dynamic checkout options that you have enabled in your Payments settings.

Description block

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

Inventory status block

Displays a message that timely informs customers about product stock status

The settings for the inventory status block in the product information section
Setting Description
Low inventory threshold Allows you set a value that the product stock must be at least for the message to be visible. Must be an even number. Minimum: 0. Maximum: 20. The default is 10.
Show inventory transfer notice
If you have multiple locations for your store, this will displays transfer message about the date regarding shipping or stock status.

Image block

Displays a custom image, ideal for trust badge image.

The settings for the image block in the product information section
Setting Description
Image Choose your image.
Custom height The height of the image (in pixel). From 10 px to 100 px. The default is 20 px.
Link The link that you want customers to navigate to if they click the image.

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 such as Shopify Product Reviews, and metafield definitions for reviews.rating_count and reviews.rating.

Share block

This block allows customers share the product on their social media. It has no adjustable settings.

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
Setting Description
Custom Liquid Displays 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
Setting Description
Icon Choose a pre-made SVG icon that accommodates your collapsible tab. The None option will disable the icon.
Heading The title of the tab. Displays when collapsed and expanded.
Tab content The content of the tab. Displays only when the tab is expanded.
Tab content from page Displays 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
Setting Description
Icon Choose a pre-made SVG icon that accommodates your popup. The None option will disable the icon.
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.

Empty space block

This block adds a blank space, which is particularly useful when you want to slightly modify the layout.

The settings for the empty space block in the product information section
Setting Description
Desktop height The height of the space on desktop. Can be any multiple of 4, from 0 to 200. The default is 28.
Mobile height
The height of the space on mobile. Can be any multiple of 4, from 0 to 200. The default is 20.

This block adds a button, which helps the users navigate between the additional info section below and the image placement without manually page scroll. It has no adjustable settings.

Product details section settings

The settings for the product details section
Setting Description
Heading The title of the section.
Heading size
The size of the heading text:
  • Small
  • Medium
  • Large

Sticky cart block

This block adds a sticky add to cart button that will stay with customers as they scroll down through a product's description, ready for any purchasing hesitation. Because of its functionality, the order in which it is placed doesn't matter. Because of its functionality, Sticky cart block is limited to one only.

The settings for the sticky cart block in the product information section
Setting Description
Show quantity selector Displays a quantity selector that customers can use to change how many units of the product that they want to purchase. The default quantity is 1. This is available on desktop only.

Product details section padding settings

The padding settings for the section
Setting Description
Top padding Determines the height of the top inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.
Bottom padding Determines the height of the bottom inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.

Product details blocks

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

Description block

This block displays the product's description. 

The settings for the description block in the product details section
Setting Description
Heading The title of the tab. Displays when collapsed and expanded.

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 details section
Setting Description
Heading The title of the tab. Displays when collapsed and expanded.
Tab content The content of the tab. Displays only when the tab is expanded.
Tab content from page Displays 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.

Product recommendations section settings

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

The settings for the product recommendations section
Setting Description
Heading The title of the section.
Heading size
The size of the heading text:
  • Small
  • Medium
  • Large
Enable swipe on mobile Changes the mobile display from a column to a row, where customers can swipe sideways to see more products.
Display one column on mobile
Changes the mobile display to one product per row.
Image ratio The image ratio for the product images:
  • Adapt to image - Uses the aspect ratio of the images. This prevents the images from being cropped.
  • Square - Crops the images to use a 1:1 ratio.
  • Portrait - Crops the images to use a 2:3 ratio.
  • Landscape - Crops the images to use a 3:2 ratio.
  • Wide - Crops the images to use a 16:9 ratio.
Image focal point Choose the most important area of the image in view.
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 quick add to cart button When the customer hovers their cursor over the product image, displays a quick add to cart button. If product has variants, the button links to the product detail page.
Show vendor Displays the vendor for each product.
Show product rating Displays the average product rating in stars with the number of reviews in parenthesis, for example: ★★★★★ (8). Also requires a product review app such as Shopify Product Reviews, and metafield definitions for reviews.rating_count and reviews.rating.
Enable quick view Adds a button that opens a popup displaying all the essential product details.
Enable color swatches
Displays colors in swatches for quick selection.

Product recommendations section padding settings

The padding settings for the section
Setting Description
Top padding Determines the height of the top inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.
Bottom padding Determines the height of the bottom inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.

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

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
Setting Description
Collection title size
The size of the title:
  • Small
  • Medium
  • Large
Show collection description Displays the description of the collection.
Show collection image Displays the collection image.
Apply overlay on image Improves text readability by adding an overlay on the image.
Image focal point Choose the most important area of the collection image in view.
Desktop height Determines the height of the collection image on desktop:
  • Adapt to image - Keeps the image's original aspect ratio.
  • 450px - 450 px.
  • 550px - 550 px.
  • 650px - 650 px.
  • 750px - 750 px.
  • Full screen - Extends the image to be the height of the browser window.
Mobile height Determines the height of the collection image on mobile:
  • Auto - The browser will decide based on the desktop value.
  • 250px - 250 px.
  • 300px - 300 px.
  • 400px - 400 px.
  • 500px - 500 px.
  • Full screen - Extends the image to be the height of the browser window.
Show text below image Displays the collection title below the image on mobile.

Collection banner section padding settings

The padding settings for the section
Setting Description
Top padding Determines the height of the top inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.
Bottom padding Determines the height of the bottom inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.

Product grid section settings

The settings for the product grid section
Setting Description
Products per row Choose the number of products to display in each row on the collection page. This section only applies if Layout is set to Grid.
Rows per page Choose the number of rows of products to display on the collection page. This section only applies if Layout is set to Grid.
One column on mobile Changes the mobile display to one product per row. This section only applies if Layout is set to Grid.
Enable sticky toolbar
Displays the toolbar when the customer scrolls down.
Enable filtering

Lets customers filter the products in the collection based on the filters in your Navigation settings.

Please note that, when your collection contains over 1000 products, the filters are hidden, as ruled by Shopify.
Enable sorting Lets customers sort the products in the collection based on the following:
  • Featured - Best selling product, based on the all-time number of orders that include the product. If you haven't sold any products yet, then this option sorts your products from newest to oldest.
  • Best selling - Displays the products in descending order based on how many times each product has been ordered.
  • Alphabetically, A-Z - Displays the products in alphabetical order.
  • Alphabetically, Z-A - Displays the products in reverse alphabetical order.
  • Price, low to high - Displays the products from the lowest price to the highest price.
  • Price, high to low - Displays the products from the highest price to the lowest price.
  • Date, old to new - Displays the products from the oldest to the newest, based on when each product was added to your store.
  • Date, new to old - Displays the products from the newest to the oldest, based on when each product was added to your store.
Enable layout switcher Lets customers change the products layout in the collection.
Image ratio The image ratio for the product images:
  • Adapt to image - Uses the aspect ratio of the images. This prevents the images from being cropped.
  • Square - Crops the images to use a 1:1 ratio.
  • Portrait - Crops the images to use a 2:3 ratio.
  • Landscape - Crops the images to use a 3:2 ratio.
  • Wide - Crops the images to use a 16:9 ratio.
Image focal point Choose the most important area of the image in view.
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 quick add to cart button When the customer hovers their cursor over the product image, displays a quick add to cart button. If product has variants, the button links to the product detail page.
Show vendor Displays the vendor for each product.
Show product rating Displays the average product rating in stars with the number of reviews in parenthesis, for example: ★★★★★ (8). Also requires a product review app such as Shopify Product Reviews, and metafield definitions for reviews.rating_count and reviews.rating.
Enable quick view
Adds a button that opens a popup displaying all the essential product details.
Enable color swatches
Displays colors in swatches for quick selection.

Product grid section padding settings

The padding settings for the section
Setting Description
Top padding Determines the height of the top inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.
Bottom padding Determines the height of the bottom inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.

Collections list pages

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

Collections list pages section settings

The settings for the collection list page
Setting Description
Heading The title of the page.
Heading size
The size of the heading text:
  • Small
  • Medium
  • Large
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 ratio The image ratio for the collection images:
  • Adapt to image - Uses the aspect ratio of the images. This prevents the images from being cropped.
  • Square - Crops the images to use a 1:1 ratio.
  • Portrait - Crops the images to use a 2:3 ratio.
  • Landscape - Crops the images to use a 3:2 ratio.
  • Wide - Crops the images to use a 16:9 ratio.
Image focal point Choose the most important area of the image in view.
Apply overlay on image Improves text readability by adding an overlay on the image.
Enable one column on mobile
Changes the mobile display to one collection per row.

Collections list pages section padding settings

The padding settings for the section
Setting Description
Top padding Determines the height of the top inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.
Bottom padding Determines the height of the bottom inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.

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.

Page section settings

The settings for the page
Setting Description
Make section narrow Makes its container narrow.

Page section padding settings

The padding settings for the section
Setting Description
Top padding Determines the height of the top inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.
Bottom padding Determines the height of the bottom inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.

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.

The settings for the blog posts section
Setting Description
Posts per page The number of blog posts that you want to display on each page. Can be any multiple of 3, from 6 to 48. The default is 15.
Show tag filter Displays the blog's featured image.
Show featured image Displays the featured image for the blog post.
Image ratio
The image ratio for the blog post images:
  • Adapt to image - Uses the aspect ratio of the images. This prevents the images from being cropped.
  • Square - Crops the images to use a 1:1 ratio.
  • Portrait - Crops the images to use a 2:3 ratio.
  • Landscape - Crops the images to use a 3:2 ratio.
  • Wide - Crops the images to use a 16:9 ratio.
Image focal point
Choose the most important area of the image in view.

Blog posts section padding settings

The padding settings for the section
Setting Description
Top padding Determines the height of the top inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.
Bottom padding Determines the height of the bottom inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.

Blog posts blocks

The following blocks can be added to Blog posts page.

Title

The title block can be used to display the title of the posts within the blog

The settings for the title block in Blog posts page
Setting Description
Show date
For each blog post, displays the date that the blog post was published.
Show author
For each blog post, displays the author.
Show comment count
For each blog post, displays the the number of published comments.

Excerpt

For each blog post, this block displays the excerpt of the post. It has no adjustable settings.

Read more

For each blog post, this block displays the link that navigates to the post. It has no adjustable settings.

Blog post pages

Blog post pages display the content of the blog post. By default, they contain a Blog post section.

Blog post section settings

The settings for the blog post section
Setting Description
Show comment avatar Displays the avatar for each comment.

Blog post section padding settings

The padding settings for the section
Setting Description
Top padding Determines the height of the top inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.
Bottom padding Determines the height of the bottom inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.

The Blog post contains the following default blocks:

  • Featured image
  • Title
  • Share
  • Content
  • Back to blog
  • Next and previous blog posts
The settings for the featured image block on the blog post page
Setting Description
Featured image height Determines the height of the blog post's featured image:
  • Adapt to image - Keeps the image's original aspect ratio.
  • Medium - 545 px
  • Large - 660 px

Title block

The settings for the title block on the blog post page
Setting Description
Show date Displays the date that the blog post was published.
Show author Displays the author of the blog post.
Show comment count Displays the the number of published comments of the blog post.

Share block

This block allows customers share the blog post on their social media. It has no adjustable settings.

Content block

This block displays the content of the blog post. It has no adjustable settings.

Back to blog block

Directs customers to the blog that the post belongs to. It has no adjustable settings.

Next and previous blog posts block

This block displays the previous and next blog posts within the same blog. It has no adjustable settings.

Cart page

By default, the cart page has:

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
Setting Description
Show vendor Displays the vendors of each product in the cart.

Items section padding settings

The padding settings for the section
Setting Description
Top padding Determines the height of the top inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.
Bottom padding Determines the height of the bottom inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.

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
Setting Description
Enable cart note Displays the Cart note field where customers can enter additional information.

Subtotal section padding settings

The padding settings for the section
Setting Description
Top padding Determines the height of the top inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.
Bottom padding Determines the height of the bottom inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.

Cart recommendations section settings

The Cart recommendations section presents complementary product recommendations upon cart addition. The recommendations are dynamic and based on the items in your cart. They change and improve with time.

The general settings for the cart recommendations section on the cart page
Setting Description
Heading The title of the section.
Heading size The size of the heading text:
  • Small
  • Medium
  • Large
Enable swipe on mobile Changes the mobile display to one row only, where customers can swipe sideways to see more products.
Display one column on mobile
Changes the mobile display to one product per row.

Cart recommendations section product card settings

The product card settings for the section
Setting Description
Image ratio The image ratio for the product images:
  • Adapt to image - Uses the aspect ratio of the images. This prevents the images from being cropped.
  • Square - Crops the images to use a 1:1 ratio.
  • Portrait - Crops the images to use a 2:3 ratio.
  • Landscape - Crops the images to use a 3:2 ratio.
  • Wide - Crops the images to use a 16:9 ratio.
Image focal point Choose the most important area of the image in view.
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 quick add to cart button When the customer hovers their cursor over the product image, displays a quick add to cart button. If product has variants, the button links to the product detail page.
Show vendor Displays the vendor for each product.
Show product rating Displays the average product rating in stars with the number of reviews in parenthesis, for example: ★★★★★ (8). Also requires a product review app such as Shopify Product Reviews, and metafield definitions for reviews.rating_count and reviews.rating.
Enable quick view
Adds a button that opens a popup displaying all the essential product details.
Enable color swatches
Displays colors in swatches for quick selection.

Cart recommendations section padding settings

The padding settings for the section
Setting Description
Top padding Determines the height of the top inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.
Bottom padding Determines the height of the bottom inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.

Shipping rates calculator section settings

The Shipping rates calculator section displays a tool that lets customers estimate their shipping costs before they proceed to the checkout page.

The settings for the shipping rates calculator section on the cart page
Setting Description
Heading The title of the section.
Heading size The size of the heading text:
  • Small
  • Medium
  • Large
Default country to use The default country used for the calculator. If your customer is logged-in, the country in his default shipping address will be selected.
Enable secondary background Adds a color to the background. The color is interpolated from the text color.

Shipping rates calculator section padding settings

The padding settings for the section
Setting Description
Top padding Determines the height of the top inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.
Bottom padding Determines the height of the bottom inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.

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 an Email signup section by default.

Password header section

The settings for the password header section on the password page
Setting Description
Logo image The logo that you want to display.
Custom logo height The height of the logo. From 30 px to 120 px. The default is 50 px.
Show separator line Displays a line to visually separate the password footer from the page's content.
The settings for the password footer section on the password page
Setting Description
Show separator line Displays a line to visually separate the password footer from the page's content.

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
Setting Description
Items per row Choose the number of results to display in each row on the search page. This section only applies if Layout is set to Grid.
Rows per page Choose the number of rows of results to display on the search page. This section only applies if Layout is set to Grid.
One column on mobile Changes the mobile display to one result per row. This section only applies if Layout is set to Grid.
Image ratio The image ratio for the images of the results:
  • Adapt to image - Uses the aspect ratio of the images. This prevents the images from being cropped.
  • Square - Crops the images to use a 1:1 ratio.
  • Portrait - Crops the images to use a 2:3 ratio.
  • Landscape - Crops the images to use a 3:2 ratio.
  • Wide - Crops the images to use a 16:9 ratio.
Image focal point Choose the most important area of the image in view.
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 quick add to cart button When the customer hovers their cursor over the product image, displays a quick add to cart button. If product has variants, the button links to the product detail page.
Show vendor Displays the vendor for each product.
Show product rating Displays the average product rating in stars with the number of reviews in parenthesis, for example: ★★★★★ (8). Also requires a product review app such as Shopify Product Reviews, and metafield definitions for reviews.rating_count and reviews.rating.
Enable quick view
Adds a button that opens a popup displaying all the essential product details.
Enable color swatches
Displays colors in swatches for quick selection.
Enable sticky toolbar
Displays the toolbar when the customer scrolls down.
Enable filtering

Lets customers filter the search results based on the filters in your Navigation settings.

Please note that, when you have over 1000 search results, the filters are hidden, as ruled by Shopify.
Enable sorting

Lets customers sort the search results based on the following:

  • Price, low to high - Displays the products from the lowest price to the highest price.
  • Price, high to low - Displays the products from the highest price to the lowest price.
Enable layout switcher
Lets customers change the layout.
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.
Show comment count For each blog post, displays the the number of published comments of the blog post.

Search results section padding settings

The padding settings for the section
Setting Description
Top padding Determines the height of the top inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.
Bottom padding Determines the height of the bottom inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.
Back to دعم Be Yours