Page Builder Built-In Widgets

• Name — The widget name is only used internally and doesn't appear on the storefront. It is used in the Layers nav to help you identify how widgets are arranged on the page.
• Columns — A layout widget can be segmented from 1 to 6 columns.
• Column layout allows you to size each column relative to adjacent columns.
• Margin — Margin is the amount of space (in pixels) outside the layout's border.
• Padding — Padding is the space (in pixels) inside the layout's border.

• Background — Specify a solid color or image background for the entire layout.
• Image Fit — Fill will resize the image to "fill" the entire layout area. Fit will resize the image so that the entire image "fits" within the layout without being cut off.
• Image opacity — Adjust the opacity of your background image. This can create a "translucent" effect.
• Image alignment — Specify how the background image should horizontally and vertically align within the layout.

• Border style — Select between a solid, dashed, or dotted line border.
• Border color — Select a border color.
• Border thickness — Set the border thickness in pixels.

 Text Widget

Text style — If set to Custom, you can specify a custom font family, weight, size, and text color of the text for this individual widget. If set to Theme Default, the text will use the default global theme style for the body text.

• Alignment — Set the horizontal alignment for the text block.
• Margin — Margin is the amount of space (in pixels) on the outside edge of the text block.
• Padding — Padding is the amount of space (in pixels) on the inside edge of the text block.

Image Widget

• Image height — If set to Auto, the widget will size automatically to fit the full size of the image file. If set to Custom, you can specify the image's maximum height in pixels.
• The image fit — Fill to box will resize the image to "fill" the entire area of the widget. Fit to box will resize the image so that the entire image "fits" within the widget without being cut off.
• Image parallax keeps the image position static as a user scrolls up and down the page, creating a "layered" effect. Image fit must be set to Fill to box to enable Image parallax.
• Image opacity — Adjust the opacity of your image. This can create a "translucent" effect.
• Image alignment — Specify how the image should align horizontally and vertically within the widget.
• Margin — Margin is the amount of space (in pixels) outside the image's border.
• Padding — Padding is the amount of space (in pixels) inside the image's border.

• Normal/Hover — The image's border always shows if normal is selected. If Hover is selected, the border only shows when visitors hover their mouse over it. This can be used as a visual cue to shoppers that the image is a link / is "clickable."
• Border color — Specify the image's border color.
• Border style — Select None, Solid, Dotted, Dashed, Double, Groove, or Ridge.
• Border thickness — Specify the image's border thickness

  ---

  Hero Banner Widget

• Banner link — Enter the URL (like a product, category, or brand page) to which this banner should be linked when clicked.
• Content alignment — Set the title, description, and button alignment.
• The image fit — Fill to box will resize the image to "fill" the entire banner area. Fit to box will resize the image so that the entire image "fits" within the banner without being cut off.
• Image parallax keeps the background image position static as a user scrolls up and down the page, creating a "layered" effect.
• Image alignment — Specify how the background image should align horizontally and vertically within the banner.
• Image opacity — Adjust the opacity of the background image. This can create a "translucent" effect.

• Title — Set the visibility of the banner's title.
• Title style — If set to Custom, specify a custom font family, weight, and size of the banner's title. If set to Theme Default, the title will use the default global theme style.
• Description — Set the visibility of the banner's description.
• Description style — If set to Custom, specify a custom font family, weight, and size of the banner's description. If set to Theme Default, the description will use the default global theme style.
• Text color — Specify the color of both the title and description text.
• Text color (mobile) — Specify the color of the title and description text on mobile devices.

• Button — Set the visibility of the banner's button.
• Button font — If set to Custom, specify a Custom font family for the banner's button. If set to Theme Default, the button will use the default global theme style.
• Button style — Select Round, Square, or Pill.
• Button color — Specify the button color.
• Button color (mobile) — Specify the button color on mobile devices.
• Button text color — Specify the button text color.
• Button text color (mobile) — Specify the button text color on mobile devices.

  ---

  Carousel Widget

• Click the plus button + to add a new carousel slide.
• Click the menu button ⋯ to delete or duplicate a slide.
• Click and drag the handle ⋮⋮ next to each slide to change its order.

• Title — Enter the text for the top line of text for this slide.
• Description — Enter the text for the middle line of text for this slide.
• Button label & link — Enter the label text and URL for the bottom text link for this slide.

• Image URL — Upload a new image, use an already uploaded image, or specify an image URL for this slide.
• Height (px) — Specify the height of this slide image in pixels.
• The image fit — Fill Container will resize the image to "fill" the entire slide area. Fit Container will resize the image so that the entire image "fits" within the slide area without being cut off.
• Image alignment — Specify how the image should align horizontally and vertically within the slide.
• Margin — Margin is the amount of space (in pixels) outside the image's border.
• Padding — Padding the amount of space (in pixels) inside the image's border.

