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.
Create
- GemPages home page: choose from many fantastic and useful templates.
- GemPages landing page: boost your conversions with beautiful landing pages.
- GemPages Shopify product page: easily create a GemPages product page template and apply it to all of your products or just a specific product.
- GemPages collection pages: promote and showcase your products.
- Pricing page: Make a well-designed pricing page to increase conversions.
- FAQ page: create a helpful guide for customers about your products.
- Contact page: build your customer list.
- Thank you page: boost revenue by collecting customers’ birthdays, conducting surveys, doing a GemPages upsell at checkout, etc.
- About Us page: allow your customers to get to know you and your brand.