Shopify Card Grid Section

Description of the Section

The Card Grid section is a versatile, customizable grid-based layout designed for showcasing different features, products, or any other items through visually appealing cards. Each card can include an image, headline, description, and a call-to-action (CTA) button. The grid adapts seamlessly across devices, offering either a slideshow view or a multi-column stacked display on mobile.

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

Sample Use Cases for a Shopify E-commerce Store

1. Product Showcases: Highlight featured products in an appealing grid format with images, brief descriptions, and direct links to product pages for quick purchase.
2. Customer Testimonials: Display customer reviews with their photos and snippets of their feedback, making customer experiences more relatable and impactful.
3. Blog Highlights: Showcase popular blog posts with featured images, titles, and excerpts, guiding visitors to explore the content more thoroughly.
4. Promotional Offers: Create visually appealing promotional banners with details on current offers, discount codes, and links to relevant collections or products.
5. Team Members Introduction: Introduce your team members with their photos, roles, and short biographies, adding a personal touch to your store's about page.

Overview of the Configuration Settings

The Card Grid section offers a variety of configuration settings to customize the look and feel:

Fonts

• Override theme fonts: Enable or disable custom fonts for the section.
• Text Font: Choose a custom font for regular text.
• Headline Font: Choose a custom font for headlines.

Text

• Text Size: Set the size of the text (10px to 50px).
• Line Height: Set the line height for text and headlines (multiple options).
• Headline Size: Set the headline size (10px to 50px).
• Headline Color: Choose the color for the headlines.
• Text Color: Choose the color for the text.

Section Design

• Background Color: Choose a background color or gradient for the section.
• Padding Top/Bottom: Set the padding at the top and bottom of the section.
• Padding Left/Right: Set the padding on the left and right of the section.
• Spacing between Elements: Adjust the spacing between the elements within the section.

Container Design

• Background Color: Choose a background color or gradient for the container.
• Max Width: Set the maximum width of the container.
• Padding Top/Bottom: Set the padding at the top and bottom of the container.
• Padding Left/Right: Set the padding on the left and right of the container.
• Round Borders on Container: Set the border radius for the container.
• Subtle Shadow on Container: Toggle a shadow effect on the container.
• Border Size on Container: Set the size of the border around the container.
• Border Color on Container: Choose the color for the container border.

Grid Design

• Columns: Set the number of columns in the grid (options include 1, 2, 3 columns, or Auto).
• Gap Between Cards: Set the spacing between cards.

Card Design

• Spacing between Elements: Set the spacing between elements within each card.
• Card Padding: Set the padding inside each card.
• Text Alignment: Choose the alignment of the text within the card.
• Card Text Size: Set the size of the text within cards.
• Card Headline Size: Set the size of headlines within cards.
• Card Background Color: Choose a background color for the cards.
• Card Text Color: Choose the color for the text within cards.
• Round Borders on Card: Set the border radius for the cards.
• Subtle Shadow on Card: Toggle a shadow effect on the cards.
• Show Hover Animation on Card: Enable or disable hover animations for the cards.

Button Style

• Padding Top/Bottom: Set the padding at the top and bottom of the button.
• Padding Left/Right: Set the padding on the left and right of the button.
• Round Borders on Button: Set the border radius for the buttons.
• Border Size on Button: Set the size of the border around the buttons.
• Border Color on Button: Choose the color for the button borders.
• Button Background Color: Choose a background color or gradient for the buttons.
• Button Text Color: Choose the color for the button text.
• Button Text Size: Set the size of the text within buttons.

Media

• Media Aspect Ratio: Set the aspect ratio for media elements (multiple options).
• Media Aspect Ratio (mobile): Set a different aspect ratio for media elements on mobile devices.

Mobile Display

• Mobile Display: Choose between slideshow or stacked layout for mobile display.
• Columns (when stacked): Set the number of columns when the layout is stacked on mobile.

Slideshow Settings (if mobile_display is set to slideshow)

• Slideshow Progress Background Color: Choose a background color for the slideshow progress indicator.
• Slideshow Progress Foreground Color: Choose a color for the foreground of the slideshow progress.
• Slideshow Indicator Color: Choose a color for slideshow indicators.
• Enable Autoplay?: Enable or disable autoplay for the slideshow.
• Autoplay Time: Set the duration for autoplay intervals (multiple options).

Headline

• Text Alignment: Set the alignment of the headline text.
• Headline: Customize the headline text.
• Text: Add a descriptive text below the headline.
• Spacing between Headline and Features: Adjust the spacing between the headline and the grid of features.

These numerous settings offer extensive customization, enabling you to adapt the Card Grid section to fit seamlessly with your Shopify store's design and branding.