Shopify Image with Text Section

Description of the Section

The "Image with Text" section is a versatile and visually appealing component designed for Shopify stores. This section allows you to pair an image with accompanying text, enhancing your storytelling capability while maintaining a clean and modern layout. Customize the typography, colors, and dimensions to blend seamlessly with the rest of your site's design.

Demo of the Section

Installation Instructions

1. Download the Sections Pro app on the Shopify App Store
2. Open the app and navigate to Free Sections
3. Search for "Image with Text"
4. Click to Publish or Purchase

Sample Use Cases for a Shopify E-commerce Store

1. Product Showcase: Highlight the features of a new product with a compelling image and textual description.
2. Brand Story: Use a captivating image and a brief write-up to narrate your brand's story, mission, or values.
3. Promotions: Announce sales, special offers, or upcoming events with a visually appealing image and call-to-action button.
4. Customer Testimonials: Show customer photos alongside their testimonials to add authenticity and build trust.
5. Guides and Tutorials: Use instructional images paired with descriptive text to educate customers on how to use your products.

Overview of the Configuration Settings

• Font Settings:

  • Override theme fonts
  • Text Font (font picker)
  • Text Size (10px to 50px)
  • Line Height (range of values from 0.75 to inherit)
  • Text Color
  • Headline Font (font picker)
  • Headline Size (10px to 50px)
  • Headline Line Height (range of values from 0.75 to inherit)
  • Headline Color

• Colors:

  • Background Color

• Dimensions:

  • Max Width of Section
  • Padding (Top, Bottom, Left, Right)
  • Element Spacing
  • Grid Spacing
  • Grid Column Size (50/50, 60/40, 40/60)

• Content:

  • Image Location (left or right)
  • Image Aspect Ratio (21:9, 16:9, 4:3, 1:1, auto)
  • Image Border Radius
  • Subtle Shadow on Image
  • Image Picker
  • Text Alignment (center, left, right)
  • Headline
  • Content

• Button Style:

  • Button Background Color
  • Button Text Color
  • Button Text Size
  • Button Padding (Top/Bottom, Left/Right)
  • Button Border Radius
  • Link Text
  • Link URL