Shopify Columns Premium Section

Description

Columns Premium is a highly customizable section designed to enhance your Shopify store with sophisticated layouts. Utilize this section to curate diverse content, including text, images, videos, and icons, in a grid-like format that adjusts to various screen sizes. The flexibility of Columns Premium enables you to showcase your products, promotions, and brand ethos seamlessly and strategically.

Demo

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

Sample Use Cases for a Shopify E-commerce Store

1. Product Showcases: Highlight specific products by using a combination of images, videos, and detailed descriptions.
2. Promotional Banners: Create eye-catching promotional banners that include countdown timers, special offer tags, and call-to-action buttons.
3. Customer Reviews and Testimonials: Display customer reviews with a five-star rating system alongside their testimonies to build trust.
4. Brand Stories: Share your brand’s journey through a series of rich texts, images, and videos to engage your audience.
5. Feature Highlights: Use icons with text to illustrate the features and benefits of your products or services.

Overview of the Configuration Settings

Font

• Override theme fonts: Option to apply custom fonts instead of the default theme fonts.
• Headline Font: Choose a custom font for headlines.
• Text Font: Choose a custom font for body text.

Text

• Text Size: Adjust text size between 10px to 50px.
• Text Line Height: Select from a range of line heights or inherit from the theme.
• Headline Size: Adjust headline text size between 10px to 50px.
• Headline Line Height: Select from a range of line heights or inherit from the theme.

Colors

• Text Color: Set the color for text.
• Link Color: Set the color for links.
• Background Color: Choose a background color for the text elements.

Section Design

• Background Color: Set a background color or gradient for the section.
• Padding Top/Bottom: Define padding for the top and bottom of the section.
• Padding Left/Right: Define padding for the left and right of the section.

Container Design

• Background Color: Set a background color for the container within the section.
• Max Width: Define the maximum width of the container.
• Padding Top/Bottom: Adjust padding for the top and bottom within the container.
• Padding Left/Right: Adjust padding for the left and right within the container.
• Round Borders on Container: Apply round borders to the container.
• Subtle Shadow on Container: Enable a subtle shadow effect for the container.
• Border Size on Container: Define the size of the container border.
• Border Color on Container: Set a color for the container border.

Grid Design

• Gap Between Columns: Set spacing between the grid columns.
• Gap Between Content Elements: Adjust the gap between individual content elements.
• Vertical Alignment: Control the vertical alignment of content (top, center, bottom).

Media Design

• Round Borders on Media: Apply round borders to media elements such as images and videos.
• Subtle Shadow on Media: Enable a subtle shadow effect for media elements.