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

Shopify Image Price Grid Section

Learn how to create an Image Price Grid section with Sections Pro in Shopify

Description of the Section

The Image Price Grid section is a feature that allows Shopify store owners to create a visually appealing grid layout showcasing different pricing plans or product options. Each grid item can include an image, title, description, price, list of features, and a call-to-action (CTA) button. This makes it easy for customers to compare different offerings and take action on their interests.

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

Sample Use Cases for a Shopify E-commerce Store

  1. Subscription Plans: E-commerce stores offering subscription services can use this section to display various subscription plans with different features and pricing tiers.
  2. Product Comparisons: Stores selling products in different variations (e.g., sizes, qualities, bundles) can use this layout to showcase the differences and prices in a side-by-side format.
  3. Service Packages: Businesses offering services (e.g., consulting, marketing) can highlight different packages with distinct features, helping clients choose the one that fits their needs.
  4. Special Promotions: Highlight limited-time offers and special deals in an organized and attractive manner to capture the customers' attention quickly.

Overview of the Configuration Settings

  1. Fonts and Text

    • Text Font: Choose the font for the text.
    • Text Size: Set the size of the text.
    • Headline Font: Choose the font for headlines.
    • Headline Size: Set the headline size.
    • Price Size: Set the size of the price text.

  2. Colors

    • Background: Choose the background color or gradient.
    • Text Color: Set the color for the text.
    • Headline Color: Set the color for headlines.
    • Price Color: Set the color for price text.
    • Highlight Color: Set the color for highlighted elements.
    • Button Background Color: Choose the background color for buttons.
    • Button Text Color: Set the color for button text.
    • Highlighted Button Background Color: Choose the background color for highlighted buttons.
    • Highlighted Button Text Color: Set the color for highlighted button text.

  3. Dimensions

    • Media Aspect Ratio: Select the aspect ratio for media images.
    • Max Width of Section: Set the maximum width of the section.
    • Gap Between Reviews: Define the gap between grid items.
    • Padding (Top, Bottom, Left, Right): Set padding values for all sides.

  4. Styling

    • Round Borders on Media: Set the border-radius for media, making images have rounded corners.
    • Subtle Shadow on Media: Enable or disable a subtle shadow on media items.

  5. Price Items

    • Highlighted: Mark the item as highlighted.
    • Image: Upload an image for the item.
    • Title: Set the title for the item.
    • Description: Add a description.
    • Price: Display the price.
    • Features: List out up to 8 bullet features for the plan or product.
    • Button: Configure the call-to-action button's link and title.