Configure Blocks

Introduction

Configuring different block types can help you set up your Shop screen to showcase your most important content and features effectively. 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. Featured Product
  3. Featured Collection
  4. Welcome
  5. Reorder
  6. Upcoming Subscription
  7. Products List
  8. Products Grid
  9. Collection List
  10. Banner
  11. Banner List
  12. Promotion Heading
  13. USPs List
  14. Icon Text CTAs
  15. Text List
  16. Quick Links
  17. Multi Content
  18. Grouped Collections
  19. Video
  20. Video List
  21. Blog Posts
  22. Blogs List
  23. Spacer
  24. Heading

Announcement

Please note that you can only add the announcement once to your Shop page.

How to effectively use Announcement Block

  • 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

Step 1: Select the Block  "Announcement"

Step 2: Enter the Announcement text

Step 3: Select the Background Color and Text Color

Step 4: Select the Action Type and Save

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

Step 5: Choose Visibility Conditions and Save

Preview

How to effectively use Featured Product Block

  • Showcase a standout product that you want to highlight. 

How to Configure

Step 1: Select the Block  "Featured Product"

Step 2: Enter the Block Title

Step 3: Add Badge (If Required)

Step 4: Select the product you want to feature and save

You can edit the image and image aspect ratio by clicking on the pen icon

Step 5: Choose Visibility Conditions and Save

Preview

How to effectively use Featured Collection Block

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

How to Configure

Step 1: Select the Block "Featured Collection"

Step 2: Enter the Block Title

Step 3: Enter the Description Text

Step 4: Add Badge (If Required)

Step 5: Select the collection you want to feature and save

You can edit the collection title, image, and image aspect ratio by clicking on the pen icon

Step 6: Choose Visibility Conditions and Save

Preview

Welcome

How to effectively use Welcome Block

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

How to Configure

Step 1: Select the Block "Welcome"

Step 2: Click on Add and you are done


Preview

Reorder

How to effectively use Reorder Block

  • 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 Shop Page, click on "Add Block" and select the Block "Reorder"

Step 4: Click on Add and you are done


Preview

Upcoming Subscription

How to effectively use Upcoming Subscription Block

  • Displays upcoming subscription orders allowing your customers to manage or add to their 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 integrations

Step 3: Turn on the Integration and save

Step 4: After saving, navigate back to the Shop Page, click on "Add Block" and select the Block "Upcoming Subscription"

Step 5: Click on Add and you are done


Preview

Products List

How to effectively use Product List Block

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

How to Configure

Step 1: Select the Block "Products List"

Step 2: Enter the Block Title

Step 3: Click on Select Collection

Step 4: Select the collection and Save

You can edit the collection title, image, and image aspect ratio by clicking on the pen icon

Step 5: Choose Visibility Conditions and Save

Preview

Products Grid

How to effectively use Product Grid Block

  • 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 "Products Grid"

Step 2: Enter the Block Title

Step 3: Click on Select Collection

Step 4: Select the Collection and Save

Use the "Change Collection" button to change the selected collection

Step 5: Choose Visibility Conditions and Save

Preview

Collection List

How to effectively use Collection List Block

  • 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 Block "Collection List (Circular)"

Use the "Edit Layout" button to change the collection layout

Step 2: Enter the Block Title

Step 3: Click on Select Collections

Step 4: Select the desired Collection(s) and Save

Use the "Add Collections" button to add more collections

Step 5: Choose Visibility Conditions and Save

Preview

Collection List (Circular)

Collection List (Rectangle)

Collection List (Grid)

How to effectively use Banner Block

  • 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 "Banner"

Step 2: Enter the Block Title

Step 3: Enter the Banner Title

Step 4: Enter the Banner Description

Step 5: Enter the Button Text

Step 6: Select Aspect Ratio

Step 7: Upload the Image or Enter the Image URL

You can choose to display the banner in full width or not, depending on your preference.

Step 8: Or Select Background Color

Step 9: Click on Add Badge

Step 10: Enter the Badge Title

Step 11: Select the Badge Background color and Text Color

Step 12: Upload the Image or Enter the Image URL and Save

Step 13: Select the Action Type and Save

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

Step 14: Choose Visibility Conditions and Save

Preview

How to effectively use Banner List Block

  • 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

Step 1: Select the Block "Banner List"

Step 2: Enter the Block Title

Step 3: Select Aspect Ratio

Step 4: Click on Add Banner

Step 5: Enter the Banner Title

Step 6: Enter the Banner Description

Step 7: Enter the Button Text

Step 8: Upload the Image or Enter the Image URL

Step 9: Or Select Background Color

Step 10: Select the Action Type and Save

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

Step 11: Choose Visibility Conditions and Save

Preview

Promotion Heading

How to effectively use Promotion Heading Block

  • 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 "Promotion Heading"

Step 2: Enter the Block Title

Step 3: Enter the Heading

Step 4: Enter the Description Text

Step 5: Enter the Button Text

Step 6: Upload the Image or Enter the Image URL

Step 7: Select the Aspect Ratio

Step 8: Select the Action Type and Save

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

Step 9: Choose Visibility Conditions and Save

Preview

USPs List

How to effectively use USPs List Block

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

