Image with text overlay
The Image with Text Overlay section blends visuals and text in a captivating layout, ideal for making impactful statements or highlighting key information on your store.
✅ Steps
-
Open the Theme Editor.
Navigate to your Shopify dashboard and open the Theme Editor for your store. -
Add the Image with text overlay section.
Click on 'Add section' and select 'Image with text overlay' to integrate this section into your page layout. -
Save your changes.
After customizing the Image with text overlay section, click 'Save' to implement your adjustments.
Edit Section Settings:
Color Scheme: Set the overall tone for the background.
Content Color Scheme: Choose a color for overlaying container background, text and buttons.
Desktop Layout Settings:
Full Width Toggle: Opt for a full-screen stretch to make a bold visual impact.
Section Height: Choose between 'Relative', 'Natural', or a precise pixel height ('Set by Pixels'), with a slider adjustment from 200px to 1200px for fixed heights.
Text Content Width: Adjust the text box width from 'Wide', 'Default', to 'Narrow'.
Text Position: Select text placement from options: Top Left, Top Center, Top Right, Left, Center, Right or Bottom Left, Bottom Center and Bottom Right.
Full Width Button: Optimize button design to match the content's width.
Margins: Fine-tune the top and bottom spacing for a polished layout.
Mobile Layout Settings:
Section Height: Choose between 'Relative', 'Natural', or a precise pixel height ('Set by Pixels'). If you chose 'Set by Pixels', you can make a slider adjustment from 200px to 800px for fixed heights.
Content positioning: Choose from 'Top', 'Center', 'Bottom'.
Full Width Button: Optimize button design to match the content's width.
Margins: Fine-tune the top and bottom spacing for a good looking mobile layout.
Customize Blocks:
Image (or Video):
Settings for desktop are required, while settings for mobile are optional and can be customized independently.
Mobile settings default to desktop settings if left unspecified.
Toggle Media: Choose between displaying an image or a video.
Image Picker/Video URL: Select an image or link a video URL (supports Youtube, Vimeo, and MP4 files).
Subheading & Heading: Add subheadings and headings, each with customizable HTML tags, size modifiers, and top margins for both desktop and mobile views.
Text: Incorporate rich text editor content with adjustable size and top margins.
Button:
Customization Options: Include up to two buttons per section, with editable labels, links, styles (Primary, Secondary, Link), size modifiers, and margin adjustments.