Skip to content
Adobe XD to Shopify
Over the past few years, eCommerce websites have evolved dramatically and so have the ways in which designers can create user-centric designs and experiences that can really increase conversions, sales, and revenue. In the same way, your Shopify stores can be drastically improved if you are able to develop a design that uplifts the user experience.
We know how important it is for eCommerce sites to create the proper user experience with design. It’s basically your way of creating the best first impression that makes your website visitor want to explore your store and purchase products. With technology and ecommerce evolving every now and then, you need to keep up with industry best practices.
But first of all, you need to start with the basics and these are the main pages of your Shopify store that you will want to pay extra attention to. These are the key pages in which you need to constantly apply new UX practices as they evolve.
The key pages of any Shopify site are:
One way to keep up with the times is by designing your pages or your website via Adobe XD, a software that can be used to design for both web and mobile, and offers a streamlined workspace to design your experience whilst including simple interactivity that can then be sent to a developer or presented to a client.
Built from the ground up with performance top of mind, Adobe XD helps you craft prototypes that look and feel like the real thing, so you can communicate your design vision and maintain alignment across your team efficiently.
Adobe XD is a powerful and easy-to-use vector-based experience design platform that gives teams the tools they need to craft the world’s best experiences collaboratively. Available on Mac and Windows systems, XD meets teams where they’re working with cross-platform compatibility.
If you are using Adobe XD to design your website or want some quick tips on using Adobe XD, keep reading. But if you would like an agency to design your store on Adobe XD and eventually import that design onto Shopify, look no further than Webinopoly.
TIPS IN CREATING A SHOPIFY DESIGN PROTOTYPE ON ADOBE XD
1. Know your target audience
Of course as an entrepreneur, you should already know this. By knowing your target consumer, you will be able to know what kind of web experience would be best for them. You or your designer will have to create a design that’s based on user research, wireframe and revise accordingly.
2. Picking a Screen Size
When you start a new project, Adobe XD asks you to pick a screen size. The default for web is Web 1920 (1920 X 1080 px) but you can choose other options (Web 1280 or Web 1366) or create a custom size.
If you’re okay with your size, you will be welcomed to the XD workspace which is a design view by default, and you will see a white canvas or the artboard in the size of your choice.
3. Make Duplicates of Your Artboard
Since you’ll be creating a whole website, it would be best to create the designs on the same size canvas.
So if you are working on 4 pages, you would need to create 3 more artboards. To create more, choose the artboard function from the left pane and click anywhere next to the first one. Or, you can click the first artboard to select it then choose Edit > Duplicate.
Don’t forget to rename each artboard according to its designated page. Do this by double tapping the default titles (seen at the top-left of every artboard).
4. Place images and text
Most Shopify websites need to be visual especially because we need to show our potential customers what they are buying or what they can purchase from us.
To make your artboard know that it is the home page, select the whole artboard and click the gray tag that is seen on the top-left side. It will turn blue to show that it is the landing or starting page.
If you already have images you want to use, add it by selecting File > Import and then locate the image from your disk to import it to your canvas. Press and hold to adjust the size, and drag it around to the right position.
To add text to your page, select the Text tool from the left pane and click anywhere on the artboard to start writing. With Adobe XD, you can customize your text with its standard formatting choices like the font, style, color and size.
Adobe XD offers many standard formatting choices for your text. You can select any block of text and change its font, style, color, size and other attributes. The screenshot below shows the formatting for the navigation text on the home page.
You can use these tips to create your page titles, images and bodies of text for each of your pages.
Use what you have learned in this section to add the page titles for the remaining four pages and place the images and body text for the Cart and About pages.
5. Add a symbol that serves as your navigation icon
This is really about creating that intuitive user experience for your customers. Look for a navigation icon you like, usually it’s the hamburger icon ≡ like this. Most websites place it on the top-left corner or on the about page so users can easily navigate to any other page. Some websites also make use of the company logo to allow users to get back to the homepage.
To make the icon or your logo a symbol, right click on it and select Make Symbol. All icons you make into a symbol can be accessed on the Assets icon on the left page. You can easily drag and drop symbols to your artboards from there so you won't have to copy paste all the time.
6. Create Links
Switch to Prototype mode from the bar on the top. Zoom into your first art board (Home) and select the text that you want to turn into a link. A blue arrow will appear next to it. Press down on it and drag it out. A blue wire will follow obediently wherever your cursor goes..
Drag it to the art board you want the link to go to and leave it there. Congratulations! You’ve now created a link between the two pages. If you want transitions, make sure that the Transition tab is selected so you can choose the type of transition and ease using the pop-up that appears as soon as you drop the wire.
Use the same steps to link other pages.
7. Create navigation with a drop-down menu
Of course, no website is complete without a dropdown menu. To start, create a new artboard called Nav but modify its dimensions to your requirements. You can adjust the width and height accordingly.
Using the Text and, optionally, Line tools in the left pane, design your drop-down menu. This menu will appear when your customer clicks on the hamburger icon.
Going back to Prototype mode, drag a wire from the hamburger menu to the Nav art board. In the box that appears, switch to the Overlay tab. A green box will appear that shows where the overlay will appear. Drag to move it around until it’s under your hamburger menu. Choose None as your transition setting (or experiment with the other options).
Now click the Play icon in the top right window. Your home page will appear in a preview window. Click the About button to go to the About page. Now, click on the hamburger icon. It will bring out your drop-down menu. Click on it again and it will disappear.
You can link the items/page titles in the drop-down to their respective pages using the same method as in Step 6. This will turn it into a working navigation for all the pages in your prototype.
8. Use the repeat grid for your product pages
If you have multiple products or even just a few, it will be best to use the XD feature, Repeat Grid especially if your design involves repeating elements or content lists. This feature makes things so much easier and the changes update automatically across the entire grid.
Use the Rectangle tool from the left pane to draw a rectangle and then use the Fill tool from the right pane to color it a light gray to indicate this is an image placeholder.
Then select the rectangle and click on Repeat Grid in the right pane (or Object > Repeat Grid). A green outline and green sliders will appear around your selection, allowing you to extend your content list in any direction (both vertical and horizontal in our case). Click and drag long enough to make the number of rows and columns you need.
Select your repeat grid and then hover on the white spaces between your rectangles. When they turn pink, you can drag up and down to change the padding between cells.
To populate your grid with product images, drag your product photos from a single folder onto your grid in XD. It will be filled up automatically. Easy right?
9. Share with your team!
One of the best features of Adobe XD is that it allows you to quickly and easily share anything you’re working on with collaborators and other stakeholders.
So if you are working on an app or website for a client, you can share a link to your design project with them by selecting File > Share > Publish Prototype. Or, you can publish Design Specs, to let anyone else view the formatting and all other settings for your prototype.
They will also be able to download any assets like images that you mark for export. To mark items, go to View > Layers. Then right click on any item from the list and select Mark for Batch Export.
Now you know some of the easiest and best tips in creating a design prototype for your Shopify store! Share the prototype with your clients or other stakeholders for easier collaboration.
Your next steps will be importing that design onto Shopify.
HOW TO EXPORT ADOBE XD TO SHOPIFY
For now there are no direct ways to easily export your prototype from Adobe XD. Your options are to use some plugins or Shopify apps. Or, contact a Shopify Expert.
What is a Shopify Expert?
Shopify experts are professionals who live and breathe Shopify. Webinopoly’s Shopify Experts can help you set up your domain, design your website, create, run marketing campaigns, and help you build a good strategy. Because they have years of experience, they are able to provide you the insight and expertise that you will need to grow your brand.
Here at Webinopoly, our highly-skilled team has worked with over 200 clients from startups to big brands, helping them dominate the market with a powerful website. Whether big or small, we work within your budget, and always deliver what we promise.
See what 200+ clients have to say about us.
WHY WORK WITH OUR SHOPIFY EXPERTS?
Webinopoly is an Award-Winning Digital Agency
We house trusted and top-notch Shopify experts who can help entrepreneurs like you build your online business. Our services range from building your Shopify store to theme customization, website development, migration to Shopify, SEO, and marketing.
Fully Optimized
Our Shopify Developers ensure that your website is optimized for search engines, runs at fast speeds and gets you conversions. We aren’t just here to design your website, we’re here to help you succeed.
Responsive and Tested
All websites created by our Shopify Developers and Designers work flawlessly across multiple devices from mobiles to tablets so that it performs consistently and results in higher engagement rates, a wider reach and good conversions. We run multiple tests to ensure that the websites are up to standard and perform just as well.
Expert coding
Our Shopify designers and developers have worked in eCommerce for years collecting insights and developing techniques that have allowed them to create exceptional and rock solid code. All codes are tried and tested and go through strict approval to ensure quality.
High Conversions
We care about our client’s growth. Over the years, we’ve managed to help them get the conversions they need thanks to our skilled team of Shopify Experts. We don’t only work to grow our own business, we want to help yours too. Our goal is to help you increase your sales and conversions by providing you with top-notch service.
LET’S TALK!
If you’re ready to start, you may call us at 713-805-5888, email us at [email protected], or leave us a message here.
Learn more about Webinopoly
If you’d like to learn more about what we can do or view our portfolio, please click on the links below: