Amber Documentation
  • Amber - Documentation
  • Global Settings
    • Info
    • Typography
    • Colors
    • Styles
    • Search Suggestion
    • Variants and Swatches
    • Product card
    • Breadcrumbs
    • Localization
    • Price
    • Social Media
    • Favicon
    • Cart
    • Animation
    • Checkout
  • Global Features
    • Focal Points
    • Custom product badges
  • Global Sections
    • Announcement bar
    • Header
    • Cookie banner
    • Newsletter popup
    • Product quick view
    • Size guide
  • Content Sections
    • Content sections
    • Common settings
    • Featured collections
    • Featured product
    • Image with text
    • Custom liquid
    • FAQ
    • Featured blog
    • Featured cards
    • Featured products
    • Hero slider
    • Image with products gallery
    • Image with text overlay
    • Logos
    • Media banner
    • Newsletter banner
    • Richtext
    • Shop the look
    • Shop the Look recommendations
    • Size guide
    • Social images
    • Testimonials
    • Marquee
  • Pages
    • Collections list
    • Collection page
    • Product page
    • Size guide page
    • Cart page
    • Contact page
    • Blog
Powered by GitBook
On this page
  1. Content Sections

Hero slider

PreviousFeatured productsNextImage with products gallery

Last updated 1 year ago

The main settings in the section are the ones listed here. The additional settings are listed below.

  • Aspect ratio for desktop -- The setting determines the height of the section. If set to Viewport it will take the screen size, excluding the height of the header

  • Enable arrows -- If there are more than one block added, the section will turn into a slider. If this setting is enabled, this will show the slider arrows for previous and next slide

  • Effect fade -- Makes the slider to fade between the slides instead of sliding

  • Enable loop mode -- If you reach the end of the slides, they will start from the begging. If this is unchecked, the slider will stop on the last slide.

  • Enable pagination -- This setting enables the dots at the bottom of the slider

  • Pagination position -- You can change the position of the dots

  • Autoplay -- Enable or disable the autoplay of the slider

  • Slideshow Interval -- You will first need to enable the autoplay option. This setting determines the time between changing the slides

  • Aspect ratio for mobile -- Set a specific aspect ratio of the height of the slider for mobile

Slides

Every slide is set up as a new block in the Hero slider section.

The slides have the following settings:

Colors

  • Text -- You can set up the color of the text

  • Overlay color -- With this setting, you have several options: * Set a solid color for the slide * Set an overlay color (by decreasing its opacity) * Set an overlay gradient and specify its position, opacity and so on.

Media

You can specify separate images for desktop and mobile. If the mobile image is missing, then the one from desktop will be shown on mobile devices.

Another option you have here is to upload a video file. You can either upload it in Shopify using the native video uploader, or paste an external link in the External video field.

Text content

This section is responsible for the content of the slide and its position.

  • Vertical content alignment -- You can choose between Top, Center or Bottom vertical position

  • Horizontal content alignment -- You can choose between Left, Center or Right vertical position

  • Heading and Subheading -- Specify the text showing on top of the image:

Buttons

You can add up to two buttons, one after the other. For every button you can specify its label, link and button style.

You can also overwrite the default hover style by selecting the Button hover style outline checkbox.