"I created an e-commerce website using Shopify, but I want to be more particular about the design."
"I want to make Shopify themes easier to use and easier to sell."
"I want to improve my Shopify product pages."
This article is for people who have such concerns. We will explain the following points about customizing Shopify.
[Key Points of this Article]
- Learn how to customize Shopify's "design"
- Learn how to customize Shopify's "Product Page"
- Introducing 5 plugins that will help you customize and edit Shopify
[Basics] How to customize and edit Shopify designs
First, I will explain the basics of customizing Shopify. I will show you how to choose a theme and edit the layout, color scheme, font style, etc.
(The next section will be the advanced version .)
1. Choose your favorite theme
Start by choosing a theme you like.
1-1. From the admin screen, click [Online Store]
The default theme selected is "Debut."
1-2. Select a theme from the Theme Library
If you select "Free themes", you'll be able to browse Shopify's free themes in your admin screen.
Choose your favorite theme.
Once you've selected a theme, choose a style and click "Add to Theme Library."
This will add the theme to your Theme Library.
If you select "Shopify Theme Store", a new tab will open where you can get paid and free themes.
2. Launch the theme editor from the admin panel
Launch the theme editor and configure basic settings such as color scheme and fonts.
2-1. From the Theme Library, select Customize.
This will launch the Theme Editor, so click on Customize.
The Theme Editor will start.
3. Add and configure content
Once you launch the theme editor, select the area you want to customize in the "Section" and "Theme Settings" tabs and proceed.
You can change the "Website layout," "color scheme," "font style," and more.
Customizing the theme will allow you to make your e-commerce website unique.
[Advanced] How to customize Shopify theme code
Next, we will show you how to customize your theme code.
(Prerequisite) Knowledge of HTML, CSS, and Liquid is required.
You can customize it by using the "Theme Editor" explained in the previous section on basics. However, if you can't change the settings you want even using the Theme Editor, you can make more detailed changes by editing the "Theme Code".
However, to edit the "theme code", you need knowledge of HTML, CSS, and Shopify's template language called Liquid. Only edit the theme code if you have knowledge of the language.
If you don't have the knowledge and would like to make edits, please ask a Shopify Expert.
Request Inquiry1. Duplicate and back up your theme
If you edit the Theme Code, make a backup of it by duplicating it first, so you can discard your changes and start again if necessary.
For the theme you want to duplicate, click Actions > Duplicate.
2. Edit your theme code
2-1. From the admin page, go to [Online Store] > [Themes]
2-2. Click [Actions] > [Edit Code]
2-3. Edit the file in "Code Editor"
The Code Editor shows a directory of your theme files on the left and a space to edit the files on the right.
While the Code Editor is expanded full screen, a "dark" mode is available via a button at the bottom right of the page.
Tips for customizing your Shopify product pages
In this section, we'll organize the necessary elements and important points for your Shopify product page.
1. Product image (main visual)
One of the most important parts is the product image. It is better to show not just a simple product image, but also an image of the product in use.
For example, on a product page of an apparel e-commerce site, you could include a photo of someone actually wearing the clothes.
Many visitors decide whether to stay on a page or leave at the first view stage. A product detail page is like a landing page for that product.
Remember that the first view is the deciding factor, so prepare higher quality images.
2. Product name (catchphrase)
Just like the product image in step 1, the product name (catchphrase) is an important part. It’s better to include not only the product name but also the brand name.
This is because users often type in "brand name product name" when searching on a search engine.
With this in mind, we also recommend placing an H1 tag in your product name to improve SEO effectiveness.
3. Product Description
The next important thing is the product description. The key points of a product description are the "list" and the "benefits."
By using the list, you can quickly grasp the product's features.
In addition, the appeal of a product description will increase if you communicate the benefits (the value and future that the user will gain by purchasing the product) rather than simply describing the product.
4. Purchase Button
Call-to-action (CTA) buttons are also a big factor in determining the conversion rate of your page.
CTA Button Elements to Consider
- Button Color
- Location
- Wording
- size
There is no universally correct answer, so you'll need to test it out based on your site's theme and user preferences.
5. Meta Title and Description
Meta titles and meta descriptions are the titles and descriptions that appear in search results on search engines. As mentioned earlier in the section on product names, by taking SEO measures, you can expect direct access to the product detail page.
On e-commerce sites, the meta title and meta description of a product are often set to the same value, but this is something that needs to be set carefully.
If you have an e-commerce site that handles tens of thousands of products, setting up the site may be difficult, but you can set it up efficiently by using templates, etc.
6. Product Reviews
Providing product reviews can increase the conversion rate of your products.
Shopify also has an app that allows you to add product reviews, so be sure to consider using it.
7. Trustmark
A trust mark that certifies the safety of the site and the reliability of the products is also something you may want to display on your e-commerce site.
For example, the P mark indicating compliance with a personal information protection policy, or a security measures certification mark.
It is also effective to display logos of accepted payment methods (e.g. Amazon Pay), which gives users peace of mind and increases conversion rates.
8. How Cross-Selling Works
Another element you want to include on your product page is the ability to cross-sell. Cross-selling can increase the purchase price per customer, which can help boost your e-commerce sales.
As we will introduce later, you can easily implement a cross-selling system by using an app called " Shop The Look ."
5 apps to help you customize and edit Shopify
In this section, we will introduce 5 plugins that will help you customize and edit Shopify.
Design Builder: Shogun Landing Page Builder
Shogun Landing Page Builder (hereinafter referred to as Shogun) is an app that allows you to easily design landing pages, product pages, blogs, and collection pages on Shopify. You can customize them with drag and drop without coding.
Shogun has a wide variety of templates and is responsive. You can also customize any theme, so you don't have to worry about compatibility with other apps.
App Overview
- App name: Shogun Landing Page Builder
- Price: $39.00 per month (10-day free trial available)
- Languages spoken: English
Image Enlargement/Zoom: All In One Product Zoom
All In One Product Zoom is an app that adds image zoom functionality to your product view so you can see the details.
You can choose from the following three zoom types:
- Window Zoom
- Inner Zoom
- Lens zoom
"Window zoom" displays a larger version of the product image next to it.
With "inner zoom," when you place the cursor over a product image, the area you place the cursor on will be enlarged.
"Lens Zoom" allows you to enlarge the image like a magnifying glass. (You can choose between square and circular lens types.)
Additionally, the following settings can be easily customized:
- Zoom Level
- Zoom Position
- Zoom Size
- color
App Overview
- App name: All In One Product Zoom
- Price: $1.90 per month (3-day free trial available)
- Languages spoken: English
Display prices in your local currency: BEST Currency Converter
BEST Currency Converter is a multi-currency conversion app that allows users to change the currency display to suit their needs.
The features of the app are as follows:
- Add 160+ currencies at the touch of a button
- Prices are automatically converted based on the user's location
- Easy-to-read converted price display possible (removal of decimal points, etc.)
- If you want, you can hide the currency converter and run it only in the background (paid version only)
In the free version, only the following features are available:
- Five currency conversion settings available
- Three currency conversion design templates
- Free technical support available
App Overview
- App name: BEST Currency Converter
- Price: $9.95/month (free plan available)
- Languages spoken: English
Product Search & Filter Settings: Product Filter & Search
Product Filter & Search is an app that helps users search for products. It can search up to 1 million products and displays new products in real time.
One-click install makes it easy to get up and running, and you can customize it to suit your needs.
The following filtering searches are available:
- collection
- Supplier
- Product Type
- color
- size
- rate
- tag
- price
- evaluation
- Sale Status
- Availability
App Overview
- App name: Product Filter & Search
- Price: $19.00 per month (14-day free trial available, additional fees may apply)
- Languages spoken: English
Related product details & cart display: Shop The Look
Shop The Look is an app that adds a "SHOP THE LOOK" button to e-commerce sites, allowing users to check all related products and add them to their cart.
For example, an apparel e-commerce store could use this app to allow users to add all items worn by a model in a product photo to their cart, without having to visit each individual product page.
You can promote multiple products from a single photo, which can lead to upselling and cross-selling.
App Overview
- App name: Shop The Look
- Price: $19.99/month (21-day free trial available)
- Languages spoken: English
[2019 Latest Edition] 12 apps recommended by Shopify Experts certified companies (list included)
[Summary] How to create an attractive e-commerce site with Shopify
This article has provided information for those who want to learn more about customizing Shopify.
To summarize the main points of this article, they are as follows:
- With Shopify, you can customize it from the admin panel.
- And Shopify has a wide variety of plugins. You can easily edit by using apps such as "Shogun".
- However, detailed adjustments require knowledge of HTML etc.
- To build a successful EC site, it is better to ask a professional company for help.
With the information on Shopify customization we've provided you with, you can create a more attractive e-commerce website.
*This article is current as of December 2019. Due to future updates or changes to Shopify specifications, it may not be possible to set up exactly as described in this article.
