This section allows you to show an image with text overlay. It is usually located on Home Page. However, Shopify 2.0 allows you to add Image with text overlay to any pages that you want. From Theme Custom > Go to Add section > Search and add Image with text overlay.
HEIGHT SETTINGS
- Section height: There are totally 3 options. They are Full screen height, Adapt to image, Custom height. When selecting Custom Height, you can adjust the height for each devices (Desktop, Tablet, Mobile) on Use Custom height on
IMAGE SETTINGS
- Image: This option allows you to upload an image from your device.
- Enable parallax scroll: Turn on this option to use parallax for image when scroll.
- You can also adjust Image alignment for Image.
CAPTION SETTINGS
- You can adjust Caption Width, Caption vertical position, Caption horizontal position, and Text alignment for the content.
CAPTION MOBILE SETTINGS
- You can also adjust Caption Width, Caption vertical position, Caption horizontal position, and Text alignment for the content on Mobile device.
COLOR
- You can decide to choose Use text shadow or not.
- You can also adjust Overlay and Overlay opacity for the section.
DESIGN OPTIONS
- Layout: You can choose between Container and Full width. Besides, you can also choose background color for layout.
- Margin, Padding: You are allowed to change both of them.
DESIGN MOBILE OPTIONS
- Margin, Padding: You are allowed to change both of them for mobile devices.
2. Image With Text Overlay Content
2.1. Heading
Image with text overlay > Add block > Heading. You can enter and change font, size, color for heading on Desktop, Mobile.
2.2. Sub heading
Image with text overlay > Add block > Sub heading. This option allows you to enter and adjust Sub heading for section.
2.3. Button
Image with text overlay > Add block > Button. This option allows you to enter and adjust button for section.
2.4. Space & Space HTML
- Image with text overlay > Add block > Space between/HTML space. This option allows you to create space among blocks.
- Space between: Allows you to change space between two blocks for both desktop and mobile devices.
- HTML space: Allows you to add space with color between two blocks of content.
2.5. Countdown timer
- Image with text overlay > Add block > Countdown timer. This option allows you to add countdown timer to image. You can adjust day, designs, sizes for countdown timer.
2.6. Image(Child)
Image with text overlay > Add block > Image(child). From here, you can upload an image and adjust Image max width, unit:px and Image max width (mobile), unit:px.
