Tired of
lengthy page building?
Try GemPages to create pages faster and smarter with AI-powered feature.
Back to Blog List
Mastering GemPages' AI Feature: Image-to-Layout
Updated:
5 minutes read
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
Image-to-Layout helps users convert a URL or image into editable layouts
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 and wish to access Theme Section, please feel free to contact our customer support team for assistance with the upgrade process. Some conditions may apply when upgrading.
- If you’re new to GemPages, just install the app from the Shopify app store. Once installed, you'll automatically be using GemPages v7.
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.
Important note: Please make sure you have the right to use the images for your page. GemPages will not be responsible for any copyright disputes between you and the image owner.
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 version 7) or “Create landing page from link or image” (for GemPages mix version)
There are two ways to access Image-to-Layout on GemPages version 7
There are two ways to access Image-to-Layout on GemPages mix version
4. Insert a URL or upload an image, then click “Generate”
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.
Avoid choosing a reference with a gradient background. Choose a flat solid background instead.
Avoid choosing a reference with an image as a background. Choose a flat solid background instead.
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.
The image height should be less than 20,000 pixels
The image width should be higher than 1,440 pixels
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.
Make sure the image is in the correct orientation
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.
Avoid choosing an image overlapping text
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.
Upload a screenshot on the Desktop version of your preferred site
When taking screenshots, remember to avoid capturing the browser and only include the site design for optimal results.
Avoid capturing the browser
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.
A landing page created using GemPages’ Image-to-Layout
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
|
Element |
Level of accuracy |
|
Row |
High |
|
Heading |
High |
|
Text block |
High |
|
Image |
High |
|
Button |
High |
|
Icon list vertical |
Medium |
|
Icon list horizontal |
Medium |
|
Product |
Medium |
|
Product list |
Medium |
|
(P) Title |
Medium |
|
(P) Description |
Medium |
|
(P) Price |
Medium |
|
(P) Quantity |
Medium |
|
(P) Image & Gallery |
Medium |
|
(P) Variants |
Medium |
|
(P) Swatches |
Medium |
|
(P) Cart button |
Medium |
|
Hero banner |
Medium |
|
Countdown timer |
Medium |
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 and wish to access Theme Section, please feel free to contact our customer support team for assistance with the upgrade process. Some conditions may apply when upgrading. 2. If you're 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 sections2. Build: 120 sections3. 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.
