Customize Web & App
ο»Ώ
For basic modifications such as text, basic colors, and content, direct settings were provided. Now this page or app builder feature enables you to personalize your website and app, making them truly yours! This functionality extends beyond website pages such as landing page, discovery page, and merchant menu pages, allowing customization even for the app screens. Utilizing HTML and CSS, you can add a personal touch to your digital space. HTML forms the structural foundation, while CSS brings in the stylish elements. If coding isn't your forte, no worries β you can easily collaborate with any "CSS designer" for this one-time task. This guide is designed to simplify the process and make it an enjoyable experience.
ο»Ώ
To the left, click on "Settings"
![Document image Document image](https://images.archbee.com/A6k4A417O1V2DGm4H5kN0/f_sSDuKibAP2E6hALo41z_change-site-title-business-name-and-social-media-links-step-2.png?format=webp)
ο»Ώ
Then click "Customize Web & App"
![Document image Document image](https://images.archbee.com/A6k4A417O1V2DGm4H5kN0/Cs675gGWf3-K3GBjW88AD_how-to-access-and-modify-settings-on-hyperzod-app-step-2.png?format=webp)
ο»Ώ
Start by choosing the specific page you want to customize, whether it's the Landing or Home page, Discovery page, or the Merchant menu page. You can find this option on the top left of the editor.
![Document image Document image](https://images.archbee.com/A6k4A417O1V2DGm4H5kN0/Sx-5UpQWxR9q51u0oasG4_how-to-access-and-modify-settings-on-hyperzod-app-step-4.png?format=webp)
ο»Ώ
Utilize the eye icon to toggle the visibility of any element on the selected page. This allows you to easily hide or unhide specific sections or elements as needed.
![Document image Document image](https://images.archbee.com/A6k4A417O1V2DGm4H5kN0/kYzRarf_qY2a_72lEDR23_how-to-customize-a-discovery-page-with-product-banners-and-nearby-merchants-step-4.png?format=webp)
ο»Ώ
To rearrange sections or elements on the selected page, simply drag and drop them into your preferred order. This intuitive process lets you customize the layout with ease.
![Document image Document image](https://images.archbee.com/A6k4A417O1V2DGm4H5kN0/i1yaTIBXYjsa3OQ39bXZ0_how-to-customize-a-discovery-page-with-product-banners-and-nearby-merchants-step-9.png?format=webp)
ο»Ώ
- Select the specific element on the page that you want to modify from the list.
![Document image Document image](https://images.archbee.com/A6k4A417O1V2DGm4H5kN0/--2fPgxN_fxTG87L38JH8_how-to-publish-a-discovery-page-with-featured-merchants-step-2-1.png?format=webp)
ο»Ώ
- On the right side of the editor, open the code editor section designated for custom CSS.
![Document image Document image](https://images.archbee.com/A6k4A417O1V2DGm4H5kN0/7EK9vfaRNOTYCXxNDeb9r_how-to-publish-a-discovery-page-with-featured-merchants-step-3.png?format=webp)
- Input the CSS code necessary to customize the selected element. After entering the CSS code, ensure to save your changes. Note: If you're targeting mobile-specific styles, utilize the "@media" query to ensure proper responsiveness.
![Document image Document image](https://images.archbee.com/A6k4A417O1V2DGm4H5kN0/Ux2eJfjMFblmtB384r1cE_how-to-publish-a-discovery-page-with-featured-merchants-step-5.png?format=webp)
ο»Ώ
- Verify that the added CSS reflects correctly in the page builder content.
![Document image Document image](https://images.archbee.com/A6k4A417O1V2DGm4H5kN0/LjN1BW8ekU9AHNhv28AqM_how-to-publish-a-discovery-page-with-featured-merchants-step-6.png?format=webp)
ο»Ώ
- Finally, click the "Publish" button to apply the modifications across the ordering channels.
![Document image Document image](https://images.archbee.com/A6k4A417O1V2DGm4H5kN0/zclbL-iC3N3VIrLtmJeYF_how-to-publish-a-discovery-page-with-featured-merchants-step-7.png?format=webp)
ο»Ώ
Stack: From the left sidebar, the Stack option directs you to the screen where you can work on customization, and all the elements of the selected page will be displayed.
![Document image Document image](https://images.archbee.com/A6k4A417O1V2DGm4H5kN0/I3RHpzbnSYfz0flr3jSu1_how-to-access-and-modify-settings-on-hyperzod-app-step-5.png?format=webp)
ο»Ώ
From the left sidebar, use the + icon to easily pick & add a custom element to the selected page. Similarly, you can add more elements if required.
![Document image Document image](https://images.archbee.com/A6k4A417O1V2DGm4H5kN0/Q6A8ixPVPDaWDalyfDv25_hyperzod-workflow-step-5.png?format=webp)
ο»Ώ
- From the left sidebar, utilize the Image icon to upload assets. The links generated can then be used to integrate them into your Custom Code element.
![Document image Document image](https://images.archbee.com/A6k4A417O1V2DGm4H5kN0/2H84bT0t6Vye5o85l5UFH_how-to-customize-a-discovery-page-with-product-banners-and-nearby-merchants-step-11.png?format=webp)
ο»Ώ
- Click +Add to upload an asset
![Document image Document image](https://images.archbee.com/A6k4A417O1V2DGm4H5kN0/GxWWU5tLWNTH2zeEgIBHa_how-to-customize-a-discovery-page-with-product-banners-and-nearby-merchants-step-13.png?format=webp)
ο»Ώ
- Locate the uploaded asset from the list and click the settings icon
![Document image Document image](https://images.archbee.com/A6k4A417O1V2DGm4H5kN0/_04Pec13xD420RPZX8uqj_how-to-customize-a-discovery-page-with-product-banners-and-nearby-merchants-step-14.png?format=webp)
ο»Ώ
- Copy the link of the image and close the popup.
![Document image Document image](https://images.archbee.com/A6k4A417O1V2DGm4H5kN0/IGjMbgVEr0ERuW8QVE4Uy_how-to-customize-a-discovery-page-with-product-banners-and-nearby-merchants-step-15.png?format=webp)
ο»Ώ
- Now select your Custom Code Element
![Document image Document image](https://images.archbee.com/A6k4A417O1V2DGm4H5kN0/4pbWC_rvCYiU0vbA1Ww-h_how-to-customize-a-discovery-page-with-product-banners-and-nearby-merchants-step-18.png?format=webp)
ο»Ώ
- From the right panel, Select Custom HTML
![Document image Document image](https://images.archbee.com/A6k4A417O1V2DGm4H5kN0/tNhJYxdw9Th6gRzAEjX64_how-to-customize-a-discovery-page-with-product-banners-and-nearby-merchants-step-20.png?format=webp)
ο»Ώ
- Now you can utilize the image link in the code editor to write your HTML code & the section will be added.
![Document image Document image](https://images.archbee.com/A6k4A417O1V2DGm4H5kN0/B1xLb4qnEPuIWk2z-y-gY_how-to-customize-a-discovery-page-with-product-banners-and-nearby-merchants-step-26.png?format=webp)
ο»Ώ
- Refine your image using the CSS editor for customizations or styling purposes.
![Document image Document image](https://images.archbee.com/A6k4A417O1V2DGm4H5kN0/5q356lLGHfKE143ZL90ll_how-to-customize-a-discovery-page-with-product-banners-and-nearby-merchants-step-28.png?format=webp)
ο»Ώ
- Verify that the added section reflects correctly in the page builder content. Finally, click the "Publish" button to apply the modifications across the ordering channels.
![Document image Document image](https://images.archbee.com/A6k4A417O1V2DGm4H5kN0/Fd431qLXqy22nsJl7193M_how-to-customize-a-discovery-page-with-product-banners-and-nearby-merchants-step-32.png?format=webp)
ο»Ώ
Following the same actions as above, you can also custom-design the menu pages for specified merchants.
- From the dropdown, switch to merchant pages
![Document image Document image](https://images.archbee.com/A6k4A417O1V2DGm4H5kN0/NNBNm2SdHcJC-exZScrP-_guide-to-customizing-the-hyper-store-inc-page-step-3.png?format=webp)
ο»Ώ
- Select the Store from the list
![Document image Document image](https://images.archbee.com/A6k4A417O1V2DGm4H5kN0/9R0yfUCiQUlkIgFjOLOhG_guide-to-customizing-the-hyper-store-inc-page-step-4.png?format=webp)
ο»Ώ
- Add perform similar actions as explained above to customize.
![Document image Document image](https://images.archbee.com/A6k4A417O1V2DGm4H5kN0/-L9AuxKNGQNgrX4qPtVKR_guide-to-customizing-the-hyper-store-inc-page-step-8.png?format=webp)
ο»Ώ
- Lastly, click publish to make all changes appear on your website and ordering apps.
![Document image Document image](https://images.archbee.com/A6k4A417O1V2DGm4H5kN0/qh8pGoXrpB_pykGOqGiyq_guide-to-customizing-the-hyper-store-inc-page-step-15.png?format=webp)
ο»Ώ
ο»Ώ
ο»Ώ