Make Shopify website design much more efficient: Our free Adobe XD wireframe kit
Hello, I am art director Sato.
We have created an Adobe XD wireframe kit that will help you develop and design your Shopify site theme for free. The latest/Figma version is here.
I think that Shopify’s inexperienced people will also help you to understand the theme structure when designing original themes.
Updated April 15, 2021: Wireframe has been updated.
* If you have downloaded it before, we recommend that you download again* The updates are listed at the end of the article.
Contents [ hidden display ]
Adobe XD Wireframe Kit
prototype
Each element has a link, so you can feel the structure of your Shopify site.
The corresponding template file name is displayed in the red box.
Download Adobe XD Files
Please enter your e-mail address below and we will guide you to the download link.
* Information Privacy policy Please be assured that we will not send you a sales e-mail.
reason for distributing
This wireframe kit was originally created for internal use because we thought it would be convenient to customize the design of a Shopify site.
Since the reputation of designers and engineers was very good, we decided that it would be better to focus on the parts with higher added value for e-commerce site production by making use of them by business operators and production companies who have similar needs.
Overview of Wireframe Kit
Wireframe elements are based on Shopify Theme Kit (a developer tool provided by Shopify), a template file created when creating new themes, which is made up of the minimum required content for theme creation so you can take this as a stepping stone to consider each page’s element.
Main features
- XD's artboard and template files are supported at 1:1, with a Liquid template filename corresponding to the beginning of an artboard name.
- For elements that you think are important on each screen, we have a comb at the beginning of the layer name.
"The correspondence between template files and pages here
Benefits of Using Wireframe Kit
- When creating wireframes/design camps/prototypes for a Shopify site, you can create them based on the wireframe kit to make sure that pages and elements are ready without breaking out of sight.
- The XD Prototype Sets Links, So You Can Experience the Structure of Shopify Site
- You can easily create touch-based prototypes that don’t design still images, and use them for user testing
When creating a design, the necessary elements are placed in advance on wire frames so that you can efficiently proceed with your design work.
Also, the prototypes we touch are very useful in sharing images and user testing between members. a workshop called design sprint This kit is used to create a prototype of an EC site, and the production time can be greatly shortened.
a list of pages included in wireframe kits)
the xd file here You can download more, but we will introduce the page included in the kit here.
top page
index.liquid: homepage
<Common Parts>
header
axe logo
Links to each item (linked with the Shopify menu)
skewer cart link
My Account Link
Search window footer
Links to each item (linked with the Shopify menu)
• Free text field
SNS icon
product page-related
list_collections.liquid: product category listing page
<main element>
Collection Title
Collection thumbnail image
The number of items in the collection
collection.liquid: product list page
<main element>
Product title
Commodity images
Commodity price
- Commodity inventory status
Commodity tag links
vaginal paja
product.liquid: Product Details page
<main element>
vaginal image
Product title
Product price (per unit)
Product description
• Product variant (SKU) selection
Item quantity (quantity input or select box)
button to add to a cart
cart.liquid: Items in the Cart List Page
<main element>
vaginal image
Product title
Commodity variation (SKU)
Product price (per unit)
product quantity
Total product price (price x quantity per item)
a link that removes an item from the cart)
gross order
Transition link to checkout screen
Remarks column
Checkout * Customizable with Shopify Plus plan only
(Check-out screen 1: Information)
(Check-out screen 2: Delivery)
(Checkout screen 3: Payment)
(Checkout screen 4: Completed)
blog
blog.liquid: Blog post list page
<main element>
blog title
Blog post title
blog post thumbnail
The date and time of the blog post
blog post by the author
blog post tag
-- Excerpts from the blog post
vaginal paja
article.liquid: individual blog post page
<main element>
Blog post title
The body of the blog post
The date and time of the blog post
blog post tag
blog post by the author
• Comment form and comment list
fixed page
page.liquid: fixed pages
* No essential elements
search result
search.liquid: Search results page *No need if the search window is hidden
<main element>
Commodity title
Commodity thumbnails
- Product description
404
404.liquid: page 404
* No essential elements, like links and texts that return to the home.
password protection
password.liquid: front page for password protection
<main element>
Password entry form
account related * Only sites with account creation
customer-login.liquid: Account login page
<main element>
E-mail address field
Password entry field
vaginal transmission button
Password Lost Link
account creation link
customer-login.liquid: Account Login Page: Reset Password
reset_password.liquid: Account Password Reissue Page
<main element>
New password entry field
New password confirmation field
vaginal transmission button
customer-register.liquid: Account creation page
<main element>
Input field for the name of a surname
E-mail address field
Password entry field
vaginal transmission button
customer-activate.liquid: Account Activation Page
<main element>
Password entry field
vaginal transmission button
customer-account.liquid: Account details page
<main element>
Order history: order number, order date, payment status, shipping status and order price
Contact details of your account
log-out link
customer-order.liquid: Account Order Details page
<main element>
vaginal order number
Order content: product name, SKU, commodity price, number of orders and total amount
postal address
billing address
customer-addresses.liquid: account address page
<main element>
vaginal account contact information
If you have any feedback or suggestions for improvement, please send it to Twitter and the following comment form!
It will be used as a reference for future updates.
Updated on April 15, 2021:
Common headers · Global navigation submenu · Variation by cart icon status (before and after product addition) Common footer · Mermaga registration form Product list page · Collection description text · Collection image · Product seller display Product details page · Product tag display · Product seller display · Display at the time of product sale Cart pages · Variation, line item properties information display · Delivery date and time selection parts Blog post detail page · Heading or list elements etc.
Common Module, Accordion Deployment Parts, Embedded Video and Embedded Map
Note: Shopify’s official theme template description
https://help.shopify.com/en/themes/development/templates