Reflecting on the theme roadmap from design creation

by Rin Hirashin

When implementing the design in SHOPIFY, have you ever been wondering where to create?

This time, we will introduce the roadmap for designers to create designs and touch the engineer to baton!

The theme used this time is "Minimalista".

The theme isHerePlease check from.

I introduced the points when creating a design before.

If you are worriedHerePlease confirm.

This time, when creating the design, we were assembled with a customizer, and then modified and built the design with figma.

① Specify fonts and create color palette

You can set multiple fonts as much as you can set with the customizer, such as the title and text.

In addition, since multiple color palets can be set, the color can be changed for each section.

② Implementation of TOP page

First, pick up the section suitable for sites to be built from the theme section.

The section picked up this time is as follows.

Gallery with Text

Gallery image

・ Land -side and three tabs can be placed

・ Each section is large when hover

This section can be placed sideways by arranging it sideways, and a small movement can be used without a code, so the site can be moved.

Featured blog

Reference image of the blog

・ Basic information can be displayed hidden

・ Up to 9 blog posts can be displayed

It is a section that can be displayed large on the screen, so it can be placed that makes it easy to be interested, and can be selected from two types, "Column" and "Grid".

Collapsible Content

・ Hide text is possible with the arrow button

It is a text section of design often used in FAQ, etc., so it can be opened and closed with an arrow, so the volume of the section can be reduced.

Contact form

Contact form image

・ Photos can be inserted on the side of the content form

Contact forms are often simple, but you can give a sense of security just by putting photos that understand the atmosphere of the company.

If you can pick up, insert the image and change the text.

② Create a page that is prepared by default

・ Account page (including account creation page, login page)

・ Cart page

・ Inquiry page

・ Blog post page

Can be created with a customizer without creating a page separately.

The sections displayed on the default page are already spoken, and there is no editing from the customizer.

Therefore, the wording is changed from "edit the default theme content".

Explanation image of wording change

③ Create other pages

Create a template from the page at the top of the customizer.

Create a page and apply the created template.

If you can do so far, you can change the design for each page with a customizer.

Procedure ①
Procedure ②
Procedure ③

④ Make detailed settings with customizer

・ Social Accounts

・ Favicon

Make the necessary settings from the theme settings.

⑤ Display of language and currency selector

If the currency is set, the theme of the theme, localization, and the English translation of English are performed in the SHOPIFY market, the language selector and the currency selector can be displayed on the customizer.

When you go so far, check the page again.

If there is no problem, it will enter the implementation of the part that needs code editing with the design caused by figma.

If the engineer touches the baton and implements a detailed design, the design is completed.


Here are some of the functional aspects of "minimalista" used this time.

Other things that are often equipped with themes are required and the functions you want are available.

For example, there are the following.

・ Return to the top button

・ Bread crumbs list

·Featured Products

・ Frequently asked questions

・ Sorted with product filtering

In addition, countdown center, age confirmation function, and customizable inquiry forms are often not equipped with some themes.

This time, I told the roadmap from creating the design to the implementation!

I hope it will be helpful when building a site on SHOPIFY.


Rin Hirashin

Account Manager/Designer

"I Keep Making an Effort for My Dream.



One -stop offered from EC construction to advertising operation.