Add Elements and Upload Assets

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 > settings > theme and select the page that you wish to customise from the dropdown option 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 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 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 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 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 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 select category after you've chosen a merchant, the second dropdown will populate with all the https //help hyperzod com/add a product category#brfdi associated with that specific merchant select the category of products you want to showcase 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 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 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 add info in preferred languages tailor your collection information to customer choices use 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 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 add a category collection to add, click "add new" 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 add information in preferred languages tailor the collection name to suit customer preferences by using 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 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 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 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 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 sort collections drag and drop collections using the drag icon to rearrange their order in the list edit collections click on any collection to open it and make edits as needed 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 let's walk through an example for better clarity creating a "list your restaurant" section simply first click on the "image to text" from the elements tab, and then proceed configure the layout and visuals set up the section’s design, upload an image, choose its placement, add text, adjust padding, pick a background color, and select where it appears (website, app, or both) craft your message with text settings this is where you write your persuasive copy to attract new partners heading you can add your main, benefit driven headline description here, you can add the supporting details that explain the benefits create the call to action (the button) the button is the final, crucial piece that converts a prospective partner's interest into a sign up button label this is the text inside the button it should be a clear and direct command button action / button link decides what happens when the user clicks the https //help hyperzod com/discovery page#51fqg you can choose from the drop down options for the one that suits your needs you can customize the button's colors to match our brand's primary action color 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 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 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 now select your custom code element from the right panel, select custom html now you can utilize the image link in the code editor to write your html code & the section will be added 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 frequently asked questions (faqs) 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 " 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 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 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 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 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