New to Easify Box Builder?
This glossary will help you quickly understand all the key terms you’ll encounter in the Visual Editor and while building your custom box page. Whether you’re a first-timer or just need a refresher, this guide has you covered.
🧩 Core Features #
Visual Editor #
Your main workspace where you design and customize your Build-a-Box page.
Unlike other Shopify box builder apps that only let you adjust the design, the Easify Visual Editor gives you full control—from creating steps, adding products, configuring discounts, to designing the entire layout—all in one place.
That’s why it’s currently the most powerful Visual Editor available for building custom box experiences.
Template #
A pre-designed layout to kickstart your box page.
Each box type comes with matching templates, making setup quicker and easier.
Templates are fully customizable, and more beautiful and conversion-ready templates are coming soon.
Step Bar #
A visual navigation bar that shows the step-by-step journey (e.g., Select Box → Add Items → Write Message).
This is a signature feature of the box builder experience—it keeps your customers guided and engaged.
If your box only has 1 step only, the step bar will automatically be hidden.
Quick Summary #
A compact box summary showing selected items and pricing, visible while customers build their box.
It can appear either:
- At the bottom of the page (footer summary), or
- On the sidebar (sidebar summary).
Box Review Page #
An optional final page where customers review their selections before checking out.
If this is enabled, customers will go through the review step before checkout.
If disabled, customers can simply click on the Quick Summary and head straight to checkout from the box page.
Quick View #
A product preview popup (with images, variants, and descriptions) that appears without leaving the box page.
This keeps the customer focused and prevents interruption in their buying journey.
🧱 Page Structure & Design Basics #
Section #
It organizes content into blocks, each of which can include multiple elements.
For example, a Hero Banner section might include an image, heading, and text.
Element #
Individual content pieces you can add into the page—such as headings, buttons, text blocks, images, product lists, etc.
Layout #
Controls how sections and elements are arranged throughout your page.
Page Width #
Sets the maximum width of your content—affecting how wide the layout appears on different screen sizes.
🎨 Styling & Spacing #
Padding #
The space inside an element, between its content and the edge.
Margin #
The space outside an element, separating it from other elements around it.
Alignment #
Controls how content is positioned within its space (left, center, or right).
Typography #
Settings for font family, size, weight, line height, letter spacing, and more.
Border #
Defines the outline around an element, including thickness and color.
Border Radius #
Rounds the corners of an element—adds a softer, more modern look.
Shadow #
Creates depth by applying a shadow effect behind elements.
⚙️ Other Tools & Advanced Settings #
Custom Code #
Add your own HTML, CSS, or JavaScript for deeper customization and advanced styling.
View Mode #
Preview your page in different screen sizes:
- Fullscreen
- Desktop
- Tablet
- Mobile
This helps ensure your design looks great on every device.
