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
  • Blocks
  • Hero block Fullwidth
  • Hero block 50-50
  • Hero block 60-40
  • Blocks settings
  • Video
  • Images
  • Text Content
  • Buttons
  1. Content sections

Hero

PreviousCommon settingsNextRichtext

Last updated 1 year ago

This is the main slideshow section where you can add images, videos, promo content, etc.

The main settings in the section are the ones listed and additional settings for:

  • height -- 3 predefined options for: large, medium and viewport height. These are applicable for desktop only. Viewport height means that the hero section will be as tall as the device screen.

  • enable carousel autoplay

  • autoplay interval (in case the autoplay is turned on)

Blocks

The hero slider supports 3 different block types:

  • Hero block Fullwidth

  • Hero block 50-50

  • Hero block 60-40

These blocks/slides can be added through here:

Here are some more details for each hero block type.

Hero block Fullwidth

This is a full width hero slide. Example:

Hero block 50-50

This is a 2 column slide where you can showcase different content in both columns.

Hero block 60-40

This block supports 2 columns where the first one takes around 60% of the width, and the second one takes the other part. The aside section holds 2 elements inside.

Blocks settings

Video

The video will be autoplaying muted by default. There is a setting to turn the autoplay off on mobile in order to lower the mobile data usage.

Note: please be aware that adding one or more autoplaying videos might impact your page speed results.

Images

Image fields

For each of the elements there are separate options for picking a desktop and mobile image. If only desktop image is picked - this image will be also shown on mobile.

For mobile we suggest using more portrait oriented images.

Overlay

In case you have white text over white background and the content is not very readable - you can easily add an overlay by adjusting its opacity and picking the overlay color.

Text Content

Along with the fields for Heading, Subheading and Paragraph, there are also settings for: content alignment and additional background.

The subheading, heading and paragraph items are marked in the screenshot below:

With the alignment settings you can move the content wherever you want like: top left, top right, bottom right, center, etc.

Here is an example with horizontally and vertically centered content:

Heading accent elements

The BOLD property will make the text to be shown in a different color which you can set through: Theme settings > The color style you used for the section > Typography > Headings accent color.

Here is an example result:

Buttons

This is only supported in the Fullwidth block type. There are options to choose the video from an external resource like YouTube or Vimeo, and an option to use a Shopify hosted video. More information about the video files in Shopify can be found here: .

In case you want to use highlight a text element in the headings you can use the Bold and Italic properties: . You can mark a word or a phrase and click one of these.

More details about the .

https://help.shopify.com/en/manual/products/product-media/product-media-types#videos
here
buttons here