Shopify Triptych Section

Description of the Section

The Triptych section by Sections Pro is a versatile layout component designed for Shopify stores. It comprises a grid-based structure with three side-by-side images and a content area. The section is highly customizable, allowing merchants to adjust fonts, colors, spacing, images, and more, to create a visually appealing display that can enhance product presentation or highlight key marketing messages.

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 "Triptych"
4. Click to Publish or Purchase

Sample Use Cases for a Shopify E-commerce Store

1. Product Showcase: Use the Triptych section to feature a new product line, with each image representing a different product variant.
2. Customer Testimonials: Display customer photos alongside their testimonials to build trust and credibility.
3. Seasonal Promotion: Highlight seasonal promotions or holiday sales with eye-catching images and compelling call-to-action text.
4. Brand Story: Share your brand's story with a combination of images and text to create a narrative that resonates with your audience.

Overview of the Configuration Settings

Font

• Override Theme Fonts: Enable or disable custom fonts for the section.
• Text Font: Select a custom font for the text.
• Headline Font: Select a custom font for the headline.

Text

• Text Size: Adjust the size of the text (10-50px).
• Text Line Height: Choose the line height for the text with options ranging from 1.05 to 1.75 or inherit from the theme.
• Text Color: Set the color of the text.
• Headline Size: Adjust the size of the headline (10-50px).
• Headline Line Height: Choose the line height for the headline with options ranging from 1.05 to 1.75 or inherit from the theme.
• Headline Color: Set the color of the headline.

Colors

• Background: Customize the background color of the section.

Dimensions

• Max Width of Section: Set the maximum width of the section.
• Gap Between Columns: Adjust the gap between the two grid columns.
• Gap Between Text Elements: Set the gap between different text elements.
• Padding: Set the padding for the top, bottom, left, and right sides of the section.
• Spacing Between Elements: Adjust the spacing between individual elements.

Content

• Headline: Enter the headline text with optional HTML formatting.
• Content: Provide the main content text with rich text formatting.
• Link Text: Set the text for the call-to-action link.
• Link URL: Specify the URL for the call-to-action link.

Images

• Image 1, 2, 3: Upload images for the three image slots in the Triptych layout.

Button Style

• Button Background Color: Choose the background color for the call-to-action button.
• Button Text Color: Set the color of the button text.
• Button Padding (Top/Bottom): Define the padding for the top and bottom of the button.
• Button Padding (Left/Right): Define the padding for the left and right sides of the button.
• Button Border Radius: Adjust the border-radius for the button to create rounded corners.

With these settings, merchants can efficiently tailor the Triptych section to match their store's branding and design aesthetics, enhancing their overall customer experience.