Shella Shopify Theme
  • User Manual
  • Shopify help
  • Get Started
    • How to create a new Template
    • How to add and edit a Page
    • How to build Metaobjects
    • How to find a handle
    • Filters logic
    • Pre-Order
  • Product variants
  • Header
    • Theme Blocks
  • Footer
    • Theme Blocks
  • Metafields
    • How to create custom filters
  • Theme Sections
    • Builder
      • Promo box (Banner)
      • Slick Slider
      • Revolution Slider
      • Instagram
      • Product column
      • Custom HTML
      • Space for vertical menu
    • Spacer
    • Article carousel
    • Brand carousel
    • Product carousel
    • Review carousel
    • Contact form
    • FAQs
    • Gallery
    • Information line
    • Search form
    • Subscription form
    • Brands
    • Collections
    • Lookbook
    • One product
    • Collection page heading
      • Theme Blocks
    • Collection banner builder
      • Theme Blocks
    • Ticker
  • Products
    • Product page
      • Theme blocks
    • Related product carousel
    • Usage information sidebar
  • Collections
    • Product grid
      • Current filters
      • Collections
      • Filters
      • Filter settings
      • Tags
      • Products
      • Custom HTML
      • Subscription
      • Promo box (Banner)
  • Collections list
  • Page categories
    • Policy page
    • Lookbook
      • Page
    • Gallery
      • Page
    • FAQs
      • Page
    • Contact
      • Page
    • Brands
      • Page
    • Password
      • Social media
    • Search
      • Current filters
      • Filters
      • Filter settings
      • Products
      • Custom HTML
      • Subscription
      • Promo box (Banner)
    • Quick view
  • Blogs
    • Theme Blocks
  • Blog posts
    • Theme Blocks
  • Theme settings
    • Quick Start
    • License
    • Logo and Favicon
    • Layout
    • Colors
    • Typography
    • Collection and Search page
    • Product -> General
    • Product -> Variants
    • Product -> Collection Page
    • Product Page and Quick View
    • Search
    • Currency
    • Cart
    • Wishlist and Compare
    • Payments
    • Social Media
    • News Subscription
    • Blog and Article Pages
    • Account
    • Reviews
    • Services
    • Apps and Language
    • Button, Input and Promo Box
    • Notifications
    • Pre-loader
    • Animations
    • Developer
    • Custom CSS
  • Theme features
  • Back to Help Center
Powered by GitBook
On this page
  • Image
  • Image height (in % of the width)
  • Image resize
  • Image border-radius
  • Show second images on hover
  • Labels
  • Elements
  • Centered information
  • Trim title to one line
  • Elements for list mode
  • Show quantity

Was this helpful?

  1. Theme settings

Product -> Collection Page

This section includes settings to configure the collection info page.

PreviousProduct -> VariantsNextProduct Page and Quick View

Last updated 1 year ago

Was this helpful?

Theme settings -> Product -> Collection Page

Image

Image height (in % of the width)

Here you have a zoom slider (with a scale from 50% to 150%) where you can decide what height (in % of the width) your image will have on the collection page.

Here are the examples of some variants:

Less than 100 - landscape.

100 - square image.

More than 100 - portrait.

Please note, this option doesn't work for 'Image resize = Auto' which comes next.

Image resize

Here you have 5 images resize options:

  • Auto - if you choose this option, ignore the previous option of the image height (in % of the width). The image container and the image size are generated based on the source image dimensions.

  • Stretch by width - in this option, the image width fits the container width. It is centered vertically. If the image height is more than the container, cut the image from the top and the bottom. If the image height is less than the container, add white space at the top and the bottom of the image.

  • Stretch by height - in this option, the image height fits the container height. The image is centered horizontally.

Image border-radius

Here you have a zoom slider for the image border-radius (with a scale from 0 to 50), which allows you to change the image corners from sharp to round ones. The level of roundness is up to you:

Show second images on hover

If you enable this option the second image of the product will be shown when you hover your mouse over the product´s image.

Labels

Here you can decide which labels should be shown on the product on the collection page. The following labels are available: “In stock”, Pre-order”, “Out of stock”, “New”, “Hot”, and “Sale”:

Please note, you can configure “New” and “Hot” labels via Metafields.

Elements

Centered information

If you enable this option the product´s information will be shown centered under the product:

Other elements

Additionally, you can decide whether type, vendor, or collections should be shown before the product´s title, and then choose what elements should be shown under the image. In our example, we show it in a mobile version:

Trim title to one line

This option enables you to show the product's title in one line both on desktop and mobile view. This is what it may look like:

Elements for list mode

Here you can choose what elements should be shown when the product is viewed in a list mode:

Show quantity

Shows quantity input. This option applies only to the collection page, product list “Design #2”.

Contain - CSS object-fit = contain. If you choose this option, the image will look like an .

Cover - CSS object-fit = cover. If you choose this option, the image will look like an .

Check this for more details about the product meta fields.

In case you need to change the product list design, navigate to Collections -> Product grid -> Grid. More information you can find .

object-fit demo
object-fit demo
help page
here