bettamax-docs

Setting up & customizing the Homepage

Choose the language for this docs:

This guide will show you how to customize your store’s homepage in BettaMax using Page Builder, without writing any code. You’ll learn how to add, edit, arrange, and delete interface elements, then save and preview the results.

 

Access the interface editor. #

Page Builder is a drag-and-drop tool that lets you customize your entire homepage interface without needing any programming knowledge. All changes are displayed directly on the preview screen before you save.

  1. Log in to admin.bettamax.com .
  2. From the left-hand menu bar, select My Store > Theme .
  3. Click the Customize button to open the Page Builder.
Note: Page Builder only applies to the Homepage. To customize product pages, see the guide on How to use Page Builder to create product pages .

 

Add a new element to the page. #

The homepage interface is built from independent components such as banners, product collections, testimonials, and countdowns. You can add any component using drag-and-drop functionality.

  1. In Page Builder, look at the menu panel on the left. Select the element group you want to add, for example: Hero , Products , Text , or Media .
  2. Drag the element from the menu panel to the desired location on the right-hand canvas. A blue line will appear to indicate where the element will be added.
  3. Release your hand to place the ingredient in that position.
Tip: Add elements in order from top to bottom, following how customers scroll the page. Typically: Large banner > Featured collections > Bestselling products > Testimonials > Footer.

 

Edit the content of an element. #

After adding elements, you need to adjust the content inside, such as text, images, background color, and font size, to suit your store. All changes are displayed directly in the preview without needing to save beforehand.

  1. Click on the element you want to edit on the canvas. The selected element will be highlighted with a colored border.
  2. The editing panel appears on the left. Change the properties you want to adjust:
    • Content – ​​Text content, title, CTA button.
    • Image – Upload an image or replace the current image.
    • Colors – Background color, text color, border color.
    • Font size – The font size for each element.
    • Spacing – The distance between padding and margin.

     

  3. See a live preview on the right-hand canvas after each change. No need to click Apply; the changes update automatically.

 

Rearrange the positions of the components. #

The order of elements on the homepage directly affects conversion rates. You can drag and drop any element to change its position without deleting and recreating it.

  1. Move your mouse over the element you want to move. The element’s name and control icon will appear.
  2. Press and hold the three horizontal lines icon next to the ingredient name.
  3. Drag the element up or down to the new position. The blue line indicates where the element will be placed.
  4. Release your hand to place the component in its new position.

 

Delete or duplicate a component #

When you need to clean up unnecessary elements or quickly create a similar element, use the delete and duplicate function directly in the Page Builder instead of recreating it from scratch.

Click on the element you want to manipulate to select it, then:

  • To delete a component: Click the trash can icon on the component’s control bar.
  • Duplicate a component: Click the duplicate icon on the control bar. The copy will appear directly below the original component.
Warning: Deleting a component is irreversible. If you accidentally delete a component that you’ve edited extensively, you’ll have to recreate and reconfigure it from scratch. Use Preview to double-check before deleting.

 

Select parent component #

In Page Builder, some elements are nested inside other elements (parent and child). When you need to edit or move a group of elements at the same time, you need to select the parent element instead of selecting each child element individually.

  1. Click on the selected child element.
  2. Click the upward arrow icon next to the component name in the control bar to move up to select the parent component.
Tip: Use the parent selection feature when you want to delete or duplicate an entire large section (for example, delete the entire featured products block instead of deleting each product individually).

 

Preview and save the interface. #

Always preview the interface on both desktop and mobile before saving. A beautiful desktop interface may display incorrectly scaled or be difficult to read on mobile if not thoroughly checked.

  1. Click the eye👁 icon ( ) in the top bar of Page Builder to open the preview mode.
  2. Switch between Desktop and Mobile views to test the interface on both platforms.
  3. Exit preview mode and return to editing if needed.
  4. Click Save to save all changes and apply the theme to your store.
Note: If you exit Page Builder without clicking Save , all changes made during that session will be lost. Always save before closing the tab or switching to another page.

 

Related articles #

On this docs