Design Home Screen

Introduction

By focusing on creating customer-friendly design blocks, businesses can effectively cultivate long-lasting relationships with their customers. These design blocks serve as a crucial tool in engaging customers and keeping them satisfied with the products or services offered. Emphasizing the importance of user-friendly interfaces and intuitive designs can lead to increased customer loyalty and repeat business.

How to add different Block types?

Step 1: On the top right corner of the screen, you can find the “Add Block” button. Click on it to select the desired block.

Step 2: Select the desired Block Type and click on Add.

Step 3: You have now successfully added your block. Follow the instructions given here to configure different block types.

How to Duplicate Block?

To duplicate any block type click on the (+) icon

Please note that you cannot duplicate blocks such as the Announcement Bar, Welcome Block, Recently Ordered, and Upcoming Subscription.

How to delete a Block?

You can delete the block types from the Home Screen using the "Bin Icon"

If you wish to delete the block while configuring your block type, simply click the "Delete Block" button at the bottom of your edit screen

How to rearrange your Blocks?

You can rearrange your blocks from the main screen, i.e., design a home screen with simple drag and drop.

How do different Action Types work?

Action Types help you choose where you want to lead customers when they tap on a particular block

How to Configure different Block types on your Home Page?

Please note that you can only add the Announcement Bar once on your Home Page.

Description

Place an announcement bar at the top of your home page to convey important messages or updates to your customers.
Customize the text to highlight promotions, discounts, new features, or any other relevant information.
Make it visually distinct from the rest of the content to ensure it catches the customer's attention.
Include a call-to-action button if necessary, directing customers to take specific actions related to the announcement.

How to Configure

Step1: Select the Block Type "Announcement Bar"

Step 2: Enter the Announcement text

Step 3: Select the background color and text color

Step 4: Select the Action Type

Step 5: Save and you are done

Preview

Benefits: Increases customer engagement by effectively communicating important information, leading to higher conversion rates and customer satisfaction.

Welcome Block

Please note that you can only add the Welcome Block once on your Home Page.

Description

Utilize the Welcome Block to create a personalized experience for existing customers.

How to Configure

Step1: Select the Block Type "Welcome"

Step 2: Click on Add and you are done

Preview

Benefits: Enhances customer onboarding experience, fosters a sense of belonging, and increases customer retention by establishing a connection with customers.

Recently Ordered

Please note that you can only add the Recently Ordered Block once on your Home Page.

Description

Showcase recently ordered products to encourage repeat purchases and facilitate quick access to previously browsed products.

How to Configure

Step 1: Go to the Features Tab

Step 2: In the Personalized Home screen section, enable "Buy Again Rail"

Step 3: Now on the Home Page, select the Block Type "Recently Ordered "

Step 4: Click on Add and you are done.

Preview

Benefits: Improve customer engagement by providing personalized product recommendations, boost sales by promoting relevant items, and enhance customer convenience by facilitating quick access to previous orders.

Upcoming Subscription

Please note that you can only add the Upcoming Subscriptions bar once on your Home Page.

Description

Displays upcoming subscription orders allowing your customers to manage or add to upcoming subscriptions.

How to Configure

Step 1: Go to the Integrations Tab

Step 2: Under the Subscriptions & Memberships, select the 3rd party you wish to integrate such as Recharge, Loop, Prive, etc

Step 3: Turn on the integration and save

Step 4: Now on Home page, select the Block Type "Upcoming Subscriptions"

Step 5: Click on Add and you are done

Preview

Benefits: Simplify subscription management and increase Average Order Value by encouraging customers to add items to upcoming deliveries, leading to recurring revenue.

Heading

Description

Implement headings to highlight important information or actions, drawing users' attention to key areas of the app.
Introduce clear and concise headings to define different sections within the app, improving user navigation.

How to Configure

Step 1: Select the Block Type "Heading"

Step 2: Upload your Image or Enter the Image URL

