Reflecting on the theme roadmap from design creation

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.

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.

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

The section picked up this time is as follows.

・ 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.

・ 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".

・ 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.

・ 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.

・ 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".

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.

・ Social Accounts

・ Favicon

Make the necessary settings from the theme settings.

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.