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

The Image is the one of element from the Basic elements and plays an important role in your sales page. It is used to display the single image. Let's go through all the settings you can control for this element.

${youtube}Image Video

1. Content:

Choose image: You can upload your image or use image from library. You can set different image for each device (desktop, tablet and mobile).
Image Size: The image size setting, to control the size of the images. There are 5 types of the size for you select them.
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.

2. Design:

Image

**Alignment: **Align the image to the left, center, or right. Its allowed set different position for each device.
**Width: **Set the width of the image. It allows to set different width for each device.
Max Width: Set the maximum width of the image as a percentage. It allows to set different max-width for each device.
**Height: **Set the height of image. It allows to set different height for each device.

|| You can use different below styles between normal and hover state.

**Opacity: **Control the opacity of the image.
**CSS

Question 3

Tabs

Accepted Answer

The Tabs Widget allows you to divide your content into tabs, either horizontally or vertically.

${youtube}Tabs Tutorial

Content

** Tab Items:** You can add, move or delete items.
** Title**: Enter a title for each tab.
** Icon**: Select icon and position for tabs. 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: Choose Horizontal or Vertical tabs. || Note: | You can add an image, text, or other elements to the tab content.

Design

Tab Header

Alignment: Align the tabs to left, center or right.
Typography: Customize several option for you to make
Text Color Choose color for your text
Background: Choose a background color for the tabs.
Border: Choose border style for tabs.
Border Radius: Add border radius for tabs. You can set different values for each device.
Spacing: Set spacing for the tabs.

Tab Content

Background: Choose a background color for the tabs content.
Box Shadow: Set the shadow for the content
Border: Choose a color for the border.
Border Radius: Set the border radius to control the corner.
Spacing: Set the space content.

Please visit the Element fields learn more about the fields which used in the Design tab.

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

Article Content

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

Accepted Answer

When running a business, merchants always research and find out as many methods as possible to sell their products. They might use a sense of urgency to make shoppers come to a quicker decision on an order they are considering. Using countdown timers will take effect then.

Countdown timers help to limit the period of time that shoppers can make a purchase. This could be a countdown until the end of a sales off season, or for a specific offer such as free shipping.

Under the SUNGLE PRODUCT tab, you can drag the Countdown element to your page to use. It should be used on a product page.

Content

1. General

Title: Here you can enter some text as a title for your countdown.

Type: There are three types for you. Metafields, Custom, Custom and Metafield.
Metafields type: This type will take the date time from metafield of product from Shopify to show. When you installing Beae app, two metafields (Beae Product countdown from and Beae Product countdown to) are automatically generated for products in Shopify. If you choose this type, you must to go to Shopify Admin > Product > All products > Select a certain product that you want to display me

Frequently Read Articles

Browse All Categories