Step 3: Enter Heading

Step 4: Enter the Description text

Step 5: Add the relevant customer tag (If required) and save

Preview

Benefits: Improves navigation and comprehension by clearly defining sections and guiding users through the app.

Spacer

Description

Use spacers to create a visual separation between different blocks, ensuring a clean and organized layout.
Adjust the size of spacers to control the amount of whitespace, enhancing the visual hierarchy and improving the overall aesthetic appeal.

How to Configure

Step 1: Select the Block Type "Spacer"

Step 2: Enter the amount of spacing you want

Step 3: Click on save and you are done

Benefits: Ensures a clean, organized layout by creating visual separation between elements, improving readability and aesthetic appeal.

Quick Links

Description

Create a section with quick links to essential features or pages within the app like last purchase, View cart, and more.
Organize links in a visually appealing manner for easy access.

How to Configure

Step 1: Select the Block Type "Quick Links"

Step 2: Enter Block Title

Step 3: Add Customer Tag (If required)

Step 4: Go to Add link

Step 5: Enter the text

Step 6: Select Action Type and save

Preview

Benefits: Enhances customer convenience by providing quick access to frequently used features, and improving navigation within the app.

Collection List

Description

Showcase curated collections of products based on themes or categories for your customers.
You may include visually appealing images or icons representing each collection.

P.S. You can choose from different layout types such as rectangular, circular, and Grid based on your preference.

How to Configure

Step 1: Select the Block Type "Collection List (Rectangular)"

Step 2: Enter the Block Title

Step 3: Add Customer Tag (If required)

Step 4: Click on Add Collections

Step 5: Select the collection(s) you want to display and save

Step 6: Select the Image Aspect Ratio and save

Step 7: Click on the pen icon to edit the collection

Step 8: Upload your Image or Enter the Image URL

Step 9: Enter the Collection Title and save

Use the "Edit Layout Button" to change the layout style.

Preview

Collection List (Rectangular)

Collection List (Circular)

Collection List (Grid)

Benefits: Helps customers discover relevant content or products based on their interests, leading to increased engagement and conversion rates.

Collection with products

Description

With this block type, you can feature a specific collection along with its associated products

How to Configure

Step 1: Select the Block Type "Collection with products"

Step 2: Enter the Block Title

Step 3: Add Customer Tag (If required)

Step 4: Choose the collection you want to display and save

Step 5: Click on the pen icon to edit the collection

Step 6: Upload your Image or Enter the Image URL

Step 7: Select the image aspect ratio

Step 8: Enter the collection title and save

Preview

Benefits: Highlights specific product offerings, increases visibility, and encourages customers to explore and make purchases within the collection.

Featured Collection

Description

Highlight a particular collection that you want to promote prominently like New launches, app-exclusive collections, or upcoming sales.

How to Configure

Step 1: Select the Block Type "Featured Collection"

Step 2: Enter Block Title

Step 3: Enter the Description text

Step 4: Choose the collection you want to display and save

Step 5: Click on the pen icon to edit the collection

Step 6: Upload the Image or Enter the Image URL

Step 7: Select the Image aspect ratio

Step 8: Enter the Collection title and save

Step 9: Now go to "Add Badge"

Step 10: Enter the Badge Title

Step 11: Select Badge Background Color

Step 12: Select Badge Text Color

Step 13: Upload the Image or Enter the Image URL and save

Step 14: Add the relevant customer tag (If required) and save

Preview

Benefits: Increases the visibility of selected collections, drives traffic to specific product categories, and boosts sales for featured collections.

Product Grid

Description

Display products in a grid format to present multiple items in a structured and visually appealing way

How to Configure

Step 1: Select the Block Type "Product Grid"

Step 2: Enter the Block Title

Step 3: Choose the Collection and save

Step 4: Add Customer Tag (If required) and save

Preview

Benefits: Facilitates easy browsing and comparison of multiple products, enhancing the user shopping experience.

