Skip to main content

Getting Started with Blocks (App Studio version)

Updated over a week ago

Design Blocks

Design Blocks provide a library of block templates to help you create your app screens. The majority of the blocks dynamically pull real product and collection data, allowing you to begin adjusting settings from the right configurator. The blocks are grouped based on the purpose of the blocks: Basics, Carousels, Content, Hero, Integrations, and Media.

Basics

Search Block offers an entry point for users to search for a product or collection.

SearchBlock.gif

Countdown Timer offers the flexibility to create a countdown timer (eg. sales, events, etc) and direct the user to another destination via a button.

CountdownTimer.gif

Basic Text Block offers a text box with a header and sub-header.

BasicTextBlock.gif

Carousels

Collections Carousel offers a way to display multiple collections in a scrollable carousel with an optional button.

CollectionsCarousel.gif

Thin Collection Carousel offers a way to display multiple collections in a scrollable thin carousel.

ThinCollectionCarousel.gif

Collection - Product Carousel offers a way to display multiple products from a collection in a scrollable carousel.

CollectionProductCarousel.gif

Multi-Destination Circle Carousel offers the flexibility to add custom images, names, and different destinations to route users to.

MultidestinationCircleCarousel.gif

Circle Collection Carousel offers a way to display multiple collections in a scrollable carousel.

CircleCollectionCarousel.gif

Recently Viewed Products offers a product carousel based on what products the user recently viewed through their app flow.

<TBD>

Content

Collection - Product Grid offers a way to display multiple products from a collection in a grid format.

CollectionProductCarousel.gif

Collection - Product Showcase offers a way to display multiple products from a collection in carousel with an emphasized image displaying.

CollectionProductShowcase.gif

Content Link offers a way to route users to a webpage or display an image.

ContentLink.gif

Hero

Image Banner offers the flexibility to upload an image and display a button. (Max size: 10mb, Format: jpg or png)

ImageBanner.gif

Video Banner offers the flexibility to upload a video and display a button. (Max size: 10mb, Format: mp4)

VideoBanner.gif

Swipe-able Hero Banner offers the flexibility to upload multiple images to display in a swipe-able carousel. (Max size: 10mb, Format: jpg or png)

Swipeable.gif

Integrations - coming soon

UGC Block (Instagram-able Block) displays social images that map to products.

  • Four Sixty

  • Yotpo UGC

Nosto Recommendation Carousel display a carousel of products based on a specific nosto category like Recommendations.

<gif coming soon>

Nosto Recommendation Grid display a grid of products based on a specific nosto category like Recommendations.

<gif coming soon>

Media

Image Block offers the flexibility to upload an image and route the user to a specific destination. (Max size: 10mb, Format: jpg or png)

ImageBlock.gif

Video Block offers the flexibility to upload a video and route the user to a specific destination. (Max size: 10mb, Format: mp4)

VIdeo.gif

Multi-destination Image Grid offers a way to upload multiple images to display in a grid layout and route to different destinations.

MultiImage.gif

Custom Blocks

CleanShot 2024-11-07 at 16.05.26.gif

<add details>

Legacy Custom Blocks

<add details>

Deleting a Block from a screen

Any time you need to remove or delete a block from a given screen, hover over the given block and click on the three dots > Delete. Once you remove the block you will need to Publish this and any other changes in order for these updates to go live.

CleanShot 2024-11-07 at 16.09.48.gif

Archiving a Custom Block

Over time you might find that you have created many custom blocks where some are just not relevant to keep any longer. You Note: Archiving is exclusively available for custom blocks and legacy custom blocks. You are not able to archive Tapcart Design Blocks.

Screenshot 2024-11-08 at 2.38.58 PM.png
Did this answer your question?