• Content alignment — Specify how the title, description, and button label should align horizontally and vertically within the slide.
• Font family (Custom) — Specify the font face for the title and description.
• Font weight (Custom) — Specify the title, description, and button label text thickness.
• Title size (Custom) — Specify the size of the full title text.
• Description Size (Custom) — Specify the size of the middle description text.
• Text color — Specify the size of the bottom button label text.

• Button style — Choose between a simple text link style or a button.
• Font size — Specify the size of the button label text.
• Text color — Specify the button label text color.

• Video URL — Enter the URL of a YouTube or Vimeo video.
• Autoplay video — Set whether this video should automatically start upon visiting the page. Must add video URL first
• Loop video — Set whether this video should start from the beginning once it reaches the end. Must add video URL first
• Display video controls — Set whether video controls (like the play button and volume control) should surface to the user. Must add video URL first

  ---

  Product Widget

• Content alignment — Specify how product details such as name and price should align horizontally within the widget.
• Image fit — Scale to fill box will resize the image to "fill" the entire area of the widget. Scale to fit box will resize the image so that the entire image "fits" within the widget area without being cut off.

• Text — If the Theme default is selected, this element will use the theme's default style for this element. If Custom is selected, you can customize style aspects for this element.
• Text color — Specify the color of this element.

• Text — If the Theme default is selected, this element will use the theme's default style for this element. If Custom is selected, you can customize style aspects for this element.
• Text color — Specify the color of this element.

• Text — If the Theme default is selected, this element will use the theme's default style for this element. If Custom is selected, you can customize style aspects for this element.
• Text color — Specify the color of this element.

• Star color (filled) — Specify the color of filled stars. (Note that all stars will be empty if a product has no ratings. In that case, changing this color will not reflect in the preview pane).
• Star color (empty) — Specify the color of empty stars.
• Reviews text color — Specify the color of the review count text in parenthesis next to the star rating.

  ---

  Product Set Widget

• Content alignment — Specify how product details such as name and price should align horizontally under each product in the set.
• Products per slide — Specify how many products are shown at one time. If you have more products than are shown per slide, shoppers can use arrows to scroll left and right through products.

• Text — If the Theme default is selected, this element will use the theme's default style for this element. If Custom is selected, you can customize style aspects for this element.
• Text color — Specify the color of this element.

• Text — If the Theme default is selected, this element will use the theme's default style for this element. If Custom is selected, you can customize style aspects for this element.
• Text color — Specify the color of this element.

• Text — If the Theme default is selected, this element will use the theme's default style for this element. If Custom is selected, you can customize style aspects for this element.
• Text color — Specify the color of this element.

• Star color (filled) — Specify the color of filled stars. (Note that all stars will be empty if a product has no ratings. In that case, changing this color will not reflect in the preview pane).
• Star color (empty) — Specify the color of empty stars.
• Reviews text color — Specify the color of the review count text in parenthesis next to the star rating.

• Button shape — Specify the button shape (Round, Square, or Pill).
• Button color — Specify the button color.
• Button text color — Specify the button text color.
• Button actions — Specify the behavior when a shopper clicks or taps this button (Add to Cart, Add to Wishlist, or Go to Product Page).

Button Widget

• Button label — Enter the label text for the button.
• Button link — Enter the URL the button should link to.

• Font family — If Theme Default is selected, the button will use the theme's default style for button text. You can also optionally specify a font for this individual button.
• Font weight — Specify the title, description, and button label text thickness.
• Font size — Specify the size of the button label text.
• Text decoration — Specify if the button label text should be underlined.

• Toggle button appearance — If unchecked, this will remove the button and show only the button label text.

• Border — Specify the button border thickness.
• Border radius — Specify the button border "roundness."
• Button alignment — Specify how the button should align horizontally on the page.
• Margin — Margin is the amount of space (in pixels) outside the button's border.
• Padding — Padding the space (in pixels) inside the button's border.
• Background color — Specify the button background color.
• Text color — Specify the button label text color.
• Border color — Specify the button border color.
• Background color (Hover) — Specify the button background hover color.
• Text color (Hover) — Specify the button label text hover color.
• Border color (Hover) — Specify the button border hover color.

HTML Widget

• Expand HTML Editor — This makes the editor full-screen.
• Save HTML — Saves the current code and updates the preview pane.

Spacer Widget

• Line color — Specify the divider color.
• Line style — Specify a solid, dashed, or dotted line style.
• Line width — Specify the line width.
• Line thickness — Specify the line thickness.
• Box height is the divider line's combined top and bottom margin.
• Alignment — Specify how the divider should align horizontally and vertically on the page.