Media

Description

Incorporate multimedia elements such as videos or photos to showcase special promotions, events, and announcements, or simply to engage the customer with eye-catching visuals.

How to Configure

Step 1: Select the Block Type "Media"

Step 2: Enter the Block title and media title

Step 3: Enter the Video Thumbnail URL or Enter the Image URL

Step 4: Select Aspect ratio

Step 5: Now enter Video Source or Enter Media ID

Step 6: Enter Tag

Step 7: Add Products and save

Step 8: Select Add Badge

Step 9: Enter the Badge Title

Step 10: Select the Badge Background color

Step 11: Select the Badge Text color

Step 12: Upload the Image or Enter the Image URL

Step 13: Add the relevant customer tag (If required) and save

Preview

Benefits: Enhances customer experience with visually rich content and communicates brand identity effectively.

Media Carousel

Description

Use a carousel to showcase multimedia content such as images, videos, or slideshows. Include visually compelling media related to products, brand storytelling, or customer-generated content.

Use the "Add Media" Button to add multiple Images/Media

How to Configure

Step 1: Add the Block type "Media Carousel"

Step 2: Enter the Block Title

Step 3: Select Carousel Aspect Ratio and Enter Tag

Step 4: Add the relevant customer tag (If required) and save

Step 5: Now Click on Add Media

Step 6: Enter the Media Title

Step 7: Enter the Video Source

Step 8: Upload Your Image or Enter the Image URL

Step 9: Go to Add Products

Step 10: Add the product and save

Preview

Benefits: Captivates customers with engaging visuals, communicates brand identity effectively, and enhances customer experience with interactive content.

Promotion Heading

Description:

Display a prominent heading highlighting ongoing promotions, sales, or special offers.
Provide a brief description or call-to-action related to the promotion.

How to Configure

Step 1: Select the Block Type "Promotion Heading"

Step 2: Enter the Block title

Step 3: Enter the Heading and Description Text

Step 4: Enter Button Text

Step 5: Upload the Image or Enter the Image URL

Step 6: Select the aspect ratio

Step 7: Select Action type and save

Step 8: Add the relevant customer tag (If required) and save

Preview

Benefits: Draws attention to promotional campaigns, encourages customer engagement with special offers, and drives conversion rates.

USP Blocks

Please note that you can add multiple blocks using the "Add Block" button and repeat the process.

Description

Showcase the unique features or benefits of your products or services.
Highlight key selling points such as quality, affordability, or convenience.

How to Configure

Step 1: Select the Block Type "USP Blocks"

Step 2: Enter the Block Title

Step 3: Add the relevant customer tag (If required) and save

Step 4: Click on "Add Block"

Step 5: Upload the Image

Step 6: Select the Background color

Step 7: Enter title and Description Text

Step 8: Select Action type and save

Preview

Benefits: Differentiate your brand from competitors, build customer trust by highlighting strengths, and influence purchase decisions.

Icon Text CTAs

Description

Utilize icons paired with text to create visually appealing call-to-action buttons.
Place CTAs strategically to prompt desired customer actions such as "Shop Now" "Learn More" "Sign Up” or “Go to Cart”

How to Configure

Step 1: Select the Block Type "Icon Text CTA"

Step 2: Upload your Image or Enter the Image URL

Step 3: Enter the Block Title

Step 4: Enter the Title

Step 5: Enter the Description Text

Step 6: Add the relevant customer tag (If required) and save

Step 7: Go to Add Button

Step 8: Enter the CTA Text

Step 9: Select the Action Type and save

Preview

Benefits: Increases click-through rates by making CTAs more noticeable and actionable, guiding customers towards desired actions effectively.

List

Description

Display a list of curated features or benefits for easy browsing.
Organize items in a visually appealing manner with clear headings and descriptions.

How to Configure

Step 1: Select the Block Type "List"

Step 2: Enter Block Title

Step 3: Enter List Title

