Image Price Grid is a Shopify theme section in the Section Star library. Show pricing in a grid with a hero image for each price item.
About the Image Price Grid 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.
Live demo
Use cases
- Subscription Plans: E-commerce stores offering subscription services can use this section to display various subscription plans with different features and pricing tiers.
- 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.
- 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.
- Special Promotions: Highlight limited-time offers and special deals in an organized and attractive manner to capture the customers' attention quickly.
Settings
Every setting below appears in the Shopify theme customizer once the section is published.
Grid Design
Set settings for the grid
| Setting | Type | Default |
|---|---|---|
| Gap Between Testimonials | Number | 20 |
Column Design
Set settings for the price columns
| Setting | Type | Default |
|---|---|---|
| Background Color | Color or gradient | linear-gradient(319deg, rgba(255, 255… |
| Round Borders | Range | 5 |
| Subtle Shadow | Checkbox | On |
| Highlight Color | Color | #111 |
Image Design
Set the display for the image
| Setting | Type | Default |
|---|---|---|
| Image Aspect Ratio | Select (21:9, 16:9, 4:3, 1:1, auto) | 16 / 9 |
| Image Width (size requested from Shopify) | Number | 600 |
| Mobile Image Aspect Ratio | Select (21:9, 16:9, 4:3, 1:1, auto) | 16 / 9 |
| Mobile Image Width (size requested from Shopify) | Number | 800 |
Button Design
Set the display for the button
| Setting | Type | Default |
|---|---|---|
| Button Background Color | Color or gradient | linear-gradient(164deg, #111 0%, #333… |
| Button Text Color | Color | #fff |
| Button Background Color | Color or gradient | linear-gradient(164deg, #10D01A 0%, #… |
| Button Text Color | Color | #fff |
Headline
Set text for the headline
| Setting | Type | Default |
|---|---|---|
| Text Alignment | Text alignment | center |
| Mobile Text Alignment | Text alignment | center |
| Headline | Inline rich text | <b>Sample Headline</b> |
| Text | Inline rich text | Use this block to add a description. … |
| Spacing between Headline and Features | Number | 15 |
Price Item block settings
| Setting | Type | Default |
|---|---|---|
| Highlighted | Checkbox | On |
| Image | Image | — |
| Title | Inline rich text | <b>Standard</b> |
| Description | Inline rich text | Perfect for Getting Started |
| Price | Inline rich text | $25 / mo |
Features
Features for the plan. Leave blank to skip.
| Setting | Type | Default |
|---|---|---|
| Bullet 1 | Text | Bullet Feature 1 |
| Bullet 2 | Text | Bullet Feature 2 |
| Bullet 3 | Text | Bullet Feature 3 |
| Bullet 4 | Text | Bullet Feature 4 |
| Bullet 5 | Text | Bullet Feature 5 |
| Bullet 6 | Text | Bullet Feature 6 |
| Bullet 7 | Text | — |
| Featue 8 | Text | — |
Button
Link and title for the button
| Setting | Type | Default |
|---|---|---|
| Call to Action Link | URL | — |
| Button Title | Text | Get Started |
How to add this section to a Shopify store
- Install Section Star from the Shopify App Store.
- Open the app and search the library for “Image Price Grid”.
- Click Publish, then choose a name and the theme to publish into.
- Follow the deep link into the Shopify theme customizer.
- Add the section to any page and customize it with the native theme settings.
No code is required, and the section lives in your theme as ordinary Liquid — see the full install guide.