Shopify Price Grid Section

Description of the Section

The Price Grid section allows Shopify store owners to display various pricing plans or packages in an organized and visually appealing layout. Each pricing plan can include a title, description, price, and a list of features. Additionally, you can highlight specific plans to make them stand out. This section is built using the Sections Pro app for Shopify, ensuring easy integration and customization.

Demo of the Section

Refer to the demo below to see a typical layout of the Price Grid section:

Installation Instructions

To install the Price Grid section on your Shopify store, follow these steps:

1. Download the Sections Pro app on the Shopify App Store
2. Open the app and navigate to Free Sections
3. Search for "Price Grid"
4. Click to Publish or Purchase

Sample Use Cases for a Shopify E-Commerce Store

1. Subscription Services: Ideal for stores offering recurring subscription plans, such as meal delivery services, online classes, or software subscriptions.
2. Product Bundles: Perfect for showcasing bundled product deals where customers can see different package options and their benefits.
3. Membership Tiers: Great for businesses offering multiple membership tiers with varying levels of benefits and exclusive content.
4. Service Packages: Useful for service-based businesses to present different service packages, such as consultation hours, maintenance plans, or custom project rates.

Overview of the Configuration Settings

The Price Grid section comes with a variety of configuration settings to customize the appearance and content:

Text Settings

• Text Font: Choose the font for the text (Default: sans-serif).
• Text Size: Adjust the text size (Range: 10px - 50px, Default: 15px).
• Headline Font: Choose the font for the headlines (Default: sans-serif).
• Headline Size: Adjust the headline size (Range: 10px - 50px, Default: 25px).
• Price Size: Adjust the price size (Range: 10px - 75px, Default: 40px).

Color Settings

• Background Color: Set the background color of the section (Default: linear-gradient(164deg, #fff 0%, #fff 0%)).
• Text Color: Set the color of the text (Default: #111).
• Headline Color: Set the color of the headlines (Default: #111).
• Price Color: Set the color of the price (Default: #111).
• Highlight Color: Set the color of the highlighted features (Default: #111).
• Button Background Color: Set the background color for buttons (Default: linear-gradient(164deg, #111 0%, #333 100%)).
• Button Text Color: Set the text color for buttons (Default: #fff).
• Highlighted Button Background Color: Set the background color for highlighted buttons (Default: linear-gradient(164deg, #10D01A 0%, #10D01A 100%)).
• Highlighted Button Text Color: Set the text color for highlighted buttons (Default: #fff).

Dimension Settings

• Media Aspect Ratio: Choose the aspect ratio for media (Options: 21:9, 16:9, 4:3, 1:1, Default: 1:1).
• Max Width: Set the maximum width of the section (Default: 1000px).
• Grid Gap: Set the gap between price items (Default: 20px).
• Padding Top: Set the top padding (Default: 25px).
• Padding Bottom: Set the bottom padding (Default: 25px).
• Padding Left: Set the left padding (Default: 10px).
• Padding Right: Set the right padding (Default: 10px).
• Media Radius: Adjust the rounding of borders on media (Range: 0px - 50px, Default: 5px).
• Media Shadow: Toggle the subtle shadow on media (Default: true).

Block Settings (for each Price Item)

• Highlighted: Highlight specific price item (Default: true).
• Title: Set the title of the price item (Default: "Standard").
• Description: Set the description of the price item (Default: "Perfect for Getting Started").
• Price: Set the price of the item (Default: "$25 / mo").
• Features: Set up to 8 bullet features for each price item.
• CTA Link: Provide a URL for the call to action button.
• Button Title: Set the title of the button (Default: "Get Started").