Step 4: Add the relevant customer tag (If required) and save

Step 5: Now click on Add Item

Step 6: Enter text, and save

Preview

Benefits: Simplifies delivery of information to the customers, and facilitates desired information.

Blog Post

Description

Feature blog posts or articles related to your industry, products, or brand.
Include fun titles, featured images, and summaries to attract customer interest.

How to Configure

Step 1: Select Block type "Blog Post"

Step 2: Enter the block title

Step 3: Enter relevant tag

Step 4: Now go to Select Blog and select the desired Blog and save

Step 5: Add the relevant customer tag (If required) and save

Preview

Benefits: Drives traffic to your blog or content hub, positions your brand as an authority in your niche, and enhances customer engagement with informative content.

Blog Carousel

Description

Implement a carousel-style display that showcases various Blog posts.
Include visually appealing thumbnails or featured images for each Blog post.
Provide titles of the Blog content to give customers a glimpse of what each post covers.

How to Configure

Step 1: Add the Block Type "Blog Carousel"

Step 2: Enter the Block Title

Step 3: Add the relevant customer tag (If required) and save

Step 4: Now click on Add Blog

Step 4: Enter the Title

Step 5: Enter the relevant Tag

Step 6: Upload the image or Enter the Image URL

Step 7: Click on Add Blog, select the Blog you wish to add and save

To add multiple blogs, click Add Blog and repeat the process.

Preview

Blog Carousel (Circular)

Blog Carousel (Rectangular)

Blog Carousel (Grid)

Benefits: Enhances customer engagement by offering a visually appealing and interactive way to showcase blog content, encourages customers to explore multiple posts, drives traffic to your blog or content hub, and strengthens brand credibility by providing valuable and informative content to customers.

Multilevel Categorization

Collection Group (Rectangular)

Collection Group (Circular)

Collection Group (Grid)

Description

Organize the Collection of products into hierarchical categories for easy navigation.
This enables customers to explore products within main categories to find relevant items.

How to Configure

Step 1: Select the Block Type "Group of Collection List (Circular)"

Step 2: Enter the Block Title

Step 3: Add the relevant customer tag (If required) and save

Step 4: Go to Add Group

Step 5: Enter Group Title

Step 6: Upload the Image or Enter the Image URL

Step 7: Go to Add Group Collections, select collection(s) and save

Preview

Benefits: Improves customer experience by simplifying content discovery, helps customers find specific items efficiently, and reduces friction in navigation.

Multi Content

Description

Incorporate a section that displays a mix of different content types such as products, promotions, or blog posts.
Use a visually balanced layout to showcase various content elements effectively.

How to Configure

Step 1: Select the block Type "Multi Content"

Step 2: Enter the Block Title and Title

Step 3: Enter the Description Text

Step 4: Select the background color

Step 5: Add the relevant customer tag (If required) and save

Step 6: You can add Grid, Vertical, and Bottom CTA's

Step 7: Enter CTA text

Step 8: Upload the Image or Enter the Image URL

Step 9: Select Background Color and Text Color

Step 10: Select Action Type and save

Preview

Benefits: Provides customers with diverse and engaging content, increases time spent on the app, and encourages exploration of different sections.

If you have any questions or need further assistance, feel free to contact us at help@shop2app.com.

Happy selling!

Design Home Screen

Introduction

In this Article

How to add different Block types?

How to Duplicate Block?

How to delete a Block?

How to rearrange your Blocks?

How do different Action Types work?

How to Configure different Block types on your Home Page?

Announcement Bar

Welcome Block

Recently Ordered

Upcoming Subscription

Heading

Spacer

Quick Links

Collection List

Collection with products

Featured Collection

Product Grid

Featured Product

Banner

Banner Carousel

Media

Media Carousel

Promotion Heading

USP Blocks

Icon Text CTAs

List

Blog Post

Blog Carousel

Multilevel Categorization

Multi Content