--- title: Add Elements and Upload Assets slug: add-elements-and-upload-assets docTags: createdAt: 2025-01-04T10:26:22.615Z --- This section enables you to enhance your store by adding extra components, such **as banners **(to showcase offers), **Custom Code **(for advanced HTML/CSS changes), **Product Highlights **(to feature key products), and **Image with Text **blocks (for visual storytelling). These elements give you the flexibility to go beyond the default template and create a more personalized shopping experience. # How to Add a New Element - Navigate to the Admin panel > Theme (Appearing in the left panel) and select the page that you wish to customise from the Dropdown option. ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/juBhnwT0WFb4Kk62AOQAS_image.png" size="90" width="1633" height="814" position="center" darkWidth="1633" darkHeight="814" showCaption="false"} - In the left vertical bar of the editor, click the **plus icon**. - The "Add Elements" panel will open, displaying a list of all available content blocks that you can add to your page. ::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"} *** # 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. :::hint{type="info"} **Note: **The Hero Banner is supported in both business models: Single Vendor and Marketplace. ::: ::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 three 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 This adds a new, independent "Banners" section to your page. The ability to add more banner sections allows you to place targeted advertisements and promotions at different points in the customer's browsing journey. For Example:- **Driver/Merchant Recruitment:** A banner doesn't always have to be for customers. You can add a banner near the bottom of the page with the text "Drive with us and earn more!" linking to your driver sign-up page. ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/B2-gmM_1K8OuK9-_93tOm_image.png" size="70" width="630" height="759" position="center" darkWidth="630" darkHeight="759" showCaption="false"} ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/YUQla9z5N91x2x1YzxAWR_image.png" size="90" width="1895" height="845" position="center" darkWidth="1895" darkHeight="845" showCaption="false"} *** # Custom Code This adds a blank section where a user can insert custom HTML and CSS code to build a unique content block from scratch. :::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. ::: **Creating a "Shop by Department" Visual Menu: **The "Categories" section on the Discovery page displays small icons for different departments. Click on the Custom Code element to add it to your page and use HTML and CSS to customize the look, such as enlarging the category icons or changing their style to match your design. ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/euk-vZWW-JDvXGrmVlWUw_image.png" size="80" width="944" height="697" position="center" darkWidth="944" darkHeight="697" showCaption="false"} ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/jpjMc568tpswEfRedDkYd_image.png" size="90" width="1902" height="837" position="center" darkWidth="1902" darkHeight="837" showCaption="false"} *** # Product Highlights The Product Highlights feature 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. To add the Product Highlights section, simply select Product Highlights, then proceed. - **Select Merchant: **The dropdown menu lists all the active merchants on your platform. 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://api.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, the second dropdown will populate with all the [product categories](https://help.hyperzod.com/add-a-product-category#BrFdi) associated with that specific merchant. Select the category of products you want to showcase. ::Image[]{src="https://api.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: **It displays the products in a single, clean, horizontal line that customers can swipe through. ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/gsCClK7znwNeEbfqPuGHV_image.png" size="70" width="754" height="815" position="center" darkWidth="754" darkHeight="815" showCaption="false"} - **Stacked Grid: **It 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://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/mpHtOwHXCcOjvSp0dJ0-5_image.png" size="70" width="592" height="813" position="center" darkWidth="592" darkHeight="813" showCaption="false"} *** # Collection Grid Once you select the "Collection Grid" feature from the Elements list, it will appear in the section stack. This section is designed to create main categories and link subcategories under them, making it particularly useful for Grocery, Pharmacy, or stores with a large number of items. ### Configure a Collection Grid Add the **Collection Grid **from the **Add Elements **panel. ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/Fsgcfjiq6ovb7U6rkbzlG_image.png" size="70" width="616" height="573" position="center" darkWidth="616" darkHeight="573" showCaption="false"} **Add Info in Preferred Languages ** Tailor your Collection information to customer choices. Use [language settings](https://help.hyperzod.com/language) to add or remove options or choose the default language of your store. This feature allows you to input and present store details in the customer's chosen language. For example, if a customer selects Spanish, all added information will be displayed in Spanish for them. ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/fsubbzAlMVqfRP9McaMkH_image.png" size="70" width="684" height="562" position="center" darkWidth="684" darkHeight="562" showCaption="false"} **Add a Title and Description** Provide a title to name your collection grid section. For instance, if you're creating a "Shop by Department" section, you can use this field to label it. Additionally, you can include a brief description below the title to offer more context. ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/bdSUQIxZMgJThrJtT9YLS_image.png" size="70" width="697" height="583" position="center" darkWidth="697" darkHeight="583" showCaption="false"} ### Add a Category Collection - To add, click "Add New" ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/4509N0m3Vx7BOcQhk7yCR_image.png" size="70" width="597" height="431" position="center" darkWidth="597" darkHeight="431" showCaption="false"} ### Upload Image - If you'd like the category name to appear inside the image icon, include it directly in the image itself. Otherwise, you can enter the name separately in the Category name field. ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/f7LbMhohFZLrDUSdIjSQq_image.png" size="70" width="588" height="724" position="center" darkWidth="588" darkHeight="724" showCaption="false"} ### Add Information in Preferred Languages - Tailor the collection name to suit customer preferences by using [language settings ](https://help.hyperzod.com/language#zC1Tg)to add or remove options or choose the default language of your store. Input and display details in the customer’s selected language. For example, if a customer chooses Spanish, the information will automatically appear in Spanish. ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/8DC5zoqMJxcpkahlpF1P5_image.png" size="70" width="593" height="781" position="center" darkWidth="593" darkHeight="781" showCaption="false"} ### Enter Category Name - Provide a category name that will appear below the image. If the category name is already included within the uploaded image, you can skip this step. ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/tJy50_rm-jRdGIYpbAXfB_image.png" size="70" width="805" height="784" position="center" darkWidth="805" darkHeight="784" showCaption="false"} ### Select View **Top Tab View: **When a customer clicks on your collection (e.g., "Breads"), they will be taken to a new page where the sub-categories you linked (Sourdough, Whole Wheat, Buns, Rolls) are displayed as a **clean, horizontal, swipeable tab menu **at the top of the page. The products will be shown below. ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/syCE2l8hY-h5AH-I2TB8z_image.png" size="70" width="579" height="772" position="center" darkWidth="579" darkHeight="772" showCaption="false"} ![](https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/E_OGZxWZjfRCowh8oo5X2_image.png) **Sidebar View: **When a customer clicks on your collection, they will be taken to a new page that is split into two columns. On the left, there will be a **vertical list of the sub-category names**. On the right, the products for the selected sub-category will be displayed. ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/CYnj60IT2NImhPUDUw7mM_image.png" size="70" width="528" height="755" position="center" darkWidth="528" darkHeight="755" showCaption="false"} ![](https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/fdC-IF4PmeMLkl9pRnEX2_image.png) ### Select Subcategories - Choose the subcategories you want to link under this main category. You can select multiple subcategories as needed to offer a comprehensive view. ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/BplOMbq8qemA2M9Wg3VnF_image.png" size="70" width="525" height="758" position="center" darkWidth="525" darkHeight="758" showCaption="false"} ### Sort Collections - Drag and drop collections using the drag icon to rearrange their order in the list. ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/hzsueySV-BSzCUW0U_UrW_image.png" size="80" width="708" height="432" position="center" darkWidth="708" darkHeight="432" showCaption="false"} ### Edit Collections - Click on any collection to open it and make edits as needed. ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/QP1Q0SSGEg7zO2ecHPbco_image.png" size="70" width="513" height="404" position="center" darkWidth="513" darkHeight="404" showCaption="false"} *** # Merchant Collection The Merchant Collection section allows you to showcase merchants or business categories on your ordering storefront in a dedicated, customizable section. It can be used to help customers discover specific businesses, explore merchants by category, or highlight curated collections such as Featured Merchants, Popular Near You, and Top Restaurants. When creating a Merchant Collection, you can choose whether to display specific merchants or organize the collection by Business Category. Then customize the heading, description, layout, color scheme, and other styling options to match your theme. This gives you flexibility to create different types of discovery sections depending on how you want customers to browse and discover businesses. *** ## Add a Merchant Collection - From the left panel, click **Add Elements**. - Select **Merchant Collection**. - The Merchant Collection section will be added to the page. - Select the section to open its configuration options. ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/_qVzFIScMZFNXpdwhN1z5_image.png" size="70" isUploading="false" width="740" height="862" darkWidth="740" darkHeight="862" showCaption="false"} *** ## Configure Merchant Collection Once the Merchant Collection section is added, you can configure its content and appearance from the settings panel. ## Add a Heading and Description You can add a Heading and Description for the collection. The heading identifies the collection, while the description can provide additional information to customers. **Example:** Heading: Featured Merchants Description: Explore some of our most popular local businesses. ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/EilwpIIC51OSJ9bTYP7He_image.png" size="70" isUploading="false" width="655" height="564" darkWidth="655" darkHeight="564" showCaption="false"} ## Choose the Collection Type Under Collection Type, you can choose how the collection should be created: - **Merchant:** Select specific merchants that you want to display. - **Business Category:** Create the collection based on business categories. ### Merchant Select Merchant when you want to manually choose the specific merchants that should appear in the collection. After selecting Merchant, use the Merchants field to search for and select the merchants you want to include. You can select multiple merchants in the same collection. ### Business Category Select Business Category when you want to organize or showcase merchants based on their business category instead of manually selecting individual merchants. **For example**, a section titled Explore Restaurants can be used to help customers discover merchants belonging to the restaurant category. ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/4cKRdLoSYP_mW0Wi3nSsB_image.png" size="70" isUploading="false" width="660" height="523" darkWidth="660" darkHeight="523" showCaption="false"} ## Choose a Layout Under Layout, you can choose how the collection is displayed on your ordering storefront. ### Default Displays the collection using the standard layout. This can be useful when you want the collection to have a straightforward merchant presentation. ![](https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/cr-wk0BhP7J7xoFj3bD-j_image.png) ![](https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/4OS75MK2KAfKuTIKs9oTC_image.png) ### Carousel Displays merchants in a horizontally scrollable carousel. This is useful when you have several merchants but want to keep the section compact. ![](https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/BQgmlCvXYnBlAvAP9VJaA_image.png) ![](https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/gIfSe93vdnpQK2ash_Q8P_image.png) ### Multi Carousel Displays merchants using multiple rows within a carousel-style layout. This can be useful when you want to display a larger number of merchants while still keeping the section organized. ![](https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/rlISRZuGBGmbgdwau-wym_image.png) ![](https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/uahOobG4WffBqVBiqX34f_image.png) ### Logo Carousel Displays merchants primarily through their logos in a compact layout. This is useful when merchant branding and quick discovery are the main focus. ![](https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/u0dJcBHnADLIuApH-3jl5_image.png) ![](https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/V5hFb3Tcx43K8shNsL7XW_image.png) *** ## Configure the Color Scheme The Color Scheme option allows you to apply a predefined color scheme to the Merchant Collection section. You can create color schemes and then use them across your store sections to maintain a consistent visual style. :::hint{type="info"} **Note: **You can refer to the [Color Scheme guide](https://help.hyperzod.com/branding-setup#color-schemes) for more information on creating and applying color schemes. ::: ![](https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/INc8lqmbGIbCXyaIApxUD_image.png) *** ## Customize with Custom CSS The Edit Custom CSS option allows you to add custom styling to the Merchant Collection section. This can be used when you need additional visual customization beyond the standard settings available in the Theme Builder. *** # Image With Text A simple but incredibly versatile element that creates a professional-looking content block with an image on one side and a heading and text on the other. It's perfect for breaking up a long page of products and merchants with engaging storytelling. ## Image Settings Simply first click on the "Image to Text" from the elements tab, and then proceed. ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/INNHd3wNl-ethnCHr42KT_image.png" size="50" width="417" height="408" position="center" darkWidth="417" darkHeight="408" showCaption="false"} ### Image Upload Upload a banner or visual that represents your content. ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/b8Dugp0XaytqQ2r5Tb1LC_image.png" size="60" width="399" height="328" position="center" darkWidth="399" darkHeight="328" showCaption="false"} ### Image Size Controls Adjust the image height and width to control how it appears across devices. Use these settings to ensure the image fits well and maintains a balanced layout. ::::VerticalSplit{layout="middle"} :::VerticalSplitItem ![](https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/yRBsSIIiQdf-XddPT34fy_image.png) ::: :::VerticalSplitItem ![](https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/FsLnIBF0CrDmk4jIGnmqH_image.png) ::: :::: ## Layout Settings This section controls how the image and text are arranged. ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/Q6idkf29WyfqjSXU0dA1L_image.png" size="50" width="355" height="574" position="center" darkWidth="355" darkHeight="574" showCaption="false"} ### Desktop Sort Order Control whether the image appears before or after the text in the section layout. ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/hGyMUWjmqtW-AOU3f25HF_image.png" size="50" width="358" height="370" position="center" darkWidth="358" darkHeight="370" showCaption="false"} ::::VerticalSplit{layout="middle"} :::VerticalSplitItem ![](https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/tdCCEx6KrXDa8FNuGeWIe_image.png "Image First") ::: :::VerticalSplitItem ![](https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/VFjBWVfpyxGae4DV89zYR_image.png "Image Second") ::: :::: ### Desktop Content Position Top / Middle / Bottom positioning of text relative to the image. ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/IBfJaer4Uzb7dO8rFjE1A_image.png" size="50" width="356" height="453" position="center" darkWidth="356" darkHeight="453" showCaption="false"} ::::VerticalSplit{layout="middle"} :::VerticalSplitItem ![](https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/kWUIhFHBHnrCbFXs6D3A1_image.png "Top Alignment of Text") ::: :::VerticalSplitItem ![](https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/dk-XQBQpdFtxhKv01F1zX_image.png "Center Alignment of Text") ::: :::: ### Desktop Content Alignment Control how the text is aligned within the section (left, center, or right) ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/-gI-zLPOY7GJdvbZgIx4k_image.png" size="50" width="355" height="457" position="center" darkWidth="355" darkHeight="457" showCaption="false"} ::::VerticalSplit{layout="middle"} :::VerticalSplitItem ![](https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/pY1vlt_OwL-EI0PP8WrYJ_image.png "Left Content Alignment") ::: :::VerticalSplitItem ![](https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/etXYYZgXY0mycXGtvhBoa_image.png "Center Content Alignment") ::: :::: ### Mobile Sort Order Choose how content stacks on mobile ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/qX_rtsFFQnxilg6jbG2R6_image.png" size="50" width="355" height="453" position="center" darkWidth="355" darkHeight="453" showCaption="false"} ::::VerticalSplit{layout="middle"} :::VerticalSplitItem ![](https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/QmIh4NNNazcnOUgcshBN0_image.png "Image First") ::: :::VerticalSplitItem ![](https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/uNv35Ul5u2saL4zPj6nPp_image.png "Image Second") ::: :::: ### Mobile Content Alignment Adjust text alignment for smaller screens ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/hjHbVftVsoWZSnPkrbQs2_image.png" size="50" width="357" height="572" position="center" darkWidth="357" darkHeight="572" showCaption="false"} ::::VerticalSplit{layout="middle"} :::VerticalSplitItem ![](https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/pbRDsCRnyYaIH8cbmrPnD_image.png "Left Content Alignment") ::: :::VerticalSplitItem ![](https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/kv2tDgV01-qlIfmK6OR4S_image.png "Center Content Alignment") ::: :::: ### Padding (Top & Bottom) Add spacing around the section for better visual separation ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/S3uzjJw9gfyNcSVd39bXX_image.png" size="60" width="350" height="119" position="center" darkWidth="350" darkHeight="119" showCaption="false"} ::::VerticalSplit{layout="middle"} :::VerticalSplitItem ![](https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/xf2AazCIjulMtl3igB82g_image.png "Top Padding set to None") ::: :::VerticalSplitItem ![](https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/GuYKcatIlOAgPhfghEzY2_image.png "Top Padding set to Large") ::: :::: ## Text Settings This section allows you to customize the text content of the section, including the heading, description, and their styles. ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/ZFvTk-_D8SU_0FOHgDBlG_image.png" size="50" width="355" height="514" position="center" darkWidth="355" darkHeight="514" showCaption="false"} ### Heading Provide the main title of the section for your visual ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/YQX014AW7JBs-mVKF4oeM_image.png" size="50" width="358" height="277" position="center" darkWidth="358" darkHeight="277" showCaption="false"} ![](https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/7Smc7ZOHXeyLL0zfxHrXI_image.png) ### Heading Style Control the size of the Heading (Small, Medium, Large) ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/QlhX1PzHvnl-W1zi09vo6_image.png" size="50" width="361" height="512" position="center" darkWidth="361" darkHeight="512" showCaption="false"} ::::VerticalSplit{layout="middle"} :::VerticalSplitItem ![](https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/9x5jBwbxromghLrZiO8vO_image.png "Heading Style set to Small") ::: :::VerticalSplitItem ![](https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/snw4Ej9spXWu84jvEDB-S_image.png "Heading Style set to Medium") ::: :::: ### Description Add supporting text to give more context to your visual. This helps explain the purpose of the section and makes it clearer for users to understand what you are highlighting. ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/JiUu4RCBN8vVNxNm2-McA_image.png" size="50" width="356" height="514" position="center" darkWidth="356" darkHeight="514" showCaption="false"} ![](https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/4axaD29rPc4LLodVhJfs8_image.png) ### Description Style Choose how the description text appears by selecting a style such as **Body **or **Subtitle** ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/3Fco-SUg3Eq4_Q1DI1DtP_image.png" size="50" width="356" height="513" position="center" darkWidth="356" darkHeight="513" showCaption="false"} ::::VerticalSplit{layout="middle"} :::VerticalSplitItem ![](https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/6MqH8c3pQ3vAKm_E5MflY_image.png "Description Style set to Body ") ::: :::VerticalSplitItem ![](https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/i3IrfAAThvILIk4_ucd-o_image.png "Description Style set to Subtitle ") ::: :::: ## Button Settings Through this section, you can define the Button Label and the action type linked to the button. ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/TcKgpwfs7wgRZraWDk3Ap_image.png" size="50" width="368" height="232" position="center" darkWidth="368" darkHeight="232" showCaption="false"} ### Button Label Text shown on the button (e.g., *Signup Now*, *Explore*) ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/e2FUnwASEP_fv84gcMbY9_image.png" size="50" width="368" height="232" position="center" darkWidth="368" darkHeight="232" showCaption="false"} ### Button Action Add a link or redirect users to a specific page using a search term, merchant, or merchant category. ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/EwWYNvxSXzapRgP4mpXP8_image.png" size="50" width="353" height="314" position="center" darkWidth="353" darkHeight="314" showCaption="false"} ## Color Customization You can customize the section’s appearance by setting the background color, heading color, description color, and button colors to match your brand theme and maintain a consistent look. ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/nU8W07_BVz2Jsx8pUB_9A_image.png" size="50" width="350" height="274" position="center" darkWidth="350" darkHeight="274" showCaption="false"} ![](https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/NdxtxzIoY3oc1u6LGkl-J_image.png) ### Visibility Settings Control where this section is displayed by choosing whether it appears on desktop, mobile web, or mobile apps, allowing you to tailor the experience across different platforms. ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/Gu-0zhOpJLn6qosvj0a41_image.png" size="50" width="330" height="149" position="center" darkWidth="330" darkHeight="149" showCaption="false"} ## Custom CSS (Advanced) You can add custom styling for more control over the design if required. ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/v0LreVMRhRE8k0XzWooBX_image.png" size="50" width="350" height="273" position="center" darkWidth="350" darkHeight="273" showCaption="false"} *** # Upload Assets The Upload Assets section allows you to upload images and generate links for them. These links can be used when adding custom sections to your pages or app screens, ensuring seamless integration of visual elements. **How to Access the Assets Panel** In the theme page, on the left panel, click on the square icon to access the "Upload Assets" panel. ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/TkWXLqKsfzfsrJ63gWyU2_image.png" size="70" width="557" height="467" position="center" darkWidth="557" darkHeight="467" showCaption="false"} ### Add Assets - In the Assets panel, click the **Add **button. - This will open your computer's file explorer. Select the image you want to use and upload it. - The image will now appear as a thumbnail in your Assets library. ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/-vvNisET_OPhDyHYDBBZn_image.png" size="70" width="707" height="474" position="center" darkWidth="707" darkHeight="474" showCaption="false"} ### How to Use Assets - Locate the uploaded asset and **click on the thumbnail **of the image you just uploaded from the list - Copy the link of the image and close the pop-up. ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/xqRsqP0v4Ug0gwZJi-t3B_image.png" size="70" width="701" height="844" position="center" darkWidth="701" darkHeight="844" showCaption="false"} - Now select your Custom Code Element ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/YPISUIgLJkX4mazQ5byaZ_image.png" size="70" width="740" height="610" position="center" darkWidth="740" darkHeight="610" showCaption="false"} - From the right panel, Select Custom HTML ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/SuWuNipHZWx1g169Rq1CB_image.png" size="70" width="790" height="635" position="center" darkWidth="790" darkHeight="635" showCaption="false"} - Now you can utilize the image link in the code editor to write your HTML code & the section will be added. ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/P0hXo_Zc0eMYZcKgYyZaU_image.png" size="90" width="1481" height="794" position="center" darkWidth="1481" darkHeight="794" showCaption="false"} - Refine your image using the **CSS editor** for customizations or styling purposes. - Verify that the added section reflects correctly in the page builder content. Finally, click the "Publish" button to apply the modifications. ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/DOHqV_2Q7Iay7uJ4_IN2-_image.png" size="80" width="715" height="471" position="center" darkWidth="715" darkHeight="471" showCaption="false"} *** # Frequently Asked Questions (FAQs) :::ExpandableHeading **How can I promote specific merchants to charge them a marketing fee? ** You can promote merchants by marking them as **Sponsored Merchants** or **Featured Merchants**. To do this, go to **Admin Panel > Merchants**, locate the merchant in the list, and simply check the box for either "Featured" or "Sponsored." ::: *** :::ExpandableHeading **How can I remove or edit banners?** To manage banners, go to **Admin Panel > Settings > Theme**. In the left panel, click on **Banners**. On the right side, you’ll see the option to add, edit, or remove banners. Simply select the specific banner you want to update or delete. ::: *** :::ExpandableHeading **How can I change the size of the Banners?** While the Layout option for banners (e.g., Horizontal, Square) sets the general shape, you can fine-tune the exact height using Custom CSS. In the main section list, click on the **Banners **section you want to adjust. Click the **Edit Custom CSS **button and then, with a few lines of code, set a specific height. ::: *** :::ExpandableHeading **What is the limit to display products** **in product highlights? Is there an option to prioritize which products appear first? ** The product highlight section is limited to displaying up to 20 products. You also have the flexibility to prioritize which products appear first by using the product sorting option. To do this, navigate to the **Merchant Panel > Catalog > Category**, select the desired category, and then sort the products inside that category according to your preference. Additionally, you have the option to change the view of product highlights and display them either as a single-row scroll or as a stacked grid, depending on your preferred layout. ::: *** :::ExpandableHeading **Can we promote specific products for a merchant on the Discovery Page as part of a promotional strategy?** We offer a** Product Highlights** feature that allows merchants to showcase their items on the Discovery Page. This premium space can be used to display top-selling products from popular categories. You can even charge the sellers for such promotions on our platform. ::: *** :::ExpandableHeading **What exactly is the "Image With Text" element, and how is it different from a "Banner"?** The **Image With Text **element is a versatile content block designed to help you inform, explain, or tell a story on your page. Unlike a simple banner, which is mainly for advertising, this element balances a beautiful image with a headline and descriptive text, making it perfect for building trust. To make it even more effective, you can attach a **clickable button **with a link; for instance, a "Learn More" button that takes users to a detailed page about your service, turning an informational section into a powerful call to action. :::