GemPages Easiest Shopify Page Builder & Funnel App? Honest 2021 Review by EcomExperts.io

GemPages Tutorial

On the dashboard, there is a list of items to the left: subpages, templates, content creation, and help center. For customer support, there is a live chat in the bottom right corner. There’s also an amazing library of video tutorials.

To create your first page, go to the dashboard and click Create New Pages. A new window appears with a list of templates, and by clicking on the first button, you can create your own template. Click on this button, and a new window appears for the subpage name. Give it a name, such as autumn/ winter 2019 sale, click on the Create New button. If your website is password protected, you will need to enter your password so the app can work properly. 

On the page editor, in the box, you can add a new section at the template or drag elements from the left sidebar. If you click on Add a New Template, several premade blocks and templates will appear. Hover over a block and select it. If you want to add elements from this block, click on it on the left block and the settings will appear. 

From the text block you can change the font, color, spacing, height, and alignment, and if you click on the Design button, you can play with the visibility, spacing, background, border, shadow, and opacity.

Go back to the Elements section and in the first section you can choose between the row heavy text blog image icon button separated in a liquid. Drag the separator from the sidebar and drop it where you want. As soon as a separator is dropped, the sidebar settings for this element will appear.

We can change the color, type, dimension, and alignments. In the Design tab, you have visibility, spacing, background, border, shadow, and opacity.

Click on your heading and type something like, “The new collection is here!”

At the top of the page, you can change the device preview to desktop, laptop, tablet, or mobile. You can also export data, upgrade, save preview, and publish the page. 

In the Banners section, you can choose between the parallax and the hero banner. To keep your page speed up to snuff, it’s advisable to go with the hero banner.

In the Stacks section, you can add tabs, carousel, pricing, and an accordion. Drag and drop an infinite number of tabs. There are two tab styles: default and underline. You can change the color, border size, alignment. If you want to customize even more, you can go to the Design tab.

The GemPages app allows you to add icon list hoz and icon lists.

In the Module tab, you can add Google Maps and Instagram elements, so if you have a brick and mortar store, you can add it on Gooogle Maps, so your customers can find you easily. 

In the next section, you can add custom popups. You can choose between a regular popup or a video popup.

If you want to show a video on your page, you can choose between YouTube, Vimeo, and video background. You can also decide if you wish to enable the sound with a toggle button.

In the Product section, you can choose from product, product list, related products, title, description, price, quantity, image, image lists, variants, swatches, card button, view more, and stock counter.

You can create your own product section with custom text, pictures, price, etc. You add the product list, and the list is automatically generated. You can choose a collection you want to show, the number of products per row, the number of products in total, spacing, and heights of this element.

In the Booster section you can choose to add countdown, counter, social share, and MailChimp. In the form field, you can add contact form, email field, text field, area dropdown, checkbox, and submit button. You can basically create your own contact fields or you can use the pre-made one. 

The Collection elements are in the beta testing phase, but from here you can add collection banner, collection title, collection description, tool bar, and the paginator.

Finally, in the Article element, you can use it for your blog pages or if you want to add some article section on your other pages. You can choose from the article list, title, content, image, and date.

Click on the blue button that says Publish. Choose your page title, URL, and handle. Also, you can add a meta-description in the lazy loading and click on Publish Now.

To uninstall and remove this code from your store, go to your store dashboard, and you’re looking for GemPages. Click the Delete icon on the far right, and another window pops up. Click on Remove. Shopify removes GemPage’s access to your store, but the code is still in your store. You need to go inside your code and remove it there as well. 

Go to the store admin dashboard on the left sidebar. Under the sales channel, click on online store. A set menu will appear. On the top of the theme template, there are two buttons: Actions and Customize, so now you will go inside the code, click on Actions, and a dropdown menu appears. Select edit code. Click Layout on the left sidebar. You’re looking for a file called t.gem-layout-non.liquid. Click on the file, and the code is opened. 

On the top right corner are three tabs: Delete, Rename, and Save. Click Delete file, and a pop-up window says: Are you sure you want to delete layouts/themegemlayout-non.liquids. Click delete. 

Go to the Template published pages. HTML contents are always saved inside templates. The name starting with index.gempage.gemarticle.gem. The exact files you need are index.gem-preview.liquidpage.gem with the long code 463 etc.-template.liquidpage.gem with a different code-template.liquid. The fact that it says page.gem refers to the gem pages app builds. You will select the files and delete them one by one as you did with the first file.

Go to the next menu item: Snippets. This is where the app header and footer files are found and your exact files, in this case, are gem-app-footer-scripts.liquid and gem-app-header-scripts.liquid. Select the files and delete them one by one as you did with the other files. Because these are script files, they slow you down more than the previous ones mentioned. 

Finally, go back to the sidebar menu and click on Assets. All the published pages supporting CSS and JavaScript codes are saved inside Assets with the names starting with gem-. Your exact files will be gem-age-then the number-CSS.liquid. These are the style files that make your pages look attractive. You’ll also have gem-page-the number-gs.liquid. These are the JavaScript files that tell your app how to function. Delete these as you did with the other files.

Recommendation

We recommend this app for anyone who wants to test their landing pages. Usually, these types of drag and drop builders do slow down the website relatively significantly, but that’s fine if you want to test your landing page’s design. Once you know that specific landing page converts, let your developer know and they will hard-code the exact same page in real life, significantly speeding up your store. This is the perfect alternative to figure out what works and what doesn’t.

If you’re not convinced, yet, GemPages has a 10-day free trial you can play around with to see if it’s worth the investment. However, you really get a lot of value from this app. If you’re just starting out without a lot of products in your store, the Standard plan is probably best for you. If, on the other hand, you’re wanting to do promotions and launch marketing campaigns, the Pro plan is probably a better fit. The Advanced plan is great for someone working with clients who have several stores.

So if you’re looking for a product that is intuitive with lots of options for customization and requires no coding, GemPages may just be the answer for you.