Mastering GemPages' AI Feature: Image-to-Layout

If you’re looking for a smarter, faster way to build and customize Shopify store pages, then Image-to-Layout - an AI feature included in GemPages, might be the perfect tool for you. With its cutting-edge artificial intelligence technology,  Image-to-Layout can help you turn references into editable layouts in a snap, allowing you to channel your time and efforts into your business. 

The following guide covers what you need to know as you explore the capabilities of “Image-to-Layout”.

What is Image-to-Layout

Image-to-Layout is the first AI feature of GemPages - the top-ranked Shopify page builder. Basically, Image-to-Layout helps users convert a URL or image into editable layouts. 

The feature is still in Beta; however, it has garnered positive feedback from numerous satisfied users. It is a game-changing tool for store owners, freelancers, dropshippers, and anyone who wishes to publish their pages faster and supercharge their growth engine. 

Learn more: The Ecom Bull - Design Shopify Stores 5x Faster With GemPages Image-To-Layout AI

Why Should You Use Image-to-Layout

Here are just a few reasons why Image-to-Layout is a useful tool for expediting your page-building experience: 

Efficient store building: Typically, building and customizing a product page or landing page from the ground up while ensuring its alignment with your brand can span a few days. During peak seasons, this workload can monopolize your time and energy, diverting your attention from more crucial responsibilities. Image-to-Layout swiftly generates customizable layouts, saving hours that would otherwise be spent crafting layouts from scratch.

Suitable for all levels of expertise: Whether you’re a seasoned designer or a store owner with limited design expertise, Image-to-Layout remains beneficial. The feature helps you with one of the initial and trickiest steps in design: layout design. A well-structured layout enriches user engagement and navigation, simplifying information consumption and guiding visitors toward desired actions. Powered by AI, Image-to-Layout empowers you to craft professionally designed and easily navigable pages from references, without grappling with intricate technicalities.

Tailored customization: You have the autonomy to select the specific sections you want our AI feature to create. From there, you can effortlessly customize colors, fonts, and various design elements using our intuitive Editor. This not only ensures a cohesive brand identity but also results in a polished and visually captivating appearance that captures attention.

How to use Image-to-Layout?

How to access Image-to-Layout

Image-to-Layout is accessible via GemPages version 7 and mix version - which means: 

• If you currently have a GemPages version 6 account, you can access GemPages version 7 by filling in this form. We’ll upgrade your account to GemPages version 7. All your existing data will not be lost during the upgrade process. 
• If you’re new to GemPages, just install the app from the Shopify app store

A step-by-step guide to using Image-to-Layout

Once you have a GemPages version 7 account, here are the detailed steps on how to use Image-to-Layout:

1. Access the GemPages app from Shopify

2. Find a reference

Find a layout reference that suits your needs. It can be a URL or image. Helpful guidelines for choosing the right images and URLs are provided later in this article.

3. Open the Editor to access Image-to-Layout

From the Editor, there are two ways to access Image-to-Layout: 

• Hit “Try Beta Now” in the banner placed at the center of the Editor, OR 
• Click on “Create new page” (for GemPages mix version) or “Create landing page from link or image” (for GemPages version 7)

Once you are navigated to the Image-to-Layout window, insert the reference URL or image, then click “Generate” to create editable layouts. 

5. Choose the Desired Generated Layout

In this step, you can choose which sections to generate. The number of generated sections varies based on different pricing plans. Keep in mind that the generated elements will use the GemPages element default setting. 

6. Customize 

Once the layouts are created, you can easily customize the page to fit your business needs using our Editor and an extensive list of elements. As you work on customizing your page, if you ever want to add more sections, simply navigate to the feature. 

7. Publish your page

When you’re done with all the page customization and optimization tasks, it’s time to publish your first page generated by Image-to-Layout!

Our Recommended Inputs for Image-to-Layout

This section will guide you on how to provide the right inputs, which include images and URLs, to generate the most relevant and accurate layouts for your design. 

Image requirements to get the best result with Image-to-Layout

Before uploading any reference to generate editable layouts, ensure your images follow these guidelines. 

Choose the right image type and size

Only .jpeg, .jpg, and .png files are compatible. The file size should not exceed 20 MB and contains the English language only. 

