Tired of
lengthy page building?
Try GemPages to create pages faster and smarter with AI-powered feature.
Back to Blog List
Click on “Create new page”
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 now in stable release and has garnered positive feedback from numerous satisfied users since the beta version. 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 GemPages' 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 GemPages Dashboard to access Image-to-Layout
- Click on “Create new page” (for GemPages version 7)
- Hit “Start from scratch” to create a new page from scratch with GemPages
Click on “Create new page”
Create a new page by starting from scratch
4. Generate a page using a URL or image
Click Start with Generating from URL or image or navigate to AI Image to Layout in the sidebar menu
Generate a new page from an URL or image with GemPages
- If you have already created a page but want to utilize the Image to Layout feature to add sections or elements from a reference URL or image, you can access the feature by clicking on the AI button on the left sidebar of your Editor.
- Once you are navigated to the Image-to-Layout window, insert the reference URL or image, then click “Generate” to create editable layouts.
Insert a URL or an image, then click “Generate”
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 for 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 (reached 88% accuracy rate, tested on 1000 images)
- English text content generation from URLs and images
- Detection and generation of 20 out of 63 elements with medium to high accuracy
- Based on feedback from our customers, using GemPages’ AI Image-to-Layout has enabled them to complete 60-70% of the work needed to create a page
|
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 |
Store owners can now make the most out of this GemPages AI feature as the GemPages team has:
- Enhance the accuracy of layout and element generation
- Improve the feature’s speed
- Increase the number of supported elements
Improving Page Layout Generation Speed Together
GemPages' Image-to-Layout function offers an exciting new way for users to enhance their page designing process. By converting images or URLs into customizable layouts with high accuracy and efficiency, this GemPages AI feature significantly reduces the time and effort needed to create visually appealing pages. Explore this innovative feature by GemPages and discover how it can elevate your pages’ aesthetics and functionality. For more information and further assistance, our Help Center guidelines and Customer Support live chat are available to help you make the most of this powerful new function.
FAQs About Image-to-Layout
How do I sign up to use Image-to-Layout?
Image-to-Layout (I2L) is accessible via GemPages version 7 - which means:1. If you currently have a GemPages version 6 account and wish to access I2L, 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 uploads2. Build: 300 uploads3. Optimize & Enterprise: Unlimited uploads
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.
