Question 1

Element Fields

Accepted Answer

Design tab

Each Basic Element will contains multiple Fields and the possible fields are listed under the **Design tab. **

This is where you can control the color, font, the size of text, the spacing between elements, how elements are positioned and laid out, what background images or background colors are to be used, different displays for different devices and screen sizes, and much more!

|| These fields usually comes along with Basic Elements settings so please try to understand how to use them well

1. Alignment

Set the horizontal alignment of an element: it can be **left **or **right **aligned or centered. (center alignment is default value)

2. Typography

Font family: apply a font type for your texts
Google font: these fonts are free to use, no copyright issues
Upload font: this allows you to upload a new custom font (or your brand font for example) || Font file formats you can upload: .ttf / .otf / .woff

**Size: **sets the size of texts Font size units
px is not scalable, it is an absolute unit. The value assigned is fixed irrespective of the user's device screen
%, em, rem scale accordingly with screen size, they're

Question 2

Image

Accepted Answer

Image contributes to the visual appeal of the page immensely. Therefore, this element is among the most essential to master controlling. This article will briefly go through the main settings of the element in order to help you navigate it with ease.

${youtube}Image Video

In this section

A. Content B. Design

A. Content:

Choose image: You can either upload your image or choose one from the library to display within the block. Using responsive mode, you may assign different images for each device type (desktop, tablet and mobile).
Image Size: Customize the image size settings. There are 5 image ratios to choose from.
Link: Choose to link the image to None, Media File, or Custom URL.

| If Media File is chosen, you have the option to choose to use the Lightbox or not. | If Custom URL is chosen, you can either input a URL, or more appropriately, select the icon to choose a dynamic URL such as the Post URL.

Use Image Caption: Enter text to be included as a caption under every image.

B. Design:

1. Image

**Alignment: **dictate the alignment (Left, right, center). Different Image alignments can also be customized in responsive mode.
**Width: **Control the width of the image viewport. Different image width can also be customized in responsive mode.
Max Width: Set the maximum width of the image as a percentage. Image max width can also be customized in responsive mode.
**Height: *

Question 3

Tabs

Accepted Answer

Tab is among the most powerful elements on your pages. It enable you to display groups of content that are related and at the same level of hierarchy. On Beae, Tab can display those groups horizontally and vertically. This article will clarify the main settings and section of this element, so you may navigate it with ease.

${youtube}Tabs Tutorial

In this section

A. Content B. Design

A. Content

** Tab Items:** You can add, move or delete items.
** Title**: Enter a title for each tab.
** Icon**: Pick an icon and its position on the tab header (left or right side of the title). Choose from a list of library or upload your icon.
** HTML Tag**: Select the heading tags for tab title (H1, H2, H3, H4, H5, H6).
** Tab ID**: Create an ID for the tab
Show as vertical: Check this option if you want the tabs to be presented vertically.
Alignment: Control the placement of tab headers, there are 4 values to choose from: Left, Center, Right, and Justify.

| Note: You can add an image, text, or other elements to the tab content.

B. Design

1. Tab Header

Alignment: Align the tabs to left, center or right.
Typography: Customize the font styling of the Tab Headers, responsive mode is available for all screen sizes.
Spacing: Set spacing for the tab headers, responsive mode is available for all screen sizes.

| The tabs Normal/Hover/Active allows you to customize the dif

Question 4

Testimonials

Accepted Answer

If you're looking to boost sales and convert skeptical leads into buyers, testimonials are the way to go. You can add and style testimonials easily with Beae editor.

${youtube}Testimonials Tutorial

Content

1. General

Testimonials

Layout: This option allows you to change the testimonial display by three ways: Grid, Slider, Masonry.

Testimonials Items

Avatar: This option allows you to change the testimonial author picture.
Name: Enter the testimonial author’s name.
Title: Enter the testimonial author’s job title.
**Text: ** Enter the text of the testimonial.

Testimonials card

Image Layout: Make position change for your testimonial image layout.
Alignment: Change the alignment of the testimonial card.
Show bubble: Create bubble for your text.
Show rating: Select the rating of the current testimonial item.
Show quote: Select the quote icon.

Slider settings

Infinite Loop: Create switch slide for the section.
Autoplay: Automatically running the slide
Items per row: Choose number of item that display on a row
Spacing: Adjust spacing for items
Layout: Choose kind of layout for your slide
Navi Position: Choose position for your navigation
Pagi Position: Choose position for your pagination
Pagi type: You can use default option or add image into the pagination
Enable custom navigation icon: Allow you to choose icon f

Question 5

Post description

Accepted Answer

This Content element should be used on the Article template. It is used to automatically display the current a Blog post's content from Shopify.

|| You can't edit directly this content in Beae Editor, you must edit through Shopify Dashboard > Online Store > Blog posts.

Content

PREVIEW: Select a specific Blog post to display its content to preview.

Content Type

Text: Only pure texts from the blog content will show up. ** No break line, no alignment, images** are here; because all the HTML tags that come from the blog content are skipped. But you can still style your Article content later by using the Design tab.

The content above is generated automatically from Shopify Dashboard > Online Store > Blog posts > select the post that you are viewing > Edit content. In Shopify, you can use rich text editor to format and style for your blog post content.

HTML: When you choose this option, both texts and HTML tag can show up. As a result, your content looks similar with how it's on the blog live page with table, columns, line-break, i

Question 6

Countdown (Product)

Accepted Answer

Countdown will help you create a sense of urgency or scarcity toward your customer, thus, when placed on a product page, this element will make a sharp spike in conversion rate. This article will introduce you to the main settings of the Countdown element, so you can create a countdown until the end of a campaigns with ease.

In this section

A. Content B. Design

A. Content

1. General

Title: You can input the title of your CountDown here.

Type: Metafields, Custom, Custom and Metafield are the 3 types to choose from.
Metafields type: This type will fetch the timing data from metafields of products from Shopify to display. When you install Beae app, two metafields (Beae Product countdown from and Beae Product countdown to) will be automatically generated for products in Shopify.
If you want to select this type, please select Shopify Admin > Product > All products > Select a certain product that you want to display metafields content > Add countdown on Beae product countdown to and Beae product countdown from field. You can check the image below for more details.

![](https://storage.crisp.chat/user

Frequently Read Articles

Browse All Categories