Shopify Feature Grid Section

Description of the Section

The Feature Grid section is a versatile and visually appealing section designed to highlight key features or products on your Shopify store. It allows you to showcase multiple items in a grid layout with customizable images, headlines, and call-to-action buttons. Perfect for drawing attention to new arrivals, bestsellers, or special promotions, the Feature Grid section adapts to various screen sizes for optimal viewing on both desktop and mobile devices.

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

Sample Use Cases for a Shopify E-commerce Store

1. Highlighting New Arrivals: Showcase the newest additions to your store with high-quality images, compelling headlines, and direct links to product pages.
2. Promoting Bestsellers: Draw attention to your best-selling products to potential customers, enhancing their visibility and potentially boosting sales.
3. Seasonal Collections: Feature seasonal or themed collections with eye-catching visuals and a cohesive layout, ideal for holiday promotions or limited-time offers.
4. Customer Testimonials: Use the grid layout to present customer reviews or testimonials with images, ensuring they stand out and add credibility to your store.
5. Special Promotions: Announce time-sensitive deals or discounts with prominent headlines and call-to-action buttons, encouraging immediate customer action.

Overview of the Configuration Settings

1. Font Settings:

   • Override theme fonts: Option to override the default theme fonts.
   • Text Font: Choose the font for the text.
   • Headline Font: Choose the font for the headline.

2. Text Settings:

   • Text Size: Adjust the text size (10-50px).
   • Line Height: Set the line height for the text (multiple options including inherit).
   • Headline Size: Adjust the headline size (10-50px).
   • Headline Line Height: Set the line height for the headline text.

3. Color Settings:

   • Background: Set the background color or image.
   • Cover Background: Set the background color or image for the cover overlay.
   • Cover Opacity: Adjust the opacity of the cover background (0-100%).
   • Text Color: Choose the color for the text.

4. Button Style:

   • Padding Top/Bottom: Set the top and bottom padding for the buttons.
   • Padding Left/Right: Set the left and right padding for the buttons.
   • Round Borders on Button: Adjust the border radius of the button (0-50px).
   • Button Background Color: Choose the background color for the button.
   • Button Text Color: Choose the text color for the button.

5. Dimensions:

   • Max Width of Section: Set the maximum width of the section.
   • Gap Between Reviews: Adjust the gap between the grid items.
   • Padding (Top, Bottom, Left, Right): Set the padding for the section.

6. Design:

   • Media Aspect Ratio: Set the aspect ratio for the media (multiple options).
   • Media Aspect Ratio (mobile): Set the mobile aspect ratio for the media.
   • Round Borders on Media: Adjust the border radius of the media (0-50px).
   • Subtle Shadow on Media: Enable or disable a shadow effect on the media.

7. Mobile Display:

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

8. Slideshow Settings (Mobile Only):

   • Slideshow Progress Background Color: Set the background color for the slideshow progress.
   • Slideshow Progress Foreground Color: Set the foreground color for the slideshow progress.
   • Slideshow Indicator Color: Set the indicator color for the slideshow.
   • Enable Autoplay: Toggle autoplay for the slideshow.
   • Autoplay Time: Set the time interval for autoplay (multiple options).