Step 2: Enter the Block Title

Step 3: Click on Add USP

Step 4: Enter the Title

Step 5: Enter the Description Text

Step 6: Upload the Image or Enter the Image URL

Step 7: Select the Background color

Step 8: Select the Action Type and Save

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

Please note that you can add multiple USP lists by clicking on "Add USP"

Step 9: Choose Visibility Conditions and Save

Preview

Icon Text CTAs

How to effectively use Icon Text CTAs Block

  • 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 "Icon Text CTAs"

Step 2: Enter the Block Title

Step 3: Enter the Title

Step 4: Enter the Description Text

Step 5: Upload the Image or Enter the Image URL

Step 6: Click on Add CTA

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.

Use the "Add Button" to add more CTAs

Step 9: Choose Visibility Conditions and Save

Preview

Text List

How to effectively use Text List Block

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

Step 2: Enter the Block Title

Step 3: Enter the List Title

Step 4: Click on Add List Item

Step 5: Enter the Text and Save

To add multiple text list click on "Add Item"

Step 6: Choose Visibility Conditions and Save

Preview

How to effectively use Quick Links Block

  • 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 "Quick Links"

Step 2: Enter the Block Title

Step 3: Select the Background Color and Text Color

Step 4: Click on Add Link

Step 5: Enter the Text

Step 6: Select the Action Type and Save

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

Please note that you can add multiple links by clicking on "Add Link"

Step 7: Choose Visibility Conditions and Save

Preview

Multi Content

How to effectively use Multi Content Block

  • 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 "Multi Content"

Step 2: Enter the Block Title

Step 3: Select Background Color

Step 4: Enter the Title

Step 5: Enter the Description

Step 6: Click on Add Grid CTA

Step 7: Upload the Image or Enter the Image URL

Step 8: Enter the CTA

Step 9: Select Text Color

Step 10: Select the Action Type and Save

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

Repeat the same steps to add the second Grid CTA

Step 11: Click on Add Vertical CTA

Step 12: Upload the Image or Enter the Image URL

Step 13: Enter the CTA

Step 14: Select Background Color and Text Color

Step 15: Select the Action Type and Save

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

Step 16: Click on Add Bottom CTA

Step 17: Enter the CTA

Step 18: Select Background Color and Text Color

Step 19: Select the Action Type and Save

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

Step 20: Choose Visibility Conditions and Save

Preview

Grouped Collections

How to effectively use Grouped Collections Block

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

Step 2: Enter the Block Title

Step 3: Click on Add Group

Step 4: Enter the Group Title

Step 5: Upload the Image or Enter the Image URL

Step 6: Click on Add Group Collections

Step 7: Select the Collections and Save

Repeat the same steps to add multiple Groups using the Add Group Button

Step 8: Choose Visibility Conditions and Save

Preview

Grouped Collection (Grid)

Grouped Collections (Circular)

Grouped Collections (Rectangular)

Video

How to effectively use Video Block

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

Step 2: Enter the Block Title

Step 3: Enter the Media Title

Step 4: Enter the Video Source or Enter the Media ID

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

Step 6: Select Aspect Ratio

Step 7: Enter the Tags

Step 8: Click on Add Products

Step 9: Select the Product(s) and Save

Use "Add Products" to add more products

Step 10: Choose Visibility Conditions and Save

Preview

Video List

How to effectively use Video List Block

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

How to Configure

Step 1: Select the Block "Video List"

Step 2: Enter the Block Title

Step 3: Select Aspect Ratio

Step 4: Click on Add Media

Step 5: Enter the Video Source

Step 6: Enter the Media Title

Step 7: Upload the Image or Enter the Image URL

Step 8: Click on Add Products

Step 9: Select the Product(s) and Save

Step 10: Enter the Tags

Step 11: Choose Visibility Conditions and Save

Preview

Blog Posts

How to effectively use Blog Posts Block

  • 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 the Block "Blog Posts"

Step 2: Enter the Block Title

Step 3: Click on Select Blog

Step 4: Select the Blog and Save

Step 5: Enter the Tag

Step 6: Choose Visibility Conditions and Save

Preview

Blogs List

How to effectively use Blogs List Block

  • 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: Select the Block "Blogs List (Rectangular)"

Step 2: Enter the Block Title

Step 3: Select Aspect Ratio

Step 4: Click on Add Blog

Step 5: Enter the Title

Step 6: Upload the Image or Enter the Image URL

Step 7: Enter the Tags

Step 8: Click on Select Blog

Step 9: Select the blog and Save

Use the "Add Blog" Button to add multiple Blog list

Step 10: Choose Visibility Conditions and Save

Preview

Blogs List (Rectangular)

Blogs List (Circular)

Blogs List (Grid)

Spacer

How to effectively use Spacer Block

  • 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 the overall aesthetic appeal.

How to Configure

Step 1: Select the Block "Spacer"

Step 2: Enter the amount of spacing you want and Save

You can choose a value between 0px to 50px

Heading

How to effectively use Heading Block

  • 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 "Heading"

Step 2: Enter the Heading

Step 3: Enter the Description

Step 4: Upload the Image or Enter the Image URL

Step 5: Choose Visibility Conditions and Save

Preview

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

Related Articles