Add to your Store
Home Why us? Documentation Privacy Policy Refund Policy Get in Touch

Shopify Diptych Section

Learn how to create a Diptych section with Sections Pro in Shopify

Description of the Section

The Diptych section is a versatile Shopify component designed to enhance your store's visual appeal and user experience. This section allows you to create a dynamic layout with text, images, and customizable call-to-action buttons, all while maintaining a consistent design language.

Demo of the Section

Installation Instructions

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

Sample Use Cases for a Shopify E-commerce Store

  1. Promotional Banners: Use the Diptych section to highlight new product launches, special offers, or seasonal sales with eye-catching visuals and text.
  2. Customer Testimonials: Showcase customer reviews and ratings with five-star icons and testimonial text to build trust and credibility.
  3. Product Highlights: Feature key products or collections with high-quality images, descriptions, and call-to-action buttons for easy navigation.
  4. Brand Storytelling: Use the rich text and image options to tell the story of your brand, its mission, and its values to create a meaningful connection with your audience.
  5. Pairing Products: Showcase complementary products together, helping customers to see how items can be combined, increasing the likelihood of upsells and cross-sells.

Overview of the Configuration Settings

  1. Font Settings:

    • Override theme fonts option.
    • Text Font and Headline Font selection using the font picker.

  2. Text Settings:

    • Text Size: Adjustable from 10px to 50px.
    • Text Line Height: Multiple options ranging from 1.05 to inherit.
    • Text Color: Customizable.

  3. Headline Settings:

    • Headline Size: Adjustable from 10px to 50px.
    • Headline Line Height: Multiple options ranging from 1.05 to inherit.
    • Headline Color: Customizable.

  4. Color Settings:

    • Background Color: Select a gradient or solid color for the section background.

  5. Dimension Settings:

    • Max Width of Section: Set the maximum width.
    • Gap Between Columns: Define space between grid columns.
    • Content Spacing: Set space between text elements.
    • Padding: Adjustable padding for top, bottom, left, and right.

  6. Image Settings:

    • Select images for Image 1 and Image 2.
    • Adjust tilt for Image 1 and Image 2.

  7. Block Types:

    • Headline: Add and customize headline text.
    • Paragraph: Add and customize paragraph text.
    • Content: Add content with different HTML tags.
    • Rich Text: Use rich text editor for more complex content.
    • Button: Add primary and secondary call-to-action buttons with customizable styles.
    • 5 Star: Display five-star icons with customizable color.
    • Icon with Text: Combine icons and text with various customization options.
    • Image Icon with Text: Use images alongside text with adjustable size and aspect ratios.
    • Image: Add images with optional links and display settings.
    • Custom Liquid: Insert custom Liquid code for advanced customization.

These settings offer a high degree of flexibility to tailor the section’s appearance and functionality to suit your store's branding and marketing needs.