How to add LightBox to Shopify without coding [FREE]

Lightbox is a type of popup that encourages visitors to take action such as checking out new products, hot deals, other pages, etc. Most businesses choose to use Shopify LightBox because of its convenience, but creating an attractive LightBox is not easy.

In this blog, we give detailed instructions on How to easily add Shopify LightBox without coding and for FREE. Before going into the details, make sure you have built an eCommerce store on Shopify!

What is Shopify LightBox?

Shopify Lightbox is a specific type of call-to-action button that encourages visitors to take action, such as checking out a new product, viewing more information about a product, or receiving a message from the store.

It brings many opportunities for businesses to reach customers and bring all product-related details to customers.

Benefits of Shopify LightBox

Many e-commerce businesses worry that using LightBox popups on their website will annoy customers and abandon their website. This is not entirely true. Customers will be annoyed when they encounter unorganized popups, too many effects and provide information that is not exactly what they need.

LightBox popups when used properly can be very effective for increasing sales. Let's take a look at some of the outstanding benefits that LightBox brings:

Retain customers to stay on the website longer

Sometimes, you want to include more information for customers to understand more about the product or simply want to pass a certain message to the customer, but you cannot insert all the information on the same page. Are you thinking of creating another page? Yes, you absolutely can, but few customers like being redirected to another page.

A LightBox can completely solve this problem for you. Shopify LightBox is a popup, so customers won't have to worry about being redirected to a spam website. As a result, customers, because they want to see all the information in LightBox, will stay on your website longer.

Increase store conversion rate

One of the effective ways to increase the conversion rate is the Call to Action button. The LightBox button is a type of call-to-action button. You can design LightBox buttons with color, reasonable design, attractive and attract customers' eyes that make them not hesitate to click.

In the LightBox popup, you can completely insert product links, ongoing offers or detailed product information. This stimulates customers to take action and helps you increase the conversion rate for your website. 

Increase your chances of persuading customers to buy your product

Customers tend to see a lot of product information and product reviews before deciding to buy. However, they do not want to be redirected to another page. Therefore, LightBox is the most suitable choice for you. You can display all product descriptions, rates, reviews, sales, etc... in the LightBox popup.

Creating a LightBox popup like this will both help customers enjoy viewing information around the product, and not make them feel uncomfortable because they are redirected to another page. As a result, customers will see the professionalism and prestige of the product and make a purchase decision faster.

How to add LightBox to Shopify FREE

EComposer Landing Page Builder is one of the applications that many businesses appreciate because of its outstanding features. It allows users to create all types of pages such as Home Page, Landing Page, Product Page, and including pages that are not available in Shopify. When you use EComposer, you will have a treasure trove of constantly updated templates, more than 300 sections, and lots of extensions to make your design easier.

LightBox is an amazing element of EComposer, it helps businesses create Shopify LightBox Popup easily without using any coding, just drag & drop. When using EComposer, you will have many options to design LightBox popup such as video, image, page. In addition, EComposer allows you to customize the content to your liking in case you have special content that you want to include in Shopify LightBox.

Follow the steps below to know how to add LightBox to your Shopify store.

Step 1: Sign up your Shopify account 

- If you don't already own a Shopify store, you need to sign up Shopify trial

- Log in to your online store using your registered email and password.

Step 2: Install EComposer 

- In the Shopify App Store, search Landing Page Builder then click Add App

- To activate the use of the app, Install the app to your Shopify store.

Step 3: Open EComposer 

In the Dashboard menu, go to Apps, click EComposer Landing Page Builder.

Step 4: Add Shopify Lightbox 

Click Start Building in the right corner of the dashboard and select a page where you want to place Shopify Lightbox.

Choose any EComposer template you want by clicking Select a template or create your own by clicking Setup page info. Then, select Start Building.

In EComposer's editor, go to Elements, select Basic and look for LightBox.

Step 5: Customize Shopify LightBox

Now use EComposer's live drag and drop to drag the LightBox anywhere you want. Then start customizing Shopify LightBox to your liking.

* Content: 

- General setting: You may change the Lightbox 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 for that, such as from the Page, Image, Video or you can make Custom Content.

- Source: EComposer supports you to insert images, videos, pages, etc. You just need to choose the type of content source and edit it to your liking. 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.

- Custom content popup: you may set the Width and Height for the video or page.

* Design:

- General: allows you to change the Background color, Box Shadow, Border, Border Radius, and Spacing.

- Popup: allows you to edit popup details like color, border, background, etc...

- Button: allows you to set lots of simple elements for the Button setting, as well as Alignment, Typography, Text Shadow, Box Shadow.

- Image: allows you to edit the image that you have added to the popup such as changing or resizing the image.

- Heading: allows you to highlight content with H1, H2, H3, etc... tags; You can also edit the display of heading tags to your liking.

*Advanced

Finally, in the Advanced section, you can customize everything related to visible settings like code, background, animation, ect...

You can click the button to see your LightBox popup. Note, you can edit popup displays like background color, display content, etc...

See the full detailed guide here.

Step 6: Save and publish 

Once you are satisfied with your customization, in the right corner of the edit page you have options to save and publish.

5 Tips to Create an Attractive Shopify LightBox

Not too picky in design

This applies to both the design and the text of your popup. There is little need for detailed features in your lightbox design because it is intended to draw attention. Instead, go for a clean, bold appearance. In terms of size and color contrast, ensure that the content is clearly legible on the website backdrop.

Implement clear, to-the-point language.

Make sure the idea you want to convey is simply understood by using simple terms. Of course, you may always incorporate a modest personal touch that enhances your company identity.

Make your CTA (call-to-action) button stand out.

On most popups, consumers should only need to click one button, which is usually the 'Sign Up' button (or another type of CTA). Make it stand out by choosing a prominent color that contrasts with the backdrop, or by emphasizing it with a border.

Add text that clearly demonstrates the function of the CTA

Users should immediately comprehend what they're clicking. Depending on the circumstances, frequent words include 'Sign Up' or 'Subscribe,' but you may also add a personal touch by using phrases like 'Keep me in the loop' or 'Join the fun.' 

Consider using an eye-catching graphic that is representative of your business. 

Images are excellent for attracting attention, captivating site visitors, and conveying a specific tone. You can locate icons that complement the message you're delivering without blocking or interfering with the text.

Related posts:

• How To Add New Page To Shopify Website
• How to Add Shopify Rich Text Section
• How to Add Custom Liquid Section in Shopify
• How to add Custom HTML section in Shopify 

To Sum up

Creating a LightBox gives businesses more opportunities to reach customers and increase in-store conversions. However, it can also upset customers and give up access to your store if you use it the wrong way.

We hope this blog will give you the best overview of Shopify LightBox and help you create the right LightBox for your store. If you want more information or want to learn more about EComposer, follow us at ecomposer.io or click on the message icon located in the right corner of the screen.