Marble Documentation
Contact usBigStart.io
  • Marble - Documentation
  • Global settings
    • Info
    • Color styles
    • Typography
    • Buttons
    • Global
    • Currency format
    • Cart
    • Products
    • Swatches
    • Social media
    • Favicon
    • Checkout
  • Global Features
    • Focal Points
    • Custom product badges
  • Global sections
    • Cookie banner
    • Newsletter popup
    • Announcement bar
    • Header
    • Product quick view
    • Footer
  • Content sections
    • Content sections
    • Common settings
    • Hero
    • Richtext
    • Featured products
    • Marquee
    • 70/30 Images with content
    • Image with text
    • Featured collections
    • Featured collection
    • Banner
    • Promo bar
    • Shop the look
    • Featured blog
    • USPs
    • Newsletter banner
    • 50/50 Image
    • 50/50 Text
    • Card Grid
    • Custom liquid
    • Featured product
    • Promo columns
    • Richtext with logos
    • Social feed
    • Testimonials
    • Video
    • Store
    • Masonry
    • Countdown offer section
    • Separator
    • Recently viewed
    • Image gallery
    • Products grid
    • Collage grid
  • Pages
    • Collections list
    • Collection page
    • Product page
    • Size guide page
    • Cart page
    • FAQ page
    • Contact page
    • Creating custom pages
    • Blog
Powered by GitBook
On this page
  1. Global Features

Focal Points

PreviousCheckoutNextCustom product badges

Last updated 2 years ago

Focal points are supported in Marble 1.1.0 and above versions.

Focal points give you more control over the way your image is displayed when you use different aspect ratios, and on varying screen sizes. You can only have one focal point per image, but you can change it or remove it at any time.

More details from Shopify's guide here: .

Example

Let's say that you have the hero section in your homepage and you want it to be shorter. For example you pick the Medium height setting and you have the section like this:

Then you add an image to the first slide and the image gets cropped. For example like this:

In the example it's obvious that only the top part of the image is shown as the section is short, but the image is tall so it gets cropped.

Here is where Focal Points come into play. You can pick whatever point you want to be focused and it will be centered within the picture.

Within the above example, if we want the focal point to be the bag, we click on the Edit button over the image and add a point over the bag.

Here is a short vide showing how this works.

https://help.shopify.com/en/manual/online-store/images/theme-images#set-a-focal-point-on-a-theme-image