Tiles is a Shopify theme section in the Section Star library. Stack your visuals for maximum impact — a bold tiled image layout that transforms into a smooth slideshow on mobile, so it always looks great.
About the Tiles section
The Tiles section is a versatile and aesthetically pleasing feature that enables you to display content in a tile-based grid format on your Shopify store. This section allows you to present images, headlines, and text organized into interactive tiles. You can customize the appearance, dimensions, and behavior of these tiles to align with your store's branding and design preferences. The responsive design ensures that your content looks great on both desktop and mobile devices.
Live demo
Use cases
-
Product Highlight: Use the Tiles section to showcase featured products. Each tile can include a product image, a catchy headline, a brief description, and a link to the product page. This can be a great way to attract attention to new arrivals or best-sellers.
-
Categories Display: Create visually appealing navigation tiles that represent different product categories. Each tile can include an image related to the category, a headline, and a link to the category page.
-
Customer Testimonials: Highlight customer reviews and testimonials. Use each tile to display a reviewer's photo, their name, the review headline, and a snippet of their feedback. This can build trust and credibility with potential customers.
-
Blog Posts: Promote recent blog posts by displaying them in tiles. Include the post's featured image, title, a brief excerpt, and a link to the full article. This can drive more traffic to your blog and keep your audience engaged.
-
Special Promotions: Advertise ongoing sales, discounts, or special events. Each tile can detail a specific promotion, including an eye-catching image, a headline, and a call-to-action link.
Settings
Every setting below appears in the Shopify theme customizer once the section is published.
Tile Design
Set settings for the grid
| Setting | Type | Default |
|---|---|---|
| Show Text Shadow | Checkbox | Off |
| Tile Text Color | Color | #fff |
| Tile Text Size | Range | 22 |
| Tile Height | Number | 250 |
| Gap Between Tiles | Number | 20 |
Media Design
Set settings for the media in the grid
| Setting | Type | Default |
|---|---|---|
| Round Borders on Media | Range | 5 |
| Subtle Shadow on Media | Checkbox | On |
| Image Width | Number | 1000 |
| Mobile Image Width | Number | 1000 |
Mobile Display
Set the mobile display
| Setting | Type | Default |
|---|---|---|
| Mobile Columns | Select (1 Column, 2 Columns) | — |
| Mobile Gap Between Tiles | Number | 10 |
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 |
Tile block settings
| Setting | Type | Default |
|---|---|---|
| Background Image | Image | — |
| Headline | Inline rich text | <b>Feature Headline</b> |
| Text (optional) | Inline rich text | — |
| Tile link (optional) | URL | — |
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 “Tiles”.
- 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.