Taiga
documentation

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

  1. Open the Theme Editor.
    Navigate to your Shopify dashboard and open the Theme Editor for your store.
  2. 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.
  3. 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). 

Text:
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.