LightBox

Lightbox is a fundamental element that allows you to send an informational letter to a customer who is interested in your product. After all, we’ll simply introduce that function as well as many other fun features. Let’s work on it with EComposer App

1. Adding Lightbox

2. Configure Lightbox

2.1. Content

• General setting: You may change the representation by a Button (Set a Button label after choosing it) or an Image (Select an image after choosing it).
• Icon: If you want your customer clearly understand the direction that you want to show, let’s select an icon that you think it’s matching with your thinking.
• Icon position: You can put it on the left or right side. That’s up to where you want it to be. Also, you can set the Icon spacing after choosing the position for the icon.
• Content source: Allow you to choose the source to demonstrate the information, here’s a list of options:
  • Page: Select pages from the Online store to show the content.
  • Video: Show video from Youtube, Vimeo or an External source.
  • Image: Show an image as the content.
  • Video metafields/Image metafields: Uses the File type metafield to display the content.
  • Custom(Default): Set the content directly in the element, usually in form of text only.
• Source: For instance, when you choose Youtube to be the source for what you want to represent so please add the link to that Youtube video at this stage.
• The last one without saying is the Custom content popup, you may set the Width and Height for the video or page.

Note: When choosing Page as the Content source, the content will only be shown when you added the content to the page in Shopify. It will not work if you build the page content in EComposer or any third-party app.

2.2. Design

• Box: This element allows you to change the Background color, Box Shadow, Border, Border Radius, and Spacing for the video box.
• Pop up: Allow you to change the Typography, Background color, Box Shadow, Border, Border Radius, and Spacing for the Pop up.
• Button: You may set lots of simple elements for the Button setting, as well as Alignment, Typography, Text Shadow, Box Shadow, and by the way you can set it with a Normal function or maybe Hover.
• Icon: This section let you set the Background color, Box Shadow, Border, Border Radius, and also if you choose Hover so have a few more features inside that will be shown to set as Hover Animation and Transition Duration.
• Image: Allow you to change Width, Max width, Height, Image fit and other settings like Opacity, CSS Filter, Box shadow, Border and Border radius.
• Heading: Have the same design options as the button.