Taiga
documentation

Image with text

The "Image with Text" section is a flexible and visually engaging part of your website that allows you to effectively showcase your brand, products, or any important content. This section can include one image/video block, comprehensive text elements like a paragraph, heading, and subheading, and up to two button blocks for calls to action.

✅ 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 Section.
    Click on 'Add section' and select 'Image with Text' to integrate this section into your page layout.
  3. Save your changes.
    After customizing the Image with text Section section, click 'Save' to implement your adjustments.

Section Settings:

Style and Layout:

Color Scheme: Utilizes the primary color scheme set within the theme settings, ensuring consistency across your site.
Desktop Section Width: Choose between full width to span the entire screen or conform to the page width for a more contained look.
Desktop Image Position: Position the image on either the left or right side of the section. By default, the mobile layout displays the image first.
Text Content Width: Options include Wide, Default, or Narrow to suit the design and content needs.
Full Width Button Toggle: Enable or disable full width for buttons, allowing them to either span across the section or align with the text content.

Desktop/Mobile Text Alignment:Set basic text alignment settings (Left, Right, Center) to optimize readability and layout aesthetics on both desktop and mobile views.
Desktop/Mobile Margin: Adjust the section's top and bottom margins to ensure adequate spacing and visual balance for both mobile and desktop layouts.


Customize  Blocks:

Image (or Video) Block:

Image picker: Choose an image
Aspect Ratio: Set the aspect ratio for the displayed media to ensure it fits well within the section layout.
Media Toggle: Switch between displaying an image or a video based on the content strategy.
Image Link: Add an additional URL for the image, enabling it to act as a link if pressed. This can be a direct URL or sourced from metafields.

 

Text Block:

Text: Add further descriptive or supplementary text.
Size Modifier and Margin Top: Adjust for optimal readability and spacing.


Button Block:

Button Label: Define the text that appears on the button.
Button Style: Select from Primary, Secondary, or Link styles to match the button with your site's theme.
Desktop & Mobile Layout for Button:
Heading Size Modifier: Adjust the button's size for both desktop and mobile layouts, with the same range of size options.
Margin Top Slider: Set the top margin to position the button perfectly within the section.