Configure Blocks

Introduction

Configuring different block types can help you set up your Shop screen to effectively showcase your most important content and features. Whether you're highlighting new arrivals, promotions, or featured collections, customizing these blocks helps create an engaging and user-friendly experience.

Place an announcement bar at the top of your Shop 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.

Featured Collection

Description

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

Welcome

Please note that you can only add the Welcome Block once on your Shop 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 Reorder Block once on your Shop 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 Shop 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 Shop Page.

Description

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 integration

Step 3: Turn on the integration and save

Step 4: Now on the Shop 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.

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 products associated with collection, increases visibility, and encourages customers to explore and make purchases within the collection.

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.

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

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.

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: Upload the Image or Enter the Image URL or Select the Background Color

Step 5: Select or deselect Full Width

Step 6: Select the aspect ratio

Step 7: Enter Button Text

Step 8: Select the Action Type and save

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

Step 9: Go to "Add Badge"

Step 10: Enter the Badge Title

Step 11: Select the Badge Background Color

Step 12: Select the Badge Text Color

Step 13: 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 Carousel aspect ratio

Step 4: Now select "Add Banner"

Step 5: Upload Your Image or 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.

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.

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 the Block Title

Step 3: Enter the 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.

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

Step 4: Now go to "Add Link"

Step 5: Enter the Text

Click on "Add Link" to add multiple Quick links

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

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: Select Vertical CTA

You can now 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.

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

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

Step 4: Enter Group Title

Step 5: Upload the Image or Enter the Image URL

Step 6: Click on "Add group collections"

Step 7: Select collection(s) and save

Preview

Grouped Collections (Rectangular)

Grouped Collections (Circular)

Grouped Collections (Grid)

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

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 the Image Thumbnail or Enter the Image URL

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

Preview

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

Videos List

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"

Click on "Add Media" to add mutiple videos

Step 6: Enter the Media Title

Step 7: Enter the Video Source

Step 8: Upload Your Image or Enter the Image URL

Step 9: Select "Add Products"

Step 10: Add the product(s) and save

Preview

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

Blog Posts

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

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.

Blogs List

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 the Image aspect ratio

Step 4: Now click on "Add Blog"

Step 5: Enter the Title

Step 6: Enter the relevant tag

Step 7: Upload Your Image or Enter the Image URL

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

Blogs List (Circular)

Blogs List (Rectangular)

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.

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

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

Preview

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

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

Happy selling!

Configure Blocks

Introduction

In this Article

Announcement

Featured Product

Featured Collection

Welcome

Reorder

Upcoming Subscription

Products List

Product Grid

Collection List

Banner

Banner List

Promotion Heading

USPs List

Icon Text CTAs

Text List

Quick Links

Multi Content

Grouped Collections

Video

Videos List

Blog Posts

Blogs List

Spacer

Heading