BEAE'S GUIDE TO USE TEMPLATE TO BUILD A PAGE IN 15 MINUTES

No coding skills? No problem. Create beautiful pages in 15 minutes with Beae’s templates.

Pre-Built Templates are a great feature so you don’t have to start building your website from scratch. Any problem with creativity or lack of ideas will no longer cause you trouble. With just one click and selection, you can quickly get a professionally designed template for your website. Beae offers more than +204 available templates with many different styles and is constantly updated for you to constantly diversify your store.

Discover the steps to build a website in just 15 minutes with Beae.

Step 1: Choose Beae’s Template

After selecting the type of page you want to build, Rename the page -> Choose Template.

Step 2: Customize images and content for your store according to the available Template.

Click on the Template of your choice -> Edit -> Customize the Image and content section to suit your page.

Customizing Photos and content will usually have 2 parts: Content and Style.

1. Customize Image Background

The Background section will be the first image that appears on your page, so this image plays a very important role. You need to choose impressive and quality images. Besides, Beae will also support customizing the Background for you to get the best image for your customers.

Click on Top Background Image -> Customize Layout and Style.

Layout

Content Width: Allows you to customize the width of the background.You can setting different width for each device.
Content Height: Allows you to customize the height of the background. You can setting different widths for each device.
Column Gap: Allow you to adjust the gap between the Background column.
Horizontal align: This allows you to change the horizontal of the background. To the Left, Right, or Center.
Stretch Section: Allows you to Enable/Disable the stretch section of the background
Overflow Hidden: Allows you to Enable/Disable stretch of the background.

Style

Background Style: Allows you to change the background, customize the Position, Attachment, Repeat, Size.
CSS Filters: Allows you to adjust the image style by changing the CSS Filter scale for the Blur, Brightness, Contrast, Saturation, and Hue settings.
Background Overley: Allows you to change the background style and customize CSS Filters.
Shape divider: You can choose the Top or Bottom position and customize the type for the divider.
Border: Allow you to change the border of the Background with these styles: Default, None, Solid, Double, Dotted, Dashed, Groove. Responsive mode is available for all devices.
Typography: Allows you to customize several options like Font Family, Text Size, Weight, Transform, Style, Decoration, Line Height, and Letter Spacing. for the text. Responsive mode is available for all devices.

2. Normal image optimization

To make your store stand out, images of products and marketing programs can appear in many places on the page. Each template has a way to arrange the images to optimize the page. You just need to replace the images available in the Beae template with your own, and you can have a complete page.

Click on the image you want to edit on the page -> Customize Content and Style

Content

Choose Image: Allows you to change any image, and you can change the name of the image in the Edit alt text section. Responsive mode is available for all devices.
Image size: Allows you to adjust the size of the image, you can choose from these options: Original, 400x300px, 800x450px, 500x500px, Custom.
Link: Allows you to fill in the share link of a custom social site you want to upload
Use Image Caption: Allows you to Enable/Disable the caption of the image.
Presets: Selection of free images provided by Beae.

Style

Alignment: Allows you to change the position of the image. To the Left, Right, or Center.
Image Fit: Customize how the image is specified, you can resize to fit the container. Responsive mode is available for all devices.
Opacity: Allows you to adjust the clarity of the image.
CSS Filter: Allows you to adjust the image style by changing the CSS Filter scale for the Blur, Brightness, Contrast, Saturation, and Hue settings.
Box Shadow: Box Shadow: Allows you to edit Color, Horizontal, Vertical, Blur, and Spread. In addition, you can choose Outline or Inset in Position. Responsive mode is available for all devices.
Border: Allows you to change the border of the Image with these styles: Default, None, Solid, Double, Dotted, Dashed, Groove.
Border Radius: Border Radius: This option allows you to change the Image border radius. Responsive mode is available for all devices.

3. Customize Content

Good content is one of the important factors that make your website different from other websites. The success of a page is determined primarily by its content. If you want your website to be successful, have lots of traffic and regular sales, you need to do content development. Product descriptions, customer reviews, and store information should be clearly displayed and highlight important content. Beae will assist you in building a logical and outstanding content series.

Click on the content you want to edit on the page -> Customize Content and Style

Content

Regular text editing toolbar: Allows you to customize “Bold”, “Italic”, “Underline”, “Strikethrough”, “Color”, “Background”, “Ordered list”, “Unordered list”, “Insert link”, “Insert image”, “ Insert video” or “Clear Format” for your content.
Presets: Selection of free images provided by Beae.

Style

Alignment: Allows you to change the alignment of the Heading. Left, Right, Center. Responsive mode is available for all devices.
Text Color: Allows you to change the text color of the content.
Typography: Allows you to customize several options like Font Family, Text Size, Weight, Transform, Style, Decoration, Line Height, and Letter Spacing. for the content. Responsive mode is available for all devices.
Text Shadow: Allows you to control text-shadow settings which enable you to pick Color, create Blureffect, and set Horizontal and Vertical positions in conjunction with your content.

Step 3: Add Elements to optimize the page.

With just 2 simple steps as above, you can build yourself a basic website with Beae’s diverse templates. However, if you want your website to be professional and attract more customers as well as have promotions, the use of additional elements is necessary. Beae currently has 60+ elements that can assist you. Elements about “Countdown”, “Counter”, “Video”, and “Testimonials”… will definitely help your website stand out from any other competitors.

Detailed instructions on Beae Elements: Docs.

To use Beae Elements: Click Elements -> Select the Elements you want to add to the page.

Drag and drop the Element to the desired position -> Edit it with 2 tools:

Element toolbar: Select the elements you want to appear on your page.

Element inspector: Edit the settings and stylings of the element with 2 tabs: Layout and Style.

Step 4: Preview or publish the page

After completing the website building steps -> Click Preview to review your entire design

If you want to save the page -> Click on the icon next to “Publish”, Select “Save as Draft“, “Save to library” or “Export as file“

Completely complete in page -> Click Publish

Above are 4 steps to help you have a complete page to start a business on Shopify. Don’t forget that we are always available 24/7, if you have any problems, please Contact us.

Website: https://beae.com
Fanpage: https://www.facebook.com/beaecom