Shopify Tiles Section

Description of the 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.

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

Sample Use Cases for a Shopify E-commerce Store

1. 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.

2. 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.

3. 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.

4. 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.

5. 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.

Overview of the Configuration Settings

• Text Settings:

  • Text Font: Choose the font style for the text displayed in the tiles.
  • Text Size: Adjust the size of the text (10px to 50px).

• Headline Settings:

  • Headline Font: Choose the font style for the headlines displayed in the tiles.
  • Headline Size: Adjust the size of the headlines (10px to 50px).

• Colors:

  • Background: Set the background color or image for the section.
  • Cover Background: Set the background color or gradient for the cover overlay of the tiles.
  • Cover Opacity: Adjust the opacity of the cover overlay (0% to 100%).
  • Headline Color: Set the color of the headlines.
  • Text Color: Set the color of the text.
  • Highlight Color: Set the color for highlighted elements (e.g., dots in the carousel).

• Dimensions:

  • Height of Tiles: Set the height of the tiles.
  • Max Width of Section: Set the maximum width of the section.
  • Gap Between Tiles: Set the space between the tiles.
  • Padding: Adjust the padding values for the top, bottom, left, and right edges.

• Design:

  • Round Borders on Media: Set the border radius for the tiles.
  • Subtle Shadow on Media: Enable or disable a subtle shadow effect on the tiles.

• Slideshow (mobile only):

  • Enable Autoplay: Toggle autoplay for the tile carousel on mobile devices.
  • Autoplay Time: Set the time interval for autoplay (2s to 10s).