--- title: Discovery Page slug: discovery-page docTags: createdAt: 2025-01-04T16:13:03.981Z --- The Discovery Page is a dynamic space where users can explore merchants, discover exciting offers, and engage with featured content on your platform. This page acts as a storefront for your platform, helping users easily navigate through merchant listings, promotional banners, and product highlights. You can customize this page to include banners for special offers or store ads with external links, showcase featured products, and add tailored sections such as "Top-Selling Stores" or "Best-Rated Stores." The flexibility to design additional sections allows you to create a highly engaging and personalized experience that captures user interest. *** # Navigating to the Discovery Page - From your main admin panel, click on **Theme **in the left-side navigation menu. ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/Vj5Z013GHk2XHk4CBWwsc_image.png" size="50" isUploading="false" width="275" height="317" darkWidth="275" darkHeight="317" showCaption="false"} - The theme editor will open. At the very top of the screen is a dropdown menu. Click on it and select the **Discovery page**. ::Image[]{src="https://app.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/A0KZqxLHOv2HV_TsGh3gp_image.png" size="90" width="1643" height="585" position="center" darkWidth="1643" darkHeight="585" showCaption="false"} - Click to switch the view between Desktop or Mobile. ::Image[]{src="https://app.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/xoac0-S89LjxOQklNhaXf_image.png" size="90" width="1824" height="880" position="center" caption="Mobile View" darkWidth="1824" darkHeight="880" showCaption="true"} ::Image[]{src="https://app.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/4KM_6yUi5xFNdAHe_hLDP_image.png" size="90" width="1903" height="640" position="center" caption="Desktop View" darkWidth="1903" darkHeight="640" showCaption="true"} *** Hide/Unhide Sections Utilize the eye icon to toggle the visibility of any element on the selected page. This allows you to easily hide or unhide the welcome banner or custom sections as needed. ::Image[]{src="https://app.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/R-1KPR3VIAUdJigHJ1vna_image.png" size="90" width="1720" height="802" position="center" darkWidth="1720" darkHeight="802" showCaption="false"} *** Rearrange Sections To rearrange the welcome banner or custom sections on the selected page, simply drag and drop them into your preferred order. ::Image[]{src="https://app.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/WaPXGvPKy75tX0xDNQSWG_image.png" size="90" width="1809" height="692" position="center" darkWidth="1809" darkHeight="692" showCaption="false"} *** # Customizing Sections with CSS To modify the styling, shape, or make adjustments to an existing section, simply select the section you wish to customize. You can then apply Custom CSS to achieve the desired changes, tailoring each section’s appearance to your specific needs. This method can be used for any section on your discovery page. To customize a section, select it from the list, open the CSS editor, and paste your custom code. :::hint{type="warning"} Basic knowledge of HTML and CSS is required to customize these sections. If you're not familiar with coding, you may need to work with a CSS designer to implement advanced customizations ::: ::Image[]{src="https://images.archbee.com/A6k4A417O1V2DGm4H5kN0/faw3Dg_OLcYUZC_0X4Br0_creating-product-banners-in-hyper-store-step-35.png?format=webp" size="90" width="800" height="380" darkWidth="800" darkHeight="380" position="center" showCaption="false"} *** # Header The Header is the very top section of your website that appears on every page. ::Image[]{src="https://app.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/bZPKhfcDxf6qm8eyAV61-_image.png" size="90" width="1260" height="441" position="center" darkWidth="1260" darkHeight="441" showCaption="false"} - Click on the **Header **in the section list to edit. - You can edit **Custom CSS**, which allows designers to style the header beyond standard options, such as adding a border, changing its color, or applying other custom styling. ::Image[]{src="https://app.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/8gUXZGs5HIlAFo6JbEu8C_image.png" size="90" width="1905" height="706" position="center" darkWidth="1905" darkHeight="706" showCaption="false"} *** # Hero Banner The **Hero Banner **allows you to create an engaging promotional section that helps customers discover featured offers, merchants, products, or collections as soon as they open your marketplace. The Hero Banner consists of a large background banner along with multiple promotional cards. Each card can display a custom image and can be configured to redirect customers to a specific destination such as a merchant or merchant category. This makes it an effective way to highlight seasonal campaigns, limited-time offers, featured merchants, new arrivals, or important announcements while improving product and merchant discovery. ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/Z1WSn5ypFhmVox5Z4tC3W_image.png" size="40" isUploading="false" width="449" height="653" darkWidth="449" darkHeight="653" showCaption="false"} *** ## Accessing the Hero Banner To configure the Hero Banner: - Navigate to **Admin Panel > Settings > Theme Builder**. - Select the **Hero Banner** section from the page components. - Once added, you can configure the banner and promotional cards as required. :::hint{type="warning"} **Note:** Ensure you are on Mobile view in the Theme Builder to view the Hero Banner. The Hero Banner is displayed at the top above all other components. ::: ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/QEFxT9e-_s9m500amOa5d_image.png" size="60" isUploading="false" width="479" height="492" darkWidth="479" darkHeight="492" showCaption="false"} *** ## Configuring the Background Banner The **Background** section controls the large banner displayed behind the promotional cards. This banner acts as the primary visual element of the Hero Banner section. :::hint{type="success"} **Note: **The Hero Banner background supports **PNG, JPEG, GIF, and SVG **image formats. ::: ![](https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/lBj1BxK6I-f1eFdFHRN7R_image.png) ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/NpsuKJvvLVZA7UzjR_ANQ_image.png" size="70" isUploading="false" width="594" height="390" darkWidth="594" darkHeight="390" showCaption="false"} ## Configuring Promotional Cards The Hero Banner supports multiple promotional cards that are displayed on top of the background banner. For each card, you can configure: :::hint{type="success"} **Note: **Each Hero Banner must contain a **minimum of 3 cards **and can have a **maximum of 10 cards**. By default, the section is created with **3 cards**. If you add more than four cards, customers can **swipe **on the Discovery Page to view the remaining promotional cards. ::: ### Action Select where customers should be redirected when they click the card. Depending on your storefront configuration, cards can be linked to destinations such as: - **Merchant: **Takes the customer directly to a specific merchant's storefront. - **Merchant Category: **Takes the customer to a page showing all merchants that belong to a specific category. :::hint{type="warning"} **Note: **If no action is configured, the promotional card will be displayed visually but will not redirect customers to any destination when clicked. ::: :::hint{type="success"} **Note:** Click the three-dot menu on any card to access additional management options: - **Duplicate:** Creates an exact copy of the selected card, including its image and configuration. - **Remove:** Deletes the selected card from the Hero Banner. You can also drag and drop the promotional cards using the drag icon to rearrange their order in the list. ::: ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/f3Kl0WBTg2qK6YyPIc-k1_image.png" size="60" isUploading="false" width="502" height="608" darkWidth="502" darkHeight="608" showCaption="false"} ### Upload Media Upload the promotional image that will be displayed for that card. :::hint{type="success"} **Note: **Each promotional card supports **PNG, JPEG, GIF, and SVG **image formats. The uploaded image is displayed in a **3:4 aspect ratio **and will be automatically cropped to fit the available card space. For the best results, use images designed in the same aspect ratio to avoid important content being cropped. ::: *** ## Publishing Changes Once you have finished configuring the Hero Banner: - Review the live preview within the Storefront Builder. - Click **Publish**. - Refresh your storefront to view the updated Hero Banner on the **Discovery Page**. ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/0bgdegxrZmHC_5TAs7Y39_image.png" size="90" isUploading="false" width="610" height="381" darkWidth="610" darkHeight="381" showCaption="false"} *** # Banners Banners are a versatile tool on the Discovery Page, designed to grab attention and highlight key promotions. Whether showcasing discounts, promoting specific stores, or linking to external third-party websites, banners offer a dynamic way to engage users. They can also be used to feature ads or redirect customers to merchant categories or store menus for seamless navigation. This is where you can instantly communicate your most important messages: - **Promote Platform-Wide Sales:***" *Mega Monsoon Sale - 20% Off Everything!*"* - **Showcase New Merchants:***" *Welcome, Rominos Pizza! Now Delivering!" ::Image[]{src="https://app.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/idt1RW0OzqP-Z8aQxAYgb_image.png" size="90" width="1359" height="496" position="center" darkWidth="1359" darkHeight="496" showCaption="false"} ## How to Configure the Main Banner Section First, click on **Banners **in the main section list on the left. This opens the control panel for the entire banner area. ::Image[]{src="https://app.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/oQH7m9PsikoEFzPeOXF3C_image.png" size="90" width="1909" height="591" position="center" darkWidth="1909" darkHeight="591" showCaption="false"} ## Title & Description These are optional headings that appear above the banner slideshow on the Discovery Page. ::Image[]{src="https://app.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/_K8G0XOWmC-kE9Qy-hBOT_image.png" size="90" width="1190" height="508" position="center" darkWidth="1190" darkHeight="508" showCaption="false"} ::Image[]{src="https://app.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/DjZKEseORywjOyu4Toxfj_image.png" size="90" width="1233" height="349" position="center" darkWidth="1233" darkHeight="349" showCaption="false"} ## Layout The Layout controls the shape and orientation of your banners. ::Image[]{src="https://app.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/r933ClZ2RC0awgHrJQqb__image.png" size="60" width="509" height="460" position="center" darkWidth="509" darkHeight="460" showCaption="false"} Choose the layout for your banners from four options: Horizontal, Vertical, Square, or Strip, depending on how you want the banners to appear on the Discovery Page. You can preview each layout directly in the middle of the builder screen to ensure it matches your desired design. ::Image[]{src="https://app.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/XbEPCMdZyABt4vNfEprKK_image.png" size="90" width="1587" height="403" position="center" caption="Horizontal Layout" darkWidth="1587" darkHeight="403" showCaption="true"} ::Image[]{src="https://app.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/Qe7n7WZJuhrsjXUtWPk6M_image.png" size="90" width="1588" height="253" position="center" caption="Strip Layout" darkWidth="1588" darkHeight="253" showCaption="true"} ## Auto-Scroll Banners Enable the toggle if you want the banners to scroll automatically, creating a dynamic and engaging user experience. ::Image[]{src="https://app.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/kvC9KQ6oSdOK5RSlbAqXn_image.png" size="90" width="814" height="354" position="center" darkWidth="814" darkHeight="354" showCaption="false"} ## How to Add and Edit an Individual Banner In the "List of banners," either click **Add **to create a new banner from scratch or edit an existing one. ::Image[]{src="https://app.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/mpEtbengsDzD242wvqwaw_image.png" size="90" width="873" height="595" position="center" darkWidth="873" darkHeight="595" showCaption="false"} **Title: **A name for the banner that is **for your internal reference only**. Customers will never see this. ::Image[]{src="https://app.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/v6r_e5TR5CTLBetnYFQLn_image.png" size="60" width="637" height="590" position="center" darkWidth="637" darkHeight="590" showCaption="false"} **Status: **Controls whether the banner is live or hidden. ::Image[]{src="https://app.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/OZTm8CGC-o-RzjmonHec1_image.png" size="60" width="586" height="563" position="center" darkWidth="586" darkHeight="563" showCaption="false"} ### ## The "Button link": Turning a Picture into a Powerful Action It determines what happens when a customer taps on a Banner. ::Image[]{src="https://app.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/cjSYUuyP6C1v3yXxA3vHC_image.png" size="60" width="639" height="635" position="center" darkWidth="639" darkHeight="635" showCaption="false"} - **None: **The banner will not be clickable. Solely used for presentation purposes. - **When to use it: **This should only be used for purely informational banners where there is no logical next step for the customer (e.g., a simple "Happy Holidays!" banner). ::Image[]{src="https://app.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/TqaTWxKBqNmlZD7ocseL__image.png" size="60" width="620" height="736" position="center" darkWidth="620" darkHeight="736" showCaption="false"} ![](https://app.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/1cC8DIYpbZtWdx7txyYSC_image.png) - **External Link: **Sends the customer to a specific webpage outside of your app or website. - **Use Case: **Your banner shows a blog of the marketing team for "5 Healthy and Delicious Breakfast Recipes You Can Make in 10 Minutes." You can link the banner directly to their blog post. ::Image[]{src="https://app.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/IcbLGk3wwG2qqyYFj-3r8_image.png" size="60" width="672" height="769" position="center" darkWidth="672" darkHeight="769" showCaption="false"} ::Image[]{src="https://app.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/UuJfR_7w7989gxHjoJgqw_image.png" size="90" width="1578" height="329" position="center" darkWidth="1578" darkHeight="329" showCaption="false"} - **Search Term: **Takes the customer to the search results page for a word or phrase you define. - **Use Case: **It’s Friday evening, and you want to run a “Pizza Night” promotion to attract customers looking for an easy meal showcasing all pizza-related items across all stores on your platform. ::Image[]{src="https://app.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/mh12EAS_Q2J6L8z8M4lw1_image.png" size="60" width="601" height="748" position="center" darkWidth="601" darkHeight="748" showCaption="false"} ::Image[]{src="https://app.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/Nt_HOp-gcIURvlvKM4HaP_image.png" size="90" width="1886" height="813" position="center" darkWidth="1886" darkHeight="813" showCaption="false"} - **Merchant: **Takes the customer directly to a specific merchant's storefront. - **Use Case: **Your banner says "Roti Hypermarket - 15 Minute Delivery!". You link the banner to the "Roti Hypermarket" merchant. When a customer taps it, they are taken straight to that store's page, ready to start shopping. ::Image[]{src="https://app.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/g4ZdB24lV8P7xobdN5A7s_image.png" size="60" width="612" height="742" position="center" darkWidth="612" darkHeight="742" showCaption="false"} ::Image[]{src="https://app.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/0mBN2Q8ihoLAlTiwop0CV_image.png" size="90" width="1890" height="462" position="center" darkWidth="1890" darkHeight="462" showCaption="false"} ::Image[]{src="https://app.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/RxlA0UNmn74GIE6lOpHuu_image.png" size="90" width="1885" height="694" position="center" darkWidth="1885" darkHeight="694" showCaption="false"} - **Merchant Category: **Takes the customer to a page showing all merchants that belong to a specific category. - **Use Case Example: **You're launching a "Step Up Your Style" campaign to promote all the shoe stores on your platform. Your goal is to guide customers who are looking for new footwear to a single page that lists all their options ::Image[]{src="https://app.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/EocSiFGPXjkciKkIdZ_w4_image.png" size="60" width="586" height="757" position="center" darkWidth="586" darkHeight="757" showCaption="false"} ::Image[]{src="https://app.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/kNrPmHhH_KJGdnecj4BYu_image.png" size="90" width="1897" height="466" position="center" darkWidth="1897" darkHeight="466" showCaption="false"} ::Image[]{src="https://app.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/JNx1kCG5gUNxFc9n754YY_image.png" size="90" width="1729" height="651" position="center" darkWidth="1729" darkHeight="651" showCaption="false"} ## Sort Banners Drag and drop banners using the drag icon to rearrange their order in the list. ::Image[]{src="https://app.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/SwcJO3H6hhilAu6cvbGTR_image.png" size="60" width="382" height="485" position="center" darkWidth="382" darkHeight="485" showCaption="false"} *** # Categories (Business Category) Think of the **Categories **section as the digital equivalent of the large, helpful aisle signs in a physical supermarket. :::hint{type="info"} **Note: **On the Discovery Page, you can only link **merchants **to business categories. If you want to display products from a specific category of a particular merchant, you can use the [Product Highlights](https://help.hyperzod.com/add-elements-and-upload-assets#product-highlights) section to showcase that category from the desired merchant. ::: ::Image[]{src="https://app.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/YSffP9GLuqkEbI4TbElbD_image.png" size="90" width="1876" height="910" position="center" darkWidth="1876" darkHeight="910" showCaption="false"} ::Image[]{src="https://app.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/LBN6Cxn0NteOYVVWFLW5v_image.png" size="60" width="397" height="237" position="center" darkWidth="397" darkHeight="237" showCaption="false"} ## Categories View The Categories View allows you to organize and showcase products or services into different sections, making it easier for customers to browse and quickly find what they are looking for. ::Image[]{src="https://app.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/E7MMl7TCKfPqyKzGF41yf_image.png" size="60" width="341" height="189" position="center" darkWidth="341" darkHeight="189" showCaption="false"} - **Scroll: Single Row: **This option arranges all your category icons into a single, clean, horizontal line that customers can swipe through from left to right. ::Image[]{src="https://app.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/ZZTIdU3mj5piGX9dmcmKV_image.png" size="60" width="340" height="477" position="center" darkWidth="340" darkHeight="477" showCaption="false"} ::Image[]{src="https://app.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/Dhup3huBYcTFng-uMmDvd_image.png" size="80" width="1262" height="889" position="center" caption="Single Row View" darkWidth="1262" darkHeight="889" showCaption="true"} - **Scroll: Double Row: **This option is a balance between the single row and the full grid. It arranges your categories into two horizontal, swipeable rows. ::Image[]{src="https://app.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/1xiHycEQ6AL9UXPmcSjYK_image.png" size="60" width="344" height="481" position="center" darkWidth="344" darkHeight="481" showCaption="false"} ::Image[]{src="https://app.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/vvgZm8l1D8TfV9p2yNO7E_image.png" size="90" width="1279" height="910" position="center" caption="Double Row View" darkWidth="1279" darkHeight="910" showCaption="true"} - **No Scroll: Multiple Rows: **This option displays all your categories at once in a static grid format. Instead of swiping the section left and right, the customer scrolls down the page to see all the category icons. ::Image[]{src="https://app.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/jCQ-GdO-VjndtX3xUTyGk_image.png" size="60" width="345" height="550" position="center" darkWidth="345" darkHeight="550" showCaption="false"} ::Image[]{src="https://app.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/3-IoHYCadyTYkjG8xuG42_image.png" size="90" width="1257" height="907" position="center" caption="Multiple Row View" darkWidth="1257" darkHeight="907" showCaption="true"} **Custom CSS: **This allows you to add your own CSS rules to make specific style changes to the Categories section that are not available in the predefined options. ::Image[]{src="https://app.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/DrYsuY7vSL70XzDz-gvSJ_image.png" size="90" width="1244" height="561" position="center" darkWidth="1244" darkHeight="561" showCaption="false"} *** # Product Highlights This adds a curated, swipeable list of specific products from a **single, designated merchant**. It allows you to shift the focus from a store to its specific products, tempting customers with beautiful product images directly on the Discovery Page. ::Image[]{src="https://app.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/vmkMhXoZIBTjWLXhuqtIG_image.png" size="90" width="1328" height="762" position="center" darkWidth="1328" darkHeight="762" showCaption="false"} **Configuring the Content: **This is where you tell the system exactly which products to display. Simply select Product Highlights, then proceed. - **Select Merchant: **This dropdown menu lists all the active merchants on your platform. You must choose **one **merchant for this section to pull products from. ::Image[- **Select Merchant: **This dropdown menu lists all the active merchants on your platform. You must choose **one **merchant for this section to pull products from.]{src="https://app.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/bw5jtn-4V7wAUp7Ldy0zm_image.png" size="70" width="687" height="633" position="center" darkWidth="687" darkHeight="633" showCaption="false"} - **Select Category: **After you've chosen a merchant, this second dropdown will populate with all the **product categories **that belong to that specific merchant. Select the category of products you want to showcase. ::Image[]{src="https://app.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/PH2rL4qAwhq-TpeaRv-Rz_image.png" size="70" width="789" height="563" position="center" darkWidth="789" darkHeight="563" showCaption="false"} **Configuring the Mobile Layout: **This setting controls how the product showcase will look on a mobile phone - **Single Row Scroll: **This displays the products in a single, clean, horizontal line that customers can swipe through. ::Image[]{src="https://app.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/gsCClK7znwNeEbfqPuGHV_image.png" size="70" width="754" height="815" position="center" darkWidth="754" darkHeight="815" showCaption="false"} - **Stacked Grid: **This displays the products in a two-column grid. The customer scrolls down the page to see all the items in the highlight section. ::Image[]{src="https://app.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/mpHtOwHXCcOjvSp0dJ0-5_image.png" size="60" width="592" height="813" position="center" darkWidth="592" darkHeight="813" showCaption="false"} *** # AI-based Merchant Recommendations The **"Recommended For You" **section will act as a personalized welcome mat for every user and will suggest products for a seamless shopping experience. ::Image[]{src="https://app.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/CivYBrJEVnDTZ5mLVSqpl_image.png" size="90" width="1879" height="907" position="center" darkWidth="1879" darkHeight="907" showCaption="false"} - **For Your Regulars: **When a logged-in customer arrives, the AI analyzes their past orders and preferences to showcase stores they're most likely to love. - **For New Visitors: **For guests who aren't logged in, the system automatically highlights your most popular and trending stores, ensuring newcomers see the best your platform has to offer right away. *** # Featured Merchants: Your Hand-Picked Showcase The "Featured Merchants" section is a prominent, curated showcase on your Discovery Page where you can hand-pick specific stores to highlight. It allows you to strategically guide customer attention to the businesses you want to promote most. ::Image[]{src="https://app.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/k-SKNPcBmRFZgGeaYghF8_image.png" size="90" width="1901" height="825" position="center" darkWidth="1901" darkHeight="825" showCaption="false"} ::Image[]{src="https://app.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/gRrGOZuWvaFFRQiFYcFH8_image.png" size="90" width="1901" height="842" position="center" darkWidth="1901" darkHeight="842" showCaption="false"} *** # Nearby Merchants The "Nearby Merchants" section is a smart, dynamic, and personalized list that shows customers the stores that are physically closest to their current location. This is the core of a "quick commerce" platform, which automatically connects customers with the most convenient options for the fastest possible delivery. The primary option is **Edit Custom CSS**, for users to add custom styling. ::Image[]{src="https://app.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/yFrV6Hd53NdK52zCDyMcj_image.png" size="60" width="339" height="330" position="center" darkWidth="339" darkHeight="330" showCaption="false"} ::Image[]{src="https://app.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/Hqr1Iqddx6m5aRgPDEnNV_image.png" size="90" width="1895" height="840" position="center" darkWidth="1895" darkHeight="840" showCaption="false"} *** :::hint{type="info"} **Footer (Customizing with CSS) ** Click **Footer **in the main section list and use the **Edit Custom CSS **button. You can add custom code here to change font sizes, add borders, or customize colors. ::: ::Image[]{src="https://app.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/d8qNDul_gKrLAKRp_-kZG_image.png" size="90" width="1800" height="894" position="center" darkWidth="1800" darkHeight="894" showCaption="false"} ::Image[]{src="https://app.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/l1HfQwz_5VNAwvLeqIVgU_image.png" size="90" width="1759" height="828" position="center" darkWidth="1759" darkHeight="828" showCaption="false"} *** # Frequently Asked Questions (FAQ) :::ExpandableHeading **Can we show products directly on the Discovery Page instead of merchants?** The Discovery Page is designed to display **merchants first**, not products directly. This setup ensures a smooth ordering experience. If products from multiple merchants were shown together, customers wouldn’t be able to add them all to a single cart, since delivery from different merchants in one order isn’t feasible in a **quick-commerce** model. That’s why the user first selects a **merchant**, and then explores and orders products from that specific store. However, if you’d like to highlight specific products, you can use the **Product Highlights** feature, which allows you to display featured or popular products from a specific merchant. ::: *** :::ExpandableHeading **Can I add an extra section with unique styling to my page?** Yes, you can add a **Custom Code **element to your page, where you can use HTML and CSS to build a unique section from scratch, giving you unlimited creative freedom. ::: *** :::ExpandableHeading **How can I edit the business category shown on the Discovery Page?** Regarding editing Categories, navigate to the Admin Panel > Merchants > Category. From there, you'll see the option to edit any category you want, and you can make the desired changes accordingly. After doing so, you can simply navigate back to the discovery page to see the implemented changes ::: *** :::ExpandableHeading **Can I remove the search bar on the Discovery Page?** The global search bar isn't listed as a standard removable element in the Discovery Page customization options. However, you can potentially hide it using custom CSS modifications. ::: *** :::ExpandableHeading **Can I duplicate the Featured Stores section on the discovery page?** Currently, duplicating the Featured Stores section isn’t possible. As an alternative, you can create banners in the theme section. These banners can be edited to include links to specific stores, so when a customer clicks a banner, they’ll be taken directly to that store. ::: *** :::ExpandableHeading **What is the recommended resolution for banners in strip mode?** The recommended resolution is based on a **3:1 aspect ratio**. Moreover, you can see all the different resolutions for the banner present in different layouts once you add/edit a banner. ::: *** :::ExpandableHeading **How do I change the “Featured Merchants” text on the discovery page?** To change this or any other text, go to your admin panel and open **Settings > Language**. Scroll to the client language section, find the field for “Featured Merchants,” for this case, and update it with the text you prefer. ::: *** :::ExpandableHeading **How can I promote or highlight certain merchants?** To promote specific merchants, you can use the **Sponsored Merchant **feature and the **Featured Merchant**. Simply go to your admin panel, open the **Merchants **section, and check the box for “Sponsored Merchant” and "Featured Merchant." This will showcase them prominently as part of promotions. ::: *** :::ExpandableHeading **Is it possible to make Sponsored Merchants location-based?** Since this is a hyperlocal delivery and service platform, all merchants are shown based on distance, with the nearest merchants appearing first. Sponsored and Featured Merchants also follow the same rule and are displayed according to their proximity to the customer. ::: *** :::ExpandableHeading **Is there a limit to how many banners I can have in a slideshow?** There is no technical limit, but for the best customer experience, a good number is between **3 and 7 banners**. ::: *** :::ExpandableHeading **Can I remove the default Home Page and set the Discovery Page as my Home Page?** Yes, this is possible. If your store is a **Multi-Vendor**, you will need to provide a default address that can be used to bypass the customer login/signup screen and redirect users directly to the Discovery Page. This can be done by navigating to the admin panel > settings > Google Map > "Enable Default Location for Clients" and then putting in the address so that the next time a user comes, they land directly on the "Discovery Page" with the preset location. However, if your store is already a **Single Store,** then after the customer fills out the location, they will be taken directly to the "Discovery Page". :::