Configure Block Types

Introduction

Configuring block types helps you showcase important content on your home screen. Whether you're highlighting new arrivals, promotions, or featured collections, customizing these blocks helps create an engaging and user-friendly experience.

In this Article

  1. Announcement
  2. Welcome Block
  3. Reorder
  4. Upcoming Subscription
  5. Heading
  6. Spacer
  7. Quick Links
  8. Collection List
  9. Products List
  10. Featured Collection
  11. Product Grid
  12. Featured Product
  13. Banner
  14. Banner List
  15. Video
  16. Videos List
  17. Promotion Heading
  18. USPs List
  19. Icon Text CTAs
  20. Text List
  21. Blog Post
  22. Blogs List
  23. Grouped Collections
  24. Multi Content

Announcement 

Please note that you can only add the announcement once to 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 customers' attention.
  • Include a call-to-action button if necessary, directing customers to take specific actions related to the announcement. 

How to Configure 

Step 1: Select the Block Type "Announcement"

Step 2: Enter the Announcement

Step 3: Select the Background Color and Text Color

Step 4: Select the Action Type

Refer to this article to learn how different Action Types work.

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

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


Reorder

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, enable "Buy Again Rail"

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

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

Please refer to this article for instructions on enabling the 3rd party integration

Step 3: Turn on the integration and save

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

Step 5: Click on Add and you are done


Preview 

Benefits: Simplify subscription management and increase Average Order Value (AOV) 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 tags (If required) and save

This block will be visible to customers tagged with above value.


Preview

Benefits: Improves navigation 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

You can choose a value between 0px to 50px

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.


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: Select the Background and Text Color

Step 4: Add customer tags (If required)

This block will be visible to customers tagged with above value.

Step 5: Now go to "Add Link"


Step 6: Enter the Text

Step 7: Select Action Type and save

Refer to this article to learn how different Action Types work.


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: Click on Add Collections

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

Step 5: Select the Image Aspect Ratio and save

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

Step 7: Upload your Image or Enter the Image URL

Step 8: Enter the Collection Title and save

You can use "Add collections" button to add more collections

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

Preview

  1. Collection List (Rectangular)

  1. Collection List (Circular)

  1. Collection List (Grid)

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


Products List

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 "Products List"

Step 2: Enter the Block Title

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

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

Step 5: Upload your Image or Enter the Image URL

Step 6: Select the image aspect ratio

Step 7: 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.


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


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


Preview

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


Description

  • Showcase a standout product that you want to highlight. 

How to Configure

Step 1: Select the Block Type "Featured Product"

Step 2: Enter Block Title

Step 3: Select the Product and save

Step 4: Click on the Pen icon to edit the product

Step 5: Upload the Image or Enter the Image URL

Step 6: Select the aspect ratio and save

Step 7: Now go to Add Badge

Step 8: Enter the Badge Title

Step 9: Select the Badge Background Color

Step 10: Select the Badge Text Color

Step 11: Upload the Image or Enter the Image URL


Preview

Benefits: Increases product visibility, and drives sales for featured products.


Description

  • Use banners to promote special offers, sales, or events. 
  • Include visually striking graphics and concise, attention-grabbing messages.
  • Ensure banners are clickable, leading customers to relevant pages or actions.

How to Configure

Step 1: Select the Block Type "Banner"

Step 2: Enter the Block Title

Step 3: Enter the Banner title and Description Text

Step 4: Enter the Image URL or Select the Background Color

Step 5: Select the aspect ratio

Step 6: Enter Button Text

Step 7: Select the Action Type and save

Refer to this article to learn how different Action Types work.

Step 8: Go to 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 and save


Preview

Benefits: Grabs customers' attention, communicates promotional messages effectively, and drives traffic to targeted pages or actions.


Description

  • Implement a list of banners featuring various promotions, newly launched products, or important announcements. Allowing customers to swipe or tap through the banners to view different messages.

How to Configure

For adding multiple images for your Banner click on “Add Banner” and repeat the process

Step 1: Select the Block Type "Banner List"

Step 2: Enter the Block Title

Step 3: Select the Aspect Ratio

Step 4: Now select "Add Banner"

Step 5: Enter the Image URL or Select the Background Color

Step 6: Enter Banner Title

Step 7: Enter the Description Text 

Step 8: Enter the Button Text

Step 9: Select the Action Type and save

Refer to this article to learn how different Action Types work.


Preview

Benefits: Maximizes space by displaying multiple promotions in a compact format, grabs customer attention, and drives engagement with clickable banners.


Video 

Description

  • Incorporate media 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 "Video"

Step 2: Enter the Block title and Media title

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

Step 4: Select Aspect ratio

Step 5: Now enter Video Source or Enter Media ID

Step 6: Enter Tags

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 tags (If required) and save

This block will be visible to customers tagged with above value.


Preview

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


Description

  • Use a List 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 Videos

How to Configure

Step 1: Add the Block type "Video List"

Step 2: Enter the Block Title

Step 3: Select List Aspect Ratio and Enter Tag

Step 4: Add the relevant tags (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

Refer to this article to learn how different Action Types work.

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

This block will be visible to customers tagged with above value.


Preview

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


USPs List

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 "USPs List"

Step 2: Enter the Block Title

Step 3: Click on "Add Block"

Step 4: Upload the Image

Step 5: Select the Background Color

Step 6: Enter title and Description Text

Step 7: Select Action type and save

Refer to this article to learn how different Action Types work.


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 CTAs"

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: Go to Add Button

Please note that you can add up to 2 Buttons

Step 7: Enter the CTA Text

Step 8: Select the Action Type and save

Refer to this article to learn how different Action Types work.


Preview

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


Text 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 "Text List"

Step 2: Enter Block Title

Step 3: Enter List Title

Step 4: Now click on Add Item

Step 5: Enter Text, and save

To add another item, click on "Add Item" enter text, and click on 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 the relevant tag

Step 4: Now go to Select Blog, select the desired Blog, 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.


Description

  • Include visually appealing images for each Blog.
  • 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 "Blogs List"

Step 2: Enter the Block Title

Step 3: Select Image Aspect Ratio

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

  1. Blogs List (Circular)

  1. Blogs List (Rectangular)

  1. Blogs List (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.


Grouped Collections


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 "Grouped Collections (Circular)"

Step 2: Enter the Block Title

Step 3: Select Image Aspect Ratio

Step 4: Go to Add Group

To add multiple group select "Add Group" and repeat the process.

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

  1. Grouped Collections (Rectangular)

  1. Grouped Collections (Circular)

  1. Grouped Collections (Grid)


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: You can add Grid, Vertical, and Bottom CTA's

Step 6: Enter CTA Text

Step 7: Upload the Image or Enter the Image URL

Please note that there is no requirement to upload images in Vertical CTAs

Step 8: Select Background Color and Text Color 

Step 9: Select Action Type and save

Refer to this article to learn how different Action Types work.


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!

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us