Skip to main content

Getting Started

Creating Your First Tile

1. Access Tile Studio

  • Open the app and navigate to the left-hand side menu.
  • Click on Tiles. This is where all your created tiles are displayed and managed.

2. Create a New Tile

  • In the Tiles section, click on the Create New Tile button in the top-right corner.

3. Name and Select a Template

  • Top Left: Name your tile (e.g., "VIP Collection").
  • Left Sidebar: Choose a pre-built template or start with a blank canvas. Templates allow for quick plug-and-play setups.

4. Customize the Tile Layout

  • Adjust grid settings at the top:
    • Set the number of columns (e.g., 3 columns).
    • Modify the gap, padding, and overall dimensions.
    • Configure settings for mobile, tablet, and desktop views.
  • Add content slots for each column:
    • Left column: Add an Image block.
    • Center column: Add Text, Heading, Subheading, and a Button.
    • Right column: Add another Image block.

5. Add Content

  • Image Blocks:
    • Select media (e.g., product images).
    • Adjust aspect ratio (e.g., square).
    • Add alt text for accessibility.
  • Text Content:
    • Title: Add engaging text (e.g., "VIP Only Collection").
    • Subheading: Include descriptive content (e.g., "The best products for our best customers").
    • Button: Label with a call-to-action (e.g., "Shop VIP Collection").
  • Styling Options:
    • Choose colors, padding, and text alignment for a polished appearance.

6. Save Your Work

  • Save drafts frequently to avoid losing changes. Use the Save Draft button at regular intervals.

7. Refine Design

  • Adjust spacing, padding, and alignment in the Grid Settings or Grid Item Settings:
    • Example: Add a subtle background color or increase padding for emphasis.
  • Preview and tweak text size, colors, and styles to ensure the content stands out.

8. Optimize for Mobile and Tablet

  • Use the Device View Options to preview your tile for different devices (desktop, tablet, and mobile).
  • For mobile:
    • Adjust to a single column layout.
    • Remove gaps or add padding for optimal spacing.
  • Save draft after making device-specific adjustments.

9. Place the Tile

  • Click Place Tile in the top-right corner of the Tile Studio.
  • Select the target location (e.g., the orders page header) where the tile should display.
  • From the dropdown, choose the tile you created (e.g., "VIP Collection").

10. Publish the Tile

  • After placing the tile, click Save and Publish.
  • Next verify that the tile is in place by selecting Enable in Shopify.

11. Verify Tile Placement

  • If the tile does not appear:
    • Go to the App Section in the Shopify Theme Editor.
    • Add the missing target manually by selecting the appropriate checkbox or using the Add App Block option.

12. Review and Confirm

  • Return to the Tile Studio and refresh the Tiles section.
  • Verify that the tile is listed under the correct target location.
  • Use the Tile Placement Overview to get a visual summary of all placements on the page.

Next Steps

  • To personalize your tile, watch the next tutorial video on creating segments. This will allow you to display tiles only to specific customer groups (e.g., VIP customers).

You’ve successfully created and placed your first tile! 🎉

Final Notes:

  • Experiment with different styles, layouts, and content to match your branding.
  • For personalized customer experiences, pair your tile with segments (covered in the next tutorial).
  • Save your work often, the revert button goes back to your last save point.
That’s it! You’ve successfully created and placed your first tile. Stay tuned for more ways to customize your Shopify store with Storefront Curator.