Choose the right background

To achieve optimal results, avoid selecting a reference image with a gradient or multi-colored background. Instead, opt for a flat solid background. This will enhance the accuracy and quality of your generated layouts.

Consider image size 

The image height should be less than 20,000 pixels and the width should be higher than 1,440 pixels to make sure the generated layouts are well-proportioned. 

Pay attention to image orientation

Before uploading your image, make sure it is in the correct orientation. If your image is saved upside-down, use image editing software to rotate it. 

Choose clean images

Be mindful of selecting a clean image that doesn't overlap with any elements like text or box, so you can receive an optimal result. 

Take a screenshot on the Desktop

Upload a screenshot on the Desktop version of your preferred site, instead of the Mobile version. Our Editor will help you ensure your design looks professional on any device. 

When taking screenshots, remember to avoid capturing the browser and only include the site design for optimal results.

URL requirements to get the best result with Image-to-Layout

Before choosing any URL to generate editable layouts, ensure your URLs follow these guidelines:

• English language only
• Make sure the URL is publicly accessible - which means the site should not be blocked by any form of authentication (e.g. password) or only open to a specific location or targeted visitors. 
• The site should not exceed 25 sections

How to Maximize the Potential of Image-to-Layout

Technical requirements aside, we’ve also prepared a few things for you to keep in mind, so you can maximize the potential of Image-to-Layout. 

• Experiment with different approaches: Don't be afraid to try out different design styles. This can help you discover layouts that best suit your needs. 
• Use Image-to-Layout as a starting point: Use Image-to-Layout as a starting point of your creative process. Take the layouts generated and build on them with your own creativity and research.
• Perfect for landing page design: Image-to-Layout shines when it comes to creating captivating landing pages. Its functionalities make the process seamless and efficient.

Learn more: 7 Shopify Landing Page Examples from Top Brands (2023)

Our Roadmap for Image-to-Layout

What’s Happening Now, and The Promise Ahead

Image-to-Layout is our first-ever AI feature and part of our effort to make page building smarter and faster for the Shopify community. Throughout the course of this work, we are aware of some areas where Image-to-Layout has been useful and some that our team is committed to improving over time.

While we continue to enhance its capabilities, here's what we've achieved so far:

• Accurate representation of simple layouts 
• English text content generation from URLs and images
• Detection and generation of 20 out of 63 elements with medium to high accuracy

Of course, there’s a lot ahead for Image-to-Layout. Our team is working hard to:

• Enhance the accuracy of layout and element generation
• Improve the feature’s speed
• Increase the number of supported elements

Currently, in Beta mode, only a special group of users who join our waitlist can access this revolutionary feature. But fear not, we're gearing up for a mass release very soon! Stay in the loop by joining our Facebook community. We'll keep you updated on all the exciting progress we're making and the moment Image-to-Layout becomes available to everyone.

Improving Image-to-Layout Together 

As we roll out Images-to-Layout, we will continue to share updates on our progress. We anticipate this will be an incredible cooperation opportunity - where we need to continue to make it better through ongoing research, testing, and most importantly, your feedback. Together, we can transform Image-to-Layout into a perfect tool for anyone!

FAQs About Image-to-Layout

How do I sign up to use Image-to-Layout?

Image-to-Layout is accessible via GemPages version 7 - which means:

1. If you currently have a GemPages version 6 account, you can access GemPages version 7 by filling in this form. We'll upgrade your account to GemPages version 7. All your existing data will be lost during the upgrade process.
2. If you'r new to GemPages, just install the app from the Shopify app store

How much does it cost to use Image-to-Layout?

Image-to-Layout is a feature of GemPages v7 - which comes with a free plan. The number of sections generated corresponds to your selected pricing plan and will be reset on the 1st of every month.

The options are as follows:
1. Free: 60 sections
2. Build: 120 sections
3. Optimize & Enterprise: Unlimited sections

Can I use Image-to-Layout to create layouts from pages generated by other page builders?

Yes. You can use Image-to-Layout to create layouts from pages generated by page builders other than GemPages. Make sure the URL is publicly accessible - which means the site should not be blocked by any form of authentication (e.g., password) or only open to a specific location or targeted visitors.