How To Design And Build A Custom Shopify Ecommerce Store Step By Step (2023)
Start Your Journey of Building a Cross-Border E-Commerce Website on Shopify from Scratch in 2 Months. Join the Advancement! By sharing valuable insights, practical notes, and resources accumulated through hands-on experience and testing, including the best Shopify themes and apps, this guide will help you build a successful e-commerce website on Shopify. Stay updated with the latest content and message me if you have any questions. (Last updated on 2023.02.03)
“Practical experience sharing, not just online information compilation.”
Original Article Link: https://global.irvinglab.com/blog/shopify-learning/
Previously, Shopify had a tutorial video: How to Create an E-commerce Website in Less Than 25 Minutes, with Clear Step-by-Step Explanations. It’s hard to believe, but you really can finish building your online store in just half an hour!
The video from Shopify seems to make it so simple, but in reality, the business owners’ needs or our own needs go beyond just this. The default customization features of the Shopify platform are not as high as expected (compared to building a website with WordPress, it’s still far superior to other e-commerce platforms), and there are still many restrictions in use, so we need to find ways to solve this problem. (Note: The video has been taken down by the official)
One is to find engineers, but engineers who are familiar with Shopify development are still a rarity in Taiwan, and they also need to familiarize themselves with Shopify’s template language: Liquid; two is for ordinary people, it is to use the resource-rich Shopify App, countless free and paid Shopify theme, making good use of these expansion functions can solve the problem of “customized e-commerce website”! For more details, please read on!
Hi there! I’m Irving Chen, a senior web designer. Let me quickly introduce my website development experience. I have several years of experience using WordPress for website building and web design, and in recent years, I have been focusing on Shopify e-commerce website design and development. I have a good understanding of the limitations and flexibility of these website platforms. For example, WordPress offers a high level of flexibility, allowing you to navigate the backend easily, modify page code, and utilize a wide range of templates and plugins to create a comprehensive digital presence for your website. If you have any website-related questions, feel free to fill out the contact form and leave a message or request. I will get back to you as soon as possible!
For a WordPress theme site, it’s recommended to use the default features as much as possible, rather than heavily modifying the original theme code, which could impact future updates. Unless the theme won’t receive future updates through official channels. On the other hand, Shopify themes don’t need to be updated as frequently, as updates can affect many installed Shopify apps, making the transition cumbersome. It is my personal opinion that upgrading once every two or three years is fine, unless there is a significant improvement in the upgraded theme.
It is possible to customize the design of a WordPress or Shopify website, but it is not recommended to modify the core code of the WordPress theme or Shopify app, as they will likely continue to be updated by their developers. If you have feedback or ideas for improvements, it’s best to reach out directly to the developers. Simple design changes using CSS can be easier to resolve after updates, but it is not recommended to change the core logic of the software, such as writing JavaScript to modify the core code of a plugin.
In WordPress, an extension of functionality is called a Plugin, while in Shopify it’s referred to as an App. WordPress Plugins are basically similar to Shopify Apps.
As for the level of customization in the Shopify backend, it falls between WordPress and Wix. It might be a little easier for beginners to start building a website with Shopify, Wix, Squarespace, etc. However, if you want to freely arrange the web page or write simple CSS or Javascript code, there will be many restrictions. Although WordPress is really suitable for people without any programming background to learn, many customers still find it painful and slightly complicated, having to remember a lot of settings. It can only be said that after getting familiar with the backend operation logic through extensive practice, they can overcome the threshold in their hearts.
Start a free trial and enjoy 3 months of Shopify for $1/month on select plans. Register Today! This is an ongoing promotion by Shopify, and it’s uncertain when it will end. Take a look around the backend after registering and feel free to message me if you have any questions.
Website building platform customization level (from high to low)
- WordPress: High level of customization, with a huge number of templates, plugins, and tutorial resources. It covers all aspects of website building, from blogs, and corporate websites to e-commerce websites.
- Shopify: Medium level of customization, primarily for building e-commerce websites, with a focus on security and expandable functions. Shopify apps often require subscription and payment, and the overall interface is less complex than WordPress. Shopify is currently the only platform for selling products overseas, and its global market share and user satisfaction are currently the first (as shown below).
- Webflow: If not using WordPress or Shopify, I would choose Webflow as the third choice. I’ve recently started exploring the potential of Webflow, and if it’s used to design a “dynamic brand website,” it would be one of the best choices currently. If you’re a designer who wants to have a highly efficient dynamic design without writing code, Webflow is worth trying. I’ll study it further in the future and share my findings!
- Squarespace, Wix, Weebly: Low level of customization, basically choose the template and don’t have any other special desires. Even though they offer paid version upgrades, it’s hard to compete with WordPress, Shopify, or even Webflow.
All of the above platforms are comparative to each other, and you may find that one of the website-building platforms meets your needs. That’s okay! It really depends on factors such as manpower, technology, resources, time, and cost, and it’s important to choose the best option for your current situation.
In terms of plugins, Shopify and WordPress are similar in that they both have a lot of options to choose from. The main difference between their plugins is that WordPress has a lot of free options available, many of which can meet your needs without requiring a paid version. You can refer to my other article, “Top picks for WordPress plugins” for more information. Shopify also has a lot of apps, but most of the features you need to meet your requirements will require payment, and the majority of these payments are subscription-based (usually on a monthly basis).
Note: Many users who are just observing often do not realize that both WordPress and Shopify have a wide range of templates and plugins available. We need to understand the marketing language in the business world: each claims to have more features and higher ratings, but when you actually go to install and use them, you will gradually find unexpected issues that need to be resolved. And it’s very likely that one problem will lead to more problems, and it’s not as easy as you think! Ultimately, you still need to test and modify yourself to find the best combination to make the website run smoothly.
Access global markets overnight
Description: With Shopify Markets, as described on its official website, you can effortlessly reach global customers with only one store. To get a better understanding, you may refer to the interview with Shopify’s CEO where I’ve condensed some of the essential features highlighted on the page.
- Expand Globally with Ease: Shopify Markets streamlines global expansion for businesses of all sizes, making growth effortless without adding to the workload.
- Tailored Shopping Experience: Provide a familiar purchasing experience for customers, making it easy for international shoppers to browse and buy products, allowing for faster transactions in each market.
- Currency Diversity: Convert your pricing into over 133 local currencies for international customers to easily shop.
- Language Barrier-Free: Translate store content for seamless international shopping experiences.
- Transparent Taxes: Automatically calculate import costs at checkout for customers to have a clear understanding of the total amount, avoiding additional expenses discovered during delivery.
- Convenient and Secure Payment Options: Allow customers to make payments using familiar and directly secure methods.
- Enter the Global Market with Confidence: Our data-driven setup automatically boosts conversions, creating a better customer experience and quickly optimizing your international strategy.
Check out the 2022 Shopify platform update record, which is released every two years by the official website and includes exciting new features releases. Visit to explore Shopify Editions: Connect to Consumer (Summer ’22)
If you have any questions, please feel free to fill out the form and leave a message or email me at irving@irvinglab.com. You can also reach out to me through the Facebook or have a direct online chat. Let’s communicate and grow together! You can check out my web design portfolio to see my work. Join the Shopify website design and development learning community on the Line group to exchange ideas and learn together! However, please note that users in the United States cannot join the Taiwan Line group. Therefore, I have also created a Telegram community where valuable experiences from both platforms will be shared and organized. To further understand our services, you can add Irvinglab’s Line@ official account and leave a message for us.
Entering the main topic of this article, building an e-commerce website with Shopify was a task I received when I first joined the company several years ago. At that time, I had never used Shopify and often looked for the shadow of WordPress in its backend, only to find that the freedom of building a website at will was no longer there, meaning it was limited to very few options and unable to add blocks or layout freely.
To solve this problem, I started to delve into the logic of Shopify’s operation. At first, I thought it should be a simple version of WordPress and should be easy to use, but I didn’t find what I wanted!
The expected launch date for the boss was April 6th. Based on past experience in building websites, two to three months is about the time it takes to set up a medium-sized website. So I planned the Shopify website schedule as shown in the following chart.
Note that the time is actually tight, but since our company originally had a website set up using WordPress, we are just changing to the Shopify platform this year and the content is already there, so we can at least reduce the time for writing content and “web visual design” by two to three weeks. In other words, following the normal schedule, at least three months would be more ideal. Note: The red numbers in the schedule represent holidays, but they are highlighted because I will be working overtime (at least 9 days!).
Recently, I am planning to create Shopify-related tutorials. If you want to be the first to receive the notification, you can join the Irvinglab newsletter below.
Quick Start Guide to Setting up a Shopify Website
I allocated one week of my time to quickly learn Shopify’s backend operations, layout configuration, and Shopify App setup from scratch. I then learned by doing and resolving issues as they arose. The seemingly ordinary journey was filled with all sorts of problems, but I was able to overcome and learn from each one. After numerous projects, I organized the website design process and schedule I gleaned and it can be found in the article “Shopify Website Design Process and Time Planning“. Here’s a list of the methods and resources I used intensively to learn in two months:
In 2020, besides using the paid version of the company, I also applied for a free trial of Shopify with my own account. The trial lasted for a maximum of 14 days, but customer service wouldn’t let me extend it. So, I eventually paid for the Basic Shopify plan with my own money, which cost 29 USD per month, or around 10,000 TWD per year. Despite the cost, it was worth it for learning purposes.
After 2022, the pricing for Shopify changed, with the Basic plan costing 19 USD per month and no credit card information needed. The free trial for Shopify was also extended to 3 days, and the first three months of the Basic plan only cost 1 USD per month. After three months, it increased to 3 USD per month. This is a great deal that allows you to try and learn about Shopify thoroughly before committing to a plan.
Why not just use the company’s Shopify website to operate? The problem that people who have set up a WordPress website will encounter is that after installing certain plugins, the website crashes, which may be due to conflicts with the template or conflicts between plugins. Therefore, it is safer to create a “test site” to test the website. It’s not good to use the company’s website directly!
In addition, constantly installing and removing various Shopify apps can cause some problems, such as residual code or files if not properly removed, causing web page breaks. Some apps may require “additional steps” to be “completely removed.” See common problems in the latter part of the article.
Don’t miss out, register for a Shopify free trial now!
The Longer the Payment Cycle, The More You Save with Shopify Plan
In Shopify’s pricing model, the longer the payment cycle you choose (measured in years), the more you save. This is a compelling offer that can attract users and increase their loyalty. The image shows that by choosing the $79/month plan and opting for yearly payments, you can save $96 in US dollars.
Before searching for answers on Google, take a tour of the Shopify backend to get a general impression of the location of each setting and what options appear when clicking into each item. At this stage, there’s no need to fully understand everything. Additionally, Shopify’s Onboarding process is well-designed and makes things feel simple. The first thing you’ll see when you enter the backend are the three steps: Add product, Customize theme, Add domain. “Wow, can you really start selling with just these steps?” Not quite. In addition to a website, e-commerce also requires setting up payment and shipping, which will need to be done later.
Shopify admin backend now has a traditional Chinese version available for use, and official documents are also provided, making it clear when searching for information. Unless the consumer is primarily in a Chinese-speaking world, such as Taiwan or other countries, it is still best to use the English version when facing the international market, allowing one to always be aware of the ways to use English words. Although the Shopify App Store provides a Chinese version, it only has partial translations, and most of the app developers use English to write content, so switching to the Chinese version does not have much significance.
Browsing the Shopify official documents and help center (as a dictionary)
You can also come back to this article occasionally as a dictionary. I have been continuously updating the content of this article over the years.”
Shopify Blog
Introduction: A blog about eCommerce marketing, running an online business, and updates to the Shopify eCommerce community.
Brief: The official blog provides updates about the Shopify platform, as well as information about eCommerce operations, digital marketing concepts, and stories of entrepreneurs. You can accumulate industry knowledge and solidify your thinking patterns while learning.
Link: Read more
Shopify Help Center
Introduction: The Shopify Help Center will assist you in understanding and using Shopify. We have documents and videos to answer your questions.
Brief: The documents have Chinese translations, you can scan through them and most of the problems in the backend operation can be solved, such as domain setup and product addition, etc. I don’t read them all as a book, but I only come to them as a dictionary when I have problems during actual operation, which is very practical!
Link: Read more
Shopify Help Center — YouTube
Introduction: The official Shopify operation interface tutorial video is available with many clear and easy-to-understand answers to basic operation interface questions.
Link: Read more
Shopify Community
Introduction: Access a community of over 600,000 Shopify Merchants and Partners and engage in meaningful conversations with your peers.
Brief: The Shopify Community is a great resource for finding answers to your questions during the website setup process. Before searching Google, you can search for related topics like SEO in the community to efficiently gather information and potential solutions to the problems you may encounter.
Link: Read more
For practical implementation of Shopify SEO, check out my latest article: Discover the Best Shopify SEO Implementation Techniques with our Latest Article: A Practical Guide to Using Yoast SEO on Shopify.
If you want to learn more about Shopify’s programming language: Liquid, you can check out the following resources: the Shopify Partners official blog — Learning Liquid, the YouTube channel — ShopifyDevs, the official Shopify Liquid documentation, the Shopify Liquid GitHub, or the amazing Shopify Open Source Software Projects.
Online customer service is an immediate response ally
Shopify Help Center — Support channel
Introduction: Contact Shopify Support by chat, email, or phone.
Brief: English support center has more options, with four ways shown below. Customers can reach support through live chat, phone call, email, and Twitter message. The channels are diverse and customers should not have trouble finding the support they need.
Link: Read more
But what the online customer service values most is the “instant response rate” of customer service. Excluding the phone that requires speaking in English, the email that seems to have to wait, and the online text conversation that has more steps and messages that cannot be saved in one place, I choose the social channel Twitter. I already have a Twitter account and occasionally use it. Now I can chat directly with Shopify.
Shopify Support on Twitter
Shopify Support’s Twitter is my favorite and main method of using the online customer service. I can directly chat with them through messages on Twitter. Different customer service representatives are available at different times of the day. They respond to my questions almost immediately, usually within a few minutes to several tens of minutes. They are quick and it’s easy to get answers. If they can’t answer a question, such as one about code editing, which is beyond their scope of customer service, they will tell me directly.
During my journey of learning how to use Shopify, I spent over half of my time communicating with the Shopify Support team on Twitter. They were a quick and reliable source of answers, providing not only quick responses but also additional resources such as links to articles and videos. The Shopify Support team also has their own Linkpop page at https://linkpop.com/shopifysupport, which is a convenient way to access their information, such as contact support and check the status page, without having to search the official website or Google each time.
Note: Linkpop is a one-page web page for Social Bio launched by Shopify officially, it can usually be placed in the introduction of social media such as IG, Twitter, etc.
Hiring Shopify Experts Online
There are many platforms for hiring experts both domestically and abroad. Shopify also has its own platform for matching experts, divided into six categories: Marketing and sales, Store setup, Development and troubleshooting, Visual content and branding, Content writing, and Expert guidance. Choose the category that you need help with, and if you are not good at English, you can also use the filter to select experts who provide services in Chinese. These experts are both individuals and companies, and you can take a look at them for reference.
I also frequently share a lot of related Shopify web design experiences or related information on Irvinglab’s Twitter, Instagram, and Facebook. Feel free to follow us ^^
What to do if a Shopify website encounters a problem during operation?
- Try to recall what was done on the website backend before and after the problem occurred and check everything one by one using the elimination method. Before asking the Shopify official Support team, you can do your own debugging process:
- Did the problem occur only recently, but not before? If yes, then it is likely that something was done on the website during that time that caused the problem.
- How many people are using the backend settings of the website? Or is it just you? If there are two or more people using it, then ask the other users if they made any changes to the website.
- Have you made any direct changes to the code recently? Where and in which pages was the code set? Editing Shopify web code may cause problems if some code is missing or in the wrong order.
- Which APP was used to set up the function? Have you reported the problem to the APP developer? How did they respond? Are they offering technical support?
How was the function set up? Did you miss setting anything? - Did you install any similar APP? Which theme did you use? Is there a conflict between the APP and the theme or between two APPs?
- Shopify APPs generally update automatically. Did the APP for this function update during the problem? What was updated? Could this be the cause? Have any other APPs updated? If not, check each Shopify APP installed on the website to see if any of them caused the problem.
- … (Continuous thinking process for debugging)
If you still can’t find the solution, feel free to contact me.
Line Social Group (Taiwan)
Join the Shopify website design and setup learning community on Line: exchange and learn together! However, users in the United States are unable to join the Line community, so I have also created a Telegram community. Valuable experiences will be shared and organized on both sides. Any questions about Shopify website design and setup can be asked in the community, and some questions have already been asked by many people, such as payment processing. So after joining the community, you can search for the keyword “payment processing” and quickly browse other people’s ideas and experience sharing to help you make decisions.
Learn With Shopify
Learn directly from Shopify’s official YouTube channel, Learn With Shopify. With a wide range of topics, you can find information not only about building an e-commerce website but also about other aspects of e-commerce operations and marketing strategies. The playlist includes: Build A Shopify Store、Product Ideas、Business Ideas、Opeartions and Logistics、Marketing、Business Strategy、Build A Brand.
What’s New at Shopify?
Description: To have peace of mind in investing time and using a platform for the long term, it is important to check if the platform is being updated, improved and maintained. One way to find out is to see if it has “public updates” information, and Shopify clearly updates its Changelog page with new features and improvements. The right side of the page also has categorization information for filtering, so take a look by visiting What’s New at Shopify.
Two Major Shopify Resources (Shopping Time)
Shopify Theme
Introduction: Ecommerce Website Templates — Free and Premium Themes for Your Online Store.
Description: The design is pretty good! There are really a lot of choices. In addition to the basic function and layout of the free templates, the paid templates offer more diverse design styles, generally averaging around $180 USD. In practice, I wouldn’t choose a free template because the features are too simple! The template is a one-time payment, so choosing a template is worth it.
Link: Go to Browse
Shopify Themes and Templates – ThemeForest
Introduction: A Highly Recommended Platform – Themeforest, Check out the Shopify Paid Themes: Themeforest — Shopify Themes, it is highly recommended to purchase from here because the themes offer more customization and flexibility compared to the official ones. Planning to purchase a few for further study (there’s a curated list ahead, keep scrolling down)
Things to Know Before Purchasing a Shopify Theme
It’s important to keep in mind that when purchasing Shopify themes from the official Shopify Theme Store or third-party platform Themeforest, they may not include the Shopify Apps used in the website demo. Some themes require additional purchases of monthly payment Shopify Apps to access certain features. If the feature is a default of the theme, then it does not require additional payment or purchase. To learn more, it’s recommended to browse the “online documentation” of the theme before purchase. For example, the user guide for the Wokiee theme is “Wokiee – responsive Shopify theme user guide.” Browsing through the documentation is always beneficial!
The Shopify Theme Store provides a trial version of the theme, which can be purchased after trying it out. However, third-party platforms like Themeforest mostly require direct purchase to use, although some offer free trials such as the well-designed and functional Minimog Shopfiy Theme. Additionally, a theme can only be installed on one Shopify store, for more information refer to the official document Adding, previewing, and buying themes
After installing the theme, it’s important to make a backup first to preserve the original files.
For example, in the following image, there are three files in the lower right corner:
- Backup Original File: Copy of Prestige – Try Theme 20200910
- Staging: Prestige – Staging 20201101
- Website Launch: Prestige – Launch 20201231
In this case, “Prestige” is the name of the theme and the time is attached to it, helping you understand the order of use when using these theme settings. If you continue to revise and launch the second, third, or later versions of the theme, you can also add a backup as needed.
If you purchase a Shopify Theme on a third-party platform such as Themeforest, you will receive a serial number after your purchase. To start using the theme settings, you need to enter this serial number after the theme has been installed. Note that a serial number can only be used on one domain. As shown in the image below, after uploading the Wokiee theme I purchased to Shopify and installing it, the homepage displayed in the shop asks for the serial number (refer to “Where Is My Purchase Code?” for information on how to obtain it)
Note: When starting to build a Shopify website, as the content is not yet complete, I will first password protect the site to prevent it from being indexed by Google or accidentally shared by myself or the team.
Pro Tip: Theme Language Translation, Notification Translation.
Question: When using certain official Shopify themes such as Prestige or third-party purchased themes, the theme language itself does not have a default Traditional Chinese translation (while some other themes do have defaults, which makes it easier).
Solution: Additionally, install a free official Shopify theme with Traditional Chinese translation, such as Minimal. After installation, do not publish it. Go to “Online Store > Themes > Actions > Edit default theme content” and copy the translations from there to your currently published theme. It can be convenient to have both windows open side by side for execution. As for the text content of notifications, usually, updating the theme language should suffice.
Shopify App Store (Choosing an application)
Introduction: Ecommerce App Marketplace — Using the Shopify App Marketplace To Expand Your Store’s Functionality.
Description: In my experience, most of the useful and desired features in apps come with a cost, typically in the form of monthly subscription fees. Therefore, when selecting these app combinations, it’s advisable to estimate the approximate monthly cost.
Link: Go to browse
For example, the PageFly Advanced Page Builder offers various plans (the actual pricing should be confirmed through official sources and checking the pricing table in the backend after installation). Currently, I frequently use this builder as it provides affordable pricing. It’s a great option for learning and practical application, and you can easily get the hang of it within a week or two. PageFly can be used to create high-converting landing pages, apply various page templates, and more. If you have any questions regarding the settings, feel free to ask!
To learn more about PageFly, the web design editor, you can refer to the following resources: “How to Customize Shopify Web Design Layout” and “PageFly Beginner’s Guide: Building Shopify Webpages Quickly“
I usually consider the installation process and overall user experience (UX) when evaluating an app, as some apps may have powerful features but provide a frustrating and confusing user experience. Unless there are no alternatives available in the market, I prefer to consider the following factors to determine which app to choose:
- Feature satisfaction: The app should meet your specific requirements, and if it offers additional features beyond your needs, it can be particularly enticing.
- Review ratings and quantity: Look for apps with a rating of at least 4 stars and a substantial number of reviews, such as 50-100 or more. This helps ensure that the app has been well-received by users.
- Excellent installation and setup UX: Consider factors like prompt online customer service, smooth onboarding processes, comprehensive documentation, and visually appealing backend interface.
- Regular updates and optimizations: Check the app’s update frequency and release notes to see if the developer is actively improving and optimizing the app’s performance and functionality.
- Developer’s experience with Shopify: Look for information indicating how many years the developer has been working with Shopify. A longer period suggests more experience and familiarity with Shopify development.
Regarding the second point, I have a method to test it. I try to install and configure the app without referring to the official documentation. If I can successfully complete the process without the need for documentation, it demonstrates a high level of UX. If an app passes this test, it indicates that using it would be quite comfortable. However, the complexity of the functionality is also a factor to consider. Nonetheless, app developers who prioritize UX experience and visually appealing backend interface design would be a preferred choice.
Shopify Theme (Featured Recommendations)
Why consider purchasing third-party themes? These themes offer not only powerful features but also come at around half the price compared to the themes available in Shopify’s official theme store. The robust functionality means you can potentially avoid purchasing multiple paid Shopify apps, saving costs in the initial stages and in the long run. However, it’s important to carefully select and verify these themes to ensure they are free from bugs or other issues. For example, there were some problems with the Ella – Multipurpose Shopify Sections Theme in the past, but they released a new version to address those issues. It’s always a good idea to check for any updates or improvements. Of course, if you prefer the assurance of Shopify’s official certification, you can directly purchase themes from the Shopify Theme Store.
The Shopify theme list and Shopify app list provided below are for reference purposes only. It is essential to make choices based on your industry and specific requirements. Please use them with discretion! (Continuously updated)
ThemeForest – Shopify Themes and Templates (A high-quality third-party platform)
- Minimog (Recommended! Recently discovered by our team, it offers a fresh visual design, powerful and all-in-one functionality. I have already used it on over 5 different Shopify e-commerce websites. Interested individuals can start by watching the tutorial series videos: YouTube Tutorials: Minimog – FoxKit App Settings. For theme installation, please refer to the official documentation: Install Foxkit App and activate the Purchase Code to unlock all the powerful features and functionalities. However, the default slider on the homepage does not allow setting “side-by-side buttons.” You can have a maximum of two buttons, with one of them only being configurable in the bottom right corner. Commonly useful features include: Product bundles、Quantity discounts、Free shipping goal、Lucky wheel、Popup、Facebook chat、Back in stock、Pre-order products and so on. Example: JE22、GWS
- Kalles (Used by our team, it’s good)
- Rubix (Used by our team, it’s good)
- Zeexo (Explored and found it to be of high quality, already purchased and awaiting further exploration)
- Avone (Explored and found it to be of high quality, already purchased and awaiting further exploration)
- Wokiee (Used before, it has many features, but the backend interface experience can be a bit challenging. Configuring certain elements can take some time)
- Debutify (Seen it being used on e-commerce websites, it has good design aesthetics and powerful all-in-one features. However, it’s not a one-time payment theme but requires a subscription)
- …Continuously gathering, researching, and testing more options.
Shopify Theme Store (Official theme store)
- Prestige (Used before, the theme has an elegant and sophisticated design, and it performs well. Real-life example: JOWUA)
- Impact (The official theme has a high-quality design with many clever design elements incorporated. I really enjoy it)
- Motion (Currently in trial, it’s decent, but there are limited options for adjusting the position of the text block in the Slider, as it can only be set in the bottom left corner)
- Empire (Seen it being used on other websites, and it looks good)
- Boost (The design is sleek and vibrant, making it a great addition to my collection)
- Masonry (If you want the website menu to be fixed in a sidebar, you should take a look at it)
- Maker (It gives a fresh and clean look when used for showcasing cosmetic products)
- …Continuously gathering, researching, and testing more options.
Shopify App (Featured Recommendations)
This list is provided for reference only, and it’s important to consider your specific needs when making a decision. If you come across any Shopify apps that you find impressive, feel free to recommend them to me at any time!
- Webs page builder: PageFly Advanced Page Builder (Highly recommended)
- Tab: Tabs Studio (Commonly used feature, the free version is simple and easy to set up, display options can be set as tabs or accordion)
- Inserting code snippets: XO Insert Code (Inserting code snippets between <head>, <body>, and <footer> allows for easy management of all website tracking codes.)
- Multi-currency: Currency Switcher by Secomapp
- Multi-language: Weglot、langify、T Lab ‑ AI Language Translate (Weglot, langify, and T Lab are currently compatible with PageFly)、Language Translate & Currency by Transcy(I recently started using this translation app, and I really like it. The only drawback is that it’s not fully compatible with PageFly)、Translate My Store & Currency by Hextom
- SEO: Yoast SEO – SEO for everyone (Yoast is a well-established WordPress SEO plugin, and its recent launch as a Shopify app is definitely something to look forward to! It addresses the shortcomings of Shopify’s native SEO settings. For example, with Yoast SEO, you can finally set up social sharing images for each page in Shopify and have better control over your social media previews. You can refer to my article Shopify SEO Recommended App: Yoast SEO Practical Tutorial for more information.)、SEO Booster by Secomapp
- Delivery Notifications: Back In Stock — Restock Alerts、Back In Stock: Customer Alerts by SureSwift Capital
- Newsletter: Mailchimp (MailChimp (Recommended! You can register an account on the MailChimp website, choose the free plan, and then install the Shopify App for MailChimp. Previously, you needed ShopSync for integration, but MailChimp and Shopify have now collaborated and released an official version, making the setup easy and user-friendly) Klaviyo (A rising star, although the integration process may not be as straightforward as expected ^^”)
- Checkout Page Upsell/Post-Purchase Upsell: Reconvert (Currently, the most comprehensive upselling feature I have come across is applied to the “post-purchase thank you page”.)
- Multiple coupon codes: DiscountYard — Stack Discounts (Addresses the limitation of Shopify’s ability to use only one coupon code! Exciting!)
- Product Search: AI Search, Filter & Recommend by Boost Commerce (Highly recommended with a five-star rating, Product Filter & Search offers two crucial features that are often in high demand. Firstly, it provides real-time search suggestions for the entire website, enhancing the user experience. Secondly, it allows the configuration of product filters using tags or metafields, providing flexible options for product sorting. Additionally, the app offers customization services, which may involve some fees, although many style updates are currently available free of charge. The ability to specify the installation on a designated theme is a convenient feature. This allows you to install the app on an unpublished theme for testing purposes, ensuring a seamless integration before publishing. It’s important to note that removing the app requires following the instructions provided in the official documentation to ensure a clean uninstallation: “Uninstall Product Filter & Search from your store” Please be aware that this app may replace the original collection page layout, requiring additional adjustments and configuration to maintain the desired styling. Another highly-rated option to consider is Smart Search & Filter by Searchanise, which offers intelligent search and filtering capabilities. You can visit their official website for more information and install the app directly from the Shopify platform if you find it suitable for your needs.)
- Order Tracking: AfterShip is an incredibly useful app that allows customers to track their orders by entering the order number and email or tracking number. It provides real-time updates on the logistics status and progress. While it also offers the option for customers to input their phone number for tracking, I found that it works more smoothly when customers enter their email address. The customer support within the AfterShip Shopify app is highly responsive and has been able to assist me with various inquiries and issues. A practical example of its implementation can be seen on the order tracking page of JOWUA’s US website, where supported carriers include FedEx, USPS, UPS, DHL Express, Black Cat PRESIDENT TRANSNET CORP, SF Express, and Taiwan Post. I have personally downloaded the AfterShip iOS app and logged in to track orders. It is also available for Android, and overall, the user experience has been excellent.
- Breadcrumb Navigation: Category Breadcrumbs – Zoom Buzz is an app that solves the issue of Shopify’s inability to customize breadcrumb navigation with multiple levels, such as Home > Dogs > Food > Dry Food. This is particularly useful for product collection pages that require such breadcrumb paths. The app primarily retrieves information from the main menu to display the breadcrumbs, so it depends on the organization of the main menu and its product collections. However, it’s important to note that Shopify’s navigation menu supports a maximum of three levels.
- Selling Digital Products (e.g., eBooks, Audiobooks, Photography Assets, etc.): SendOwl
- Email Popups Improving Conversion Rate and Sales: Upsell, Discount, Email Popups by Getsitecontrol
- Mega Menu: Smart Mega Menu & Navigation by qikify (If you have a large number of product categories or website content categories, you may consider using a tool that offers easy layout and quick setup, along with the ability to add banner images next to menu items.)
- Instagram Feed: Instagram Feed — elfsight (Excited recommendation! Once you’re on the official website’s homepage, navigate to Widgets > Instagram Feed in the menu)、Instagram Feed Pro ‑ Instafeed by Expert Village Media Technologies
- Instagram Shop: Lookbook ‑ Shoppable Galleries、Shop Instagram & UGC by Growave
- Product Recommendation: Rebuy Personalization Engine (They claim to have an AI machine learning recommendation system, and one of the great features I found is the ability to recommend other products on the checkout page to boost sales)、Personalized Recommendations by Expert Village Media Technologies
- Interactive Videos – Boost Conversion Rates: Tolstoy Product Video & Quiz (Interactive videos are a fun and engaging way to interact with website visitors. By embedding interactive videos anywhere on your website, you can use them for various purposes such as product sales and guidance, product operation tutorials, customer service, and more. They provide an immersive experience that captures the attention of your audience and encourages them to interact and take desired actions, ultimately boosting conversion rates.)
- Upselling – Product Bundle Discounts: Bundles Upsell | PickyStory（Combo Products – Bundle products as a single product、Buy X Get Y / BOGO、Bundles…etc）、Zoorix – Cross Sell & Bundles by Zoorix (Cart & Product Bundle Upsell, Quantity Breaks, Bundle Builder), Both of these apps are integrated with PageFly, which makes it much more convenient to build product pages using PageFly!
- Upsell – Reorder: Reorder Master ‑ Repeat Orders by HulkApps.com (Interface: Average）、Customer Accounts Concierge by Froonze (Provide customers with more options in the user dashboard, such as adding new addresses, canceling orders, reordering, and displaying recently viewed products)、Orderify
- Upsell – Shopping Cart: iCart Cart Drawer Cart Upsell by Identixweb (Adding upsell options on the shopping cart page before checkout to increase conversion rates)、Cart Upsell, Free Gift Monster by Monster Upsells (In the shopping cart, provide features such as free shipping or free gifts for reaching a certain amount, discounts for buying more, and recommended products. Please note that these features should only be displayed in the sidebar drawer cart, not in the full cart page. After customers make a purchase, they will be directed to the checkout page.)
- Social Proof: Sale Kit‑Social Proof, Pop Up by qikify
- Product Reviews: Loox Product Reviews & Photos (This may be a favorite among designers, and I personally use it as well. It’s comfortable and aesthetically pleasing to use. The app continuously adds new features and has received excellent reviews. Users can upload images or videos to leave comments and reviews)、Ali Reviews ‑ Product Reviews by FireApps (With five-star ratings that rival Loox, it boasts a clean interface and is SEO-friendly. The key point is that both of these options integrate website page editors: PageFly Advanced Page Builder)
- Affiliate Program: GrowthHero (Recommended, suitable for KOL influencer marketing)
- Membership/affiliate marketing: BON Loyalty Rewards & Referral、Referral Candy by ReferralCandy (Empowering your customers to become influencers, allowing them to refer friends and earn rewards.)
- Forms (Contact forms, including advanced field settings for customers to upload files, Shopify member registration forms, etc.): Helium Customer Fields、Powerful Contact Form Builder by Globo
- Comprehensive features: Growave (Membership-based Loyalty and Rewards, Product Reviews, Instagram User-Generated Content integration, Wishlist functionality, Social Login for member accounts. Recently referenced configuration documents: How to embed the Social Login buttons on any page）
- Comprehensive features: Vitals: 40+ Marketing Apps (Including Product Reviews, Pre-Orders, Volume Discounts, Sticky Add to Cart, Currency Converter, Description Tabs, All-in-One Chat, etc.)
- Comprehensive features: POWR (By choosing the Business plan, you can directly access over 60 features, including form building, social sharing, pop-ups, online chat via FB Messenger, reviews, and more.)
- Product Carousel Slider: Product Image Gallery & Zoom、GG Product Page Slider&Gallery by Gigilabs (This newly discovered feature is quite innovative. If the template you’re using doesn’t have a Product Carousel Slider, you can consider trying out the limited functionality of its free version)
- Before and After Comparison Image – Before & After: Widgetic (Before and After)
- Purchase Button External Link: AOD External Links Button (Currently being used, simple setup)、Outlink External Links Button
- Automatic Redirection to Specified URL based on User’s Country Detection: GeoIP Country Redirect/Blocker (While the interface design may be simple, the setup and functionality are user-friendly and easy to navigate.)
- Subscription-based model (not available for Taiwan stores): Appstle Subscriptions & Loyalty、Bold Subscriptions、PayWhirl
- Order Printer (Customize invoices, labels, receipts, packing slips, and other documents): Order Printer is a Shopify app that solves the problem of manually inputting tracking numbers for each customer and the lack of tracking numbers when exporting order information. With this official Shopify app, you can customize the information included in documents, including the order’s tracking number. Please refer to the official documentation for more information.
- Highly customizable reporting and data exporting: Xporter Data Export Tool
- Cash on Delivery (COD) SMS verification: COD Order Confirmation King (Verify the customer’s mobile phone number for Cash on Delivery (COD) orders through SMS with one-time passwords or links, reducing the likelihood of returns for COD orders. The cost of SMS for the free plan is borne by the Store Owner, not the consumer.)
- Shopping Cart Countdown Timer: Countdown Timer Ultimate by KILATECH
- Modifying an existing order: Edit Order by Cleverific (Resolving order modification issues when problems occur, such as out-of-stock products, customer order change requests, or delivery delays)
- Setting for order purchase amount and product quantity (e.g., setting a minimum purchase total for each customer order, specifying a minimum purchase quantity for certain products): Order Limits ‑ MinMaxify by Intillium (Used and functioning properly)、Advanced Order Quantity by Extendons
- Wholesale: EasyLockdown ‑ Wholesale Locks by NexusMedia (Recommended, and the pricing plans are also affordable)、Wholesale Lock Manager by Wholesale Helper (Hiding pages requires developer intervention, which can be a bit cumbersome), B2B Login/Lock & Hide Price by BSS Commerce (There are issues with the execution of the demo site, which is unfortunate)
- Locking specific content to restrict access to only certain users: Locksmith
- Dropshipping: Syncee ‑ Global Dropshipping（B2B Platform For Dropshippers, Retailers, and Supplier
- Linking different colors in a product to respective product pages – Separate Colors as products (This feature allows for the presentation of multiple color options within a single product page. Each color option can be clicked to navigate to its respective individual product page, meaning each color has its own dedicated product page) Color Swatches, Image Swatches by Platmart (I chose this option primarily because of its faster loading speed)、Product Colors by Webyze
- Meta Facebook Pixel and Event Setup: Trackify X Facebook Pixel (In addition to Facebook Pixel, there are also TikTok and Snap Pixel and Event setups available. Compared to the Facebook & Instagram functionalities installed through Shopify’s sales channels, it offers more features and is compatible with many Shopify App page editors, such as PageFly Landing Page Builder. the provided customer support also offers advice on Facebook advertising or Shopify-related questions.
- You can directly use pre-built Shopify blocks and templates (Sections and Templates) while keeping in mind the compatibility of the chosen template: Luna Templates、qwiqode
Start a free trial and enjoy 3 months of Shopify for $1/month on select plans. Register Today! This is an ongoing promotion by Shopify, and it’s uncertain when it will end. Take a look around the backend after registering and feel free to message me if you have any questions.
Researching Shopify websites worldwide
Explanation: Researching brands and companies worldwide using Shopify for website development, spanning various industries, to understand their website design, marketing strategies, copywriting, and business operations. Analyzing the Shopify themes, Shopify apps, and other tools they use. By standing on the shoulders of those who came before, progress can be accelerated!
Searching for Shopify website platforms
BuiltWith
- Introduction: Get a list of 4,766,134 websites using Shopify and 3,298,025 currently live websites (Date: 2021/09/01)
- Title: Search results for shopify
- Description: BuiltWith lookup search results for shopify
- URL: https://builtwith.com/shopify
- Traffic: 23,400 visitors per day
ShopiStores
- Total Records: 378,448 (Data Date: 2021/09/01)
- Introduction: From their website description, it is evident that they monitor websites built using Shopify. It serves as a useful tool for competitor research, providing information such as Alexa scores, revenue growth or decline, social media presence, and more for each website. Currently, they have a list of over 380,000 websites. Additionally, you can log in to SEMRush to view the SEO performance of each website, including keywords, organic traffic, backlinks, and more. Accessing these features requires registering for a SEMRush account.
- Title: #1 Shopify Store Spy Tool – ShopiStores
- Description: Spy on Shopify competitors, best selling & trending & winning products, Shopify themes, apps, fastest growing stores, newly released products, dropship and more.
- URL: https://www.shopistores.com
- Traffic: 7,450 visitors per day
Shopifyspy
- Find 4,652,970 Shopify Stores (Data Date: 2021/09/01)
- Title: The Most Successful Shopify Stores in 2021
- Description: Shopifyspy collects comprehensive data from the most successful and powerful shopify stores, containing rankings on Alexa and different social media.
- URL: https://shopifyspy.com/stores
- Traffic: 7,250 visitors per day
Xpareto Spy
- Total records: 28339 (Data Date: 2021/09/01)
- Title: Xpareto Spy on Top Shopify Stores
- Description: Xpareto- Spy on Top Shopify Stores, Now you Can Reverse Engineer these Proven Winners to Replicate their Success!
- URL: http://xpareto.com
- Traffic: 3,640 visitors per day
Commerce Inspector (Login required)
- Title: Commerce-inspector
- Description: Track any Shopify store’s product launches, best sellers, traffic, sales, ad campaigns, apps, and more.
- URL: https://www.commerceinspector.com
- Traffic: 20,400 visitors per day
Flippa
- Total records: 28339 (Data Date: 2021/09/01)
- Title: Online Business For Sale | 5,000 Listings | Flippa
- Description: No. 1 Marketplace for Online Businesses for Sale. Over 5,000 websites, ecommerce, SaaS and app businesses for sale. Start your search today.
- URL: Search Online Businesses for Sale – Filter by Types: Shopify
- Traffic: 22,400 visitors per day
Shopify
Explanation: Shopify’s official platform also selects the best e-commerce websites built using Shopify through the Shopify Commerce Awards. These awards evaluate websites based on three aspects: UX + FED (User Experience + Front-End Development), Development and Apps, and Overall Builds. You can refer to these award-winning websites, which are certified by the official Shopify team. They provide a comprehensive overview and analysis, making them highly valuable for reference purposes!
- List of Shopify Blog articles (The official Shopify blog also writes about and reviews high-quality e-commerce websites).
- Announcing the Winners of the 2020 Shopify Commerce Awards
- Announcing the Winners of the 2017 Shopify Commerce Awards
- 50 Exceptional Shopify Stores to Inspire Entrepreneurs
- Shopify Theme Store (Shopify’s official theme store has many demos and real-life examples that are excellent)
- Theme Store: Ecommerce Website Templates
Analyzing other e-commerce websites built on Shopify (Leveraging the power of others)
To understand which themes and Shopify apps are used by other successful e-commerce websites on Shopify, you can utilize various tools for analysis. Here are some tools you can consider using:
On the internet, there are Chrome extensions available that analyze WordPress websites, such as WordPress Theme Detector and Plugins Detector. Similarly, considering Shopify’s long-standing development, there must also be developers who have created similar tools. As expected, I filtered through and chose the Shopify App/Theme Detector by Fera.ai. Remember to scroll down in the pop-up window as there might be more results that are not initially visible. On the right side, you will find links to the official website and purchase page of each application, which is very convenient! As shown in the image below, when examining the website of Katris, a foreign company selling cat products, it appears they are using the Minimal theme. The list of apps they use is displayed, although it is important to note that the tool might not capture every single Shopify app they have installed. It usually provides only a partial list, but it’s better than nothing!
- Hextom Shipping Bar
- Mailchimp
- Sales Rocket
- …etc
The detection of Shopify themes is also limited. If a detected theme does not display a specific Shopify theme name, it means that the website owner has renamed the theme within the Shopify backend. Therefore, it becomes difficult to determine the exact theme being used by a website at a glance. If you prefer not to disclose the theme you are using, you can change the “Theme Name” in the backend. Here’s how to do it: Shopify Admin > Online Store > Themes > Select a theme > Click on “Actions” > “Rename.”
I noticed that you have installed over twenty extensions on your Chrome browser. That’s impressive! I look forward to reading your future article where you’ll share how you utilize these browser extensions in various areas, including SEO, website technical analysis, and font analysis in web design. It’s great that you’re exploring and utilizing these tools to enhance your browsing experience and optimize your website-related tasks.
Shopify’s official team has been continuously updating their system, optimizing both design and functionality. You can visit the Shopify changelog to see the monthly updates they have made. It’s quite interesting to see the ongoing improvements and enhancements they bring to the platform.
You are not alone on the journey of opening an online store.
Free Business Tools — Online Tools for Small Businesses
Explanation: Opening an online store often requires the support of various digital tools. In addition to the tutorials and community support mentioned earlier, Shopify also provides free online tools for store owners and entrepreneurs to use. It’s pretty cool! Whether it’s a logo generator or a slogan generator, you can have some fun trying them out!
Link: Visit the website to explore
Slogan Maker
Explanation: Need some inspiration for slogans? You can use a slogan maker, a tool that generates brand slogans quickly. Simply input keywords or product names, and it will automatically generate a list of slogans. While they may not be perfect, they can serve as a starting point for further brainstorming. I often use this tool when clients or teams haven’t provided complete copywriting. To ensure timely website launches while simultaneously designing, using placeholder text can sometimes lack creativity and impact. The combination of “design with placeholder text” can lead to the need for redesigning, resulting in duplicated efforts and consuming team resources. Therefore, it’s beneficial for designers and stakeholders to discuss a “high-level textual outline” in advance, such as the main visual and tagline, as well as headings for each section. This allows designers to stay closer to the desired outcome, reducing deviations. Here are some slogan maker online tools that you can explore for reference:
- Marketing Slogan Generator – Shopify
- Free Slogan Maker Tool – ClickFunnels
- Slogan Maker – Designhill
- AI Slogan Maker – Zyro
- Slogan Creator – Oberlo
There are still areas in the Shopify backend that can be optimized
It is not recommended to use the free images provided within Shopify for importing images.
The image files imported from the free images provided within Shopify are typically very large, often several megabytes in size. Therefore, it is not recommended to use them directly.
The basic functionality of the text editor in Shopify is not very comprehensive
The text editor on the product page is quite difficult to use. The CSS styles can be a bit odd, such as unusually high margin heights for H5 headings. Even when clearing the formatting, copying and pasting text can still result in unnecessary code. To work around this, I manually paste the content into the editor in code view and then switch back to regular view to arrange and format the text. It can be quite cumbersome. Additionally, when copying and pasting, it’s best to manually format the text by adding line breaks and ensuring consistent formatting across pages, as the formatting can vary otherwise.
There isn’t a truly robust media file asset management system available
There is a lack of a robust media file management system in the Shopify backend. Uploading images does not come with folder categorization or search capabilities, making it less intuitive and challenging to use. When dealing with a large number of products and potentially hundreds of photos, it becomes difficult to manage them effectively. The discovery of the “Files” section within the page editor can be surprising. Although the Image Manager Shopify app is recommended by the official platform, its functionality is limited to filtering and searching, and it still lacks the ability to create folders for categorization. Additionally, it comes at a considerable cost. Another app, Variant Image Penguin, focuses on managing product photos but still has room for improvement despite its similarly high price. Therefore, it’s best to wait for better solutions to emerge. In the meantime, using the default methods provided by Shopify is the current workaround.
Currently, Shopify does not support SVG image files. However, as of a major update in 2023, SVG file support has been implemented, which is great news!
Once you’ve experienced using SVG image format, it’s hard to go back! The resolution is excellent, and it’s not affected by the screen size or resolution of computers and mobile devices. The clarity is remarkable, especially for logos and small icons where you don’t want to compromise on quality. Currently, Shopify does not natively support SVG files, but you can refer to their official documentation for more information. To work around this limitation, you have a couple of options:
After uploading images, Shopify automatically compresses them
In theory, this feature is great as it saves time and effort in optimizing images. However, it does limit the ability to have complete control over the image quality. Sometimes, there is a need to strike a balance between image quality and compression to achieve the desired outcome (e.g., allocating 80% for quality and 20% for website performance) rather than prioritizing performance entirely. Designers often have their own preferences and considerations in this regard.
The blog articles in Shopify cannot be categorized or assigned to specific categories
While it is possible to create different “blog names” in the blog feature of Shopify to achieve a similar purpose, the logic behind it is different. This approach would result in separate blogs, and managing articles becomes challenging. Additionally, it requires writing code or installing Shopify apps to display “different blogs as categories” on the same page, which can be cumbersome. Therefore, a workaround is to use “article tags” as a way to categorize articles directly within each individual article.
Currently, Shopify only allows setting one featured image for social media sharing
WordPress allows users to set separate social media images for each page, including blog posts. However, Shopify currently only allows setting one featured image for social media sharing. Although there are Shopify apps like “Social Media Share Image” available, which might offer this functionality (though untested), some users may find it unnecessary to pay an additional fee for this feature alone. Therefore, the decision to use such apps ultimately depends on the individual’s specific needs and priorities.
The term “Social Media Image” or “Social Sharing Image” refers to the image that is specifically designated for sharing on social media platforms. It is the image that appears alongside the link when a webpage or blog post is shared on platforms like Facebook, Twitter, or LinkedIn. This image is usually optimized for social media dimensions and can help attract attention and engagement when shared on social networks.
The limited availability of reviews and information about Shopify apps can make it challenging for users to make informed decisions when selecting an app
Currently, each Shopify app page provides limited review information, mainly consisting of ratings (number of stars) and user comments. Other technical details and purchase/use counts are not available. However, one crucial piece of information that is highly important is the app’s developer’s latest update time. This information allows users to assess whether the app is actively maintained. If an app hasn’t received updates for an extended period, such as one or two years, it may indicate that the app could become abandoned and may not be suitable for use. Given that platforms and the online environment constantly evolve, an app that doesn’t receive timely updates may be prone to numerous bugs and compatibility issues.
Platforms like WordPress Plugins and Themeforest provide users with more comprehensive information to evaluate and choose stable and high-quality digital products. They often offer detailed descriptions, technical specifications, user reviews, ratings, sales data, and information about the developer’s track record. This wealth of information helps users make informed decisions about the reliability and suitability of the digital products they are considering. Having access to such information enables users to assess the quality and reputation of the products and make more confident choices.
Indeed, as a third-party platform, Shopify has some limitations when it comes to backing up your website
If you’re not a developer or don’t want to use paid backup apps for Shopify, you can manually backup certain items on your website. Here are some elements you can consider backing up:
- Theme Files: Download a copy of your theme files, including the CSS, JavaScript, and Liquid code modifications you’ve made. You can access your theme files by going to “Online Store” > “Themes” in your Shopify admin, selecting your active theme, and clicking on the “Actions” dropdown to choose “Download theme file.
- If you use the Shopify app PageFly for page editing, it can be quite distressing if someone accidentally deletes certain pages that you worked hard to create. It’s enough to make you want to cry. While you can backup the settings and format by exporting the entire selection, unfortunately, the images cannot be backed up.
- ……continued
“Practical experience sharing, not just online information compilation.”
I value practical experience as well because it’s through hands-on implementation that we truly discover whether a plugin or app is suitable for our website. There are numerous factors and variables to consider, and some plugins may be outdated but still listed as recommended. Unless the author has personally used and experienced them, their recommendations might be based solely on summarizing various online articles. This approach doesn’t allow for an early understanding of potential real-world issues. So, I encourage you to jump in, get your hands dirty, and gain that firsthand experience!
That concludes the current discussion. I will continue updating the content over the next week. Since there is quite a bit of information to cover, I will be writing this article over a few days. Feel free to come back and visit anytime!
In the future, I plan to share various Shopify e-commerce website-related topics. Here are some of the themes I intend to cover:
The process of designing and building a Shopify e-commerce website
Explanation: This is an overview of the process, design methods, tools used, tasks performed at each stage, thought process, and reasons for setting up a Shopify website.
Please refer to this article for further details: Shopify Web Design Workflow and Schedule
How to improve SEO for your Shopify store
- Before implementing a long-term SEO plan or engaging an SEO agency, there are a few things you can do to prepare
- If you have a website built using Shopify, the link to your sitemap file is as follows: https://www.your-shopify-domain.com/sitemap.xml
- For websites built on Shopify, the sitemap.xml and robots.txt files are automatically generated.
You can refer to the official documentation for more information: Shopify SEO Recommended App: Yoast SEO Practical Tutorial、The Beginner’s Guide to Ecommerce SEO
Email Marketing – MailChimp Newsletter Automation Setup
People who have experience setting up EDM (Electronic Direct Mail) systems usually send out newsletters and can also perform AB testing on subject lines. However, there may be fewer individuals who have specifically utilized MailChimp for setting up automated marketing campaigns. I will provide a demonstration of setting up automation for newsletter marketing and also share where I learned these configuration techniques.
More topics to be continued in the future…
Here are some commonly used tools for website project management:
Project management: ClickUp
Introduction: An all-in-one suite to manage people, projects, and everything in between. Start for free! Stop switching between multiple tools. With ClickUp, manage everything in one platform。 Amazing 5-Star Reviews。Collaboration & Reporting。Does What Others Can’t。
Explanation: I have used various project management tools to streamline team collaboration, task planning, and resource management. However, after discovering ClickUp, I no longer need to use Asana, another tool. This company exudes great confidence and aims to be the top player, surpassing all potential competitors. You can refer to the competitive comparison table to see their ambitions. Moreover, ClickUp constantly updates its software at an astonishing speed. Its functionality keeps improving while maintaining a consistent pricing structure, which is truly impressive. I have been using it for at least ten months and I’m extremely satisfied. I was convinced to switch because I decided to subscribe to their paid plan. One thing to note is that if you use the desktop app version, there might be slight delays in opening and executing tasks when the internet connection is slow or when there are many project files. In such cases, switching to the web version should provide smoother performance.
URL: Learn more
Creative Design: Adobe Creative Cloud
Explanation: Adobe’s software series, including Photoshop, Illustrator, Premiere Pro, and After Effects, are essential tools for almost every designer. They are widely used in visual image design, such as graphic printing, website design, image composition, retouching, icon creation, video editing, and motion graphics. These software applications are compatible and integrated with each other, enhancing efficiency in design workflows. The pricing and offerings on the official website have remained consistent for several years, with a special discount of 40% off for the first year upon immediate purchase. Adobe Creative Cloud provides a centralized platform for managing and downloading all software, making updates convenient. Additionally, users have the flexibility to subscribe to individual software based on their specific needs.
URL: Learn more
Web Design: Figma
Intorduction: Build better products as a team. Design, prototype, and gather feedback all in one place with Figma.
Explanation: Figma, originally positioned as a collaborative UI design tool, has diverse applications. I extensively use it for creating website sitemaps, wireframes, web visual designs, flowcharts, and for collaborative editing with clients and teams. It enables efficient remote meetings, significantly reduces communication and time costs, and serves as an extension of my memory, allowing me to store numerous notes. It’s incredibly powerful! Once I started using Figma, there was no turning back. It surpassed my previous experiences with tools like Photoshop, Sketch, and Axure, and left me amazed.
URL: Learn more
Stock Media Library: Envato Elements
Introduction: Unlimited downloads of stock videos, royalty-free music, photos, graphics, graphic templates & more. The only creative subscription you need.
Explanation: Envato Elements offers a wide range of media assets including photography, graphic design, icon design, video templates, music, sound effects, presentation templates, fonts, 3D models, and more. With a monthly subscription of just $16.50 USD, users can enjoy unlimited downloads, making it incredibly valuable and practical. While the photography selection may not rival dedicated stock image platforms like Shutterstock or iStock, it still caters to the majority of needs and provides cost savings compared to professional-grade stock libraries. The key advantage of Envato Elements lies in its extensive collection of video templates, music, presentation templates, and other resources, making it an efficient and cost-effective solution for various creative needs.
I have personally been using Envato Elements for at least three years, primarily for graphic design, web design, and social media purposes. Professional-grade stock libraries can be quite costly, which is why I often rely on Envato Elements in combination with free stock libraries for the majority of my projects. Unless there are specific requirements or unique content needs, I prefer to purchase premium images sparingly. Envato Elements offers a cost-effective solution that allows me to access a vast collection of assets while keeping the overall project expenses in check.
URL: Learn more
Frequently Asked Questions (Continuously Updated)
Can the font settings be separated for Chinese and English text on a website?
To be precise, setting different fonts for Chinese and English text within the same paragraph can be a complex issue with various scenarios. If the explanations provided so far are still unclear, please feel free to email me with the specific requirements of your website, including how it functions, along with any relevant details or screenshots. This will help me better understand your needs and provide more accurate recommendations.
- In a website, it is not possible to set Chinese and English fonts separately with a single configuration. However, there is one exception. If you are using a multilingual approach, such as installing a multilingual Shopify app, you can check if there are additional class names in the webpage’s code. If so, you can set different fonts for different languages using those class names.
- If you are using built-in template settings or manually writing CSS to specify font styles for certain text, it may be feasible but impractical for websites with a large amount of mixed Chinese and English content. Manually specifying fonts for each individual element would increase time and resource costs for maintenance. However, for small websites with only one or two pages, it could be considered.
- If you are using website building platforms like Shopify or WordPress, not every text can be easily selected and assigned a specific font. It may be challenging or even impossible to modify certain localized content. Unless absolutely necessary, it is generally not recommended to make extensive modifications to the underlying structure of templates or plugins, as it would result in high maintenance costs and difficulty finding others willing to take over the project in the long run.
Note: I would not recommend making modifications to Shopify apps or WordPress plugins through code. Any modifications made may be overwritten or cause issues when the app or plugin is updated by the respective developers. After all, it is maintained by other companies. Unless the app or plugin is no longer receiving updates, it is generally not advisable to avoid updating them. Shopify apps are automatically updated, and in the long term, not updating WordPress plugins can pose security risks.
Website Font Settings: Basic Implementation Methods
- The primary consideration for setting fonts on a website is typically based on the primary language used on the site. For other sections or areas, you can explore the feasibility and limitations of the platform, templates, plugins, etc., to assess whether setting different fonts is suitable.
- In terms of design, it is generally sufficient to have two basic font settings for a website: one for the heading fonts (h1~h6) and one for the body text font. At most, you may have specific requirements for certain sections that require “special design” or the use of a third font. This could include sales pages or landing pages for marketing campaigns or specific call-to-action (CTA) buttons.
- Whether it’s for graphic design or web design, it’s advisable to exercise caution when using more than three different fonts in a single layout, especially on a website.
Note 1: When setting the font for the entire website, it is possible to customize fonts for headings, body text, and other elements. Some templates or Shopify apps allow you to select specific sections or blocks for independent font settings.
Note 2: Although some templates may offer granular font settings, it often comes at the cost of increased time and effort in implementation. In contrast, manually writing CSS to specify fonts is often the most efficient and effective approach.
Whether to directly engage outsourcing for website custom functionality or custom design?
- For custom website functionality, it is recommended to engage an engineer (either front-end or back-end, depending on the specific requirements). However, before approaching an engineer, it’s advisable to research if there are any Shopify Apps available that can meet the requirements.
- For custom website design, it is typically suitable to work with a web designer. However, it is important to consider which parts of the website require customization and whether they can be easily maintained in the future. Not all sections of the website are recommended for direct modifications, especially if they impact Shopify Apps. If your company doesn’t have a designer or engineer proficient in CSS, it is not advisable to overly customize the code, as it can be time-consuming to maintain with little benefit.
- If there is currently insufficient manpower, it is recommended to prioritize core product or service development and marketing strategies. Focus on building a strong product and service offering first, with website interactivity and visually appealing design as secondary considerations.
How to select a web design agency?
Explanation: Everyone has their own criteria for selecting a website design company. Here, I am providing my perspective as a web designer. I have observed many clients who prioritize design and end up facing issues because they mistakenly hired a company that primarily consists of engineers or developers. These companies may lack a strong visual design capability or their main expertise may lie in marketing, leading them to take on various projects to expand their client base. Therefore, my judgment criteria are as follows:
- Understand the team composition of the company: By examining the team composition, you can determine the company’s strengths and main expertise. I place great importance on the team and believe that significant achievements are the result of collective effort.
- Understand the company’s strengths: When I hear a response like “we can do everything,” I tend to be cautious. Every company has its core business and areas of expertise, and it’s unlikely that they excel in every aspect.
- Review the company’s design portfolio: By reviewing their design portfolio, you can get a sense of whether their work aligns with your requirements. This can help you determine if the company meets at least 50% of your expectations.
It’s also important to note that even if a company provides a website portfolio, it’s necessary to further understand which aspects of the website they handled. It’s possible that they only worked on specific functionalities rather than the overall visual design of the brand’s website. In addition to reviewing the portfolio, it’s advisable to inquire about the company’s “design process and methodology,” “how designers execute their work,” “design concepts,” and other practical questions related to web design. Asking a few web design-related questions and assessing their responses can help determine their credibility and level of understanding.
The methods mentioned above are also crucial when I am interviewing candidates for web designer positions while establishing a web design team for the company. Just replace “the company” with “the designer” and the same principles apply.
To ensure objective evaluation, the principle is to not interrupt the interviewee, avoid asking leading questions, and refrain from immediately agreeing or disagreeing with their ideas. Simply listening attentively to their responses and performance allows them to present themselves truthfully, enabling me to obtain objective “data” for assessing their suitability for the position.
Note 1: The difference between a graphic designer and a web designer? If a graphic designer is hired to perform “web design,” it can likely cause difficulties in the actual implementation of the website. These two fields and experiences are indeed different. I will further elaborate on the differences in the future.
Note 2: Of course, if your requirement is to find a company that can provide all-in-one services, not only saving effort and communication costs, many people would also opt for companies that handle all aspects of business, such as integrated marketing or advertising agencies, because they only need to deal with a single point of contact.
How can I see what date a product was published?
Method 1: By appending “/product.json” to the store’s URL, you can retrieve the product data. Then, search for “created_at” to find the “creation date” of each product, and search for “published_at” to find the “publishing date” of the product.
Method 2: Install a paid Shopify app: Xporter Data Export Tool
Reference: How can I see what date a product was published? – Shopify Community (As mentioned by Shopify Staff – Julie in her response on 12-11-2019 at 03:42 PM)
Can I temporarily pause my Shopify store for some reasons and then resume it later?
If you are the store owner and your store is eligible, you can use the Shopify admin interface to temporarily pause operations or completely close your store. There are three options available to do this:
- PAUSE AND BUILD: Continue building your store at $9.00 USD/month. Customers can still visit your store, but they won’t be able to make purchases.
- PAUSE FOR 90 DAYS: Preserve all your information without paying a subscription fee. Customers won’t be able to see your store, and you won’t be able to make any changes.
- CANCEL SUBSCRIPTION AND CLOSE STORE: Completely close your store and cancel your Basic Shopify subscription plan.
For more details, please refer to the official Shopify documentation to learn more.
If your webpage speed score has consistently been low, what should you do?
Regarding the issue of website scores: I have worked on several Shopify websites, and their scores are generally not very high. After completing the website development, it is difficult to achieve a score above 60 in Shopify’s backend speed tests. However, the score is not the primary concern. The website just needs to provide a smooth experience for users, and as long as this aspect is not an issue, it is sufficient. Many SEO companies emphasize the importance of improving scores, which is true. However, in practice, even if the website doesn’t achieve a stringent passing score, as long as it operates well, offers good products, and has effective marketing strategies, it is enough. The score can be gradually optimized in the future without any problems.
Google PageSpeed has always been very strict, and even many high-tech companies’ websites in the United States find it difficult to achieve a passing score (assuming we set 60 as the passing score out of 100). Therefore, we can only do our best and consider it as a reference value. However, I believe there are definitely experts out there who can achieve it, and if I come across any, I will definitely share them here. XD
Apart from using the rigorous Google PageSpeed Tool, I usually start by testing website speed using these two speed testing tools:
- Pingdom：https://tools.pingdom.com – Setting a goal to achieve a score of at least 80 or higher is a good target for website performance optimization
- GTmetrix：https://gtmetrix.com – Setting a goal to achieve at least a grade of B or higher is a good target for website performance optimization
Using these speed testing tools is valuable because they provide a list of “optimizable items,” allowing you to prioritize your optimization efforts. One commonly overlooked area is image optimization, which is often the most significant improvement that can be made. The Shopify official documentation is also helpful, as it distinguishes between controllable and uncontrollable aspects and provides guidance on improving online store speed.
I’ve encountered many websites where images were not optimized or resized, and the original high-resolution files were uploaded directly to the website. This can put a burden on the website’s hosting. Therefore, when checking website speed, the first thing I usually inspect is how the images are being used. While it is ideal to aim for images around 100KB, it can be challenging to achieve in practice. As a general guideline, I suggest keeping individual images under 1MB (1MB = 1000KB) and optimizing them using tools like TinyPNG. I shared an article before on How To Edit And Optimize Images For Web And Performance, which you may find helpful.
Indeed, Shopify offers other “easier” ways to optimize website speed that are worth exploring. Lastly, let’s address the issue of “website browsing experience.”
- First Action: Start by visiting the website and experiencing it firsthand to determine if it indeed feels slow. Then, ask friends to test it out and gather their feedback. Finally, try browsing the website from the actual target audience’s location, whether it’s a specific country or city. At the very least, the actual browsing experience should not feel slow.
- Second Action: Utilize speed testing tools and optimize the aspects listed for improvement. Address the optimizable areas first, and for the parts that cannot be optimized or require technical expertise, seek the analysis of experienced engineers in this field.
Consulting the official Shopify Support is a valuable step to seek their recommendations and guidance on optimizing your website’s performance. They have extensive knowledge and experience in troubleshooting and improving Shopify websites.
Additionally, reaching out to Shopify Experts who specialize in providing services related to website speed optimization can be beneficial. They may have specific expertise and insights to offer tailored recommendations and solutions to improve your website’s performance.
By combining the advice from Shopify Support and Shopify Experts, you can gather a comprehensive set of recommendations and determine the best course of action to enhance your website’s browsing experience and overall performance.
If your friends are interested in learning Shopify website development or web design, feel free to share this article with them! Let more people become familiar with the powerful ecosystem of Shopify and its capabilities.
Design and Marketing Tools
- ActiveCampaign: Email marketing and newsletter system (the best alternative to MailChimp)
- Canva: Online graphic design tool, a real lifesaver if you don’t have a designer on your team! It solves all your marketing, social media, graphic design, and presentation needs with a wide range of templates.
- Envato Elements: Unlimited downloads of paid resources including images, videos, music, sound effects, graphic designs, illustrations, presentation templates, and more. This is a platform I frequently use for various materials.
- GetResponse: All-in-one marketing platform that includes email marketing, landing page creation, marketing automation, and more. You can start with a free account and upgrade as needed. This software is similar to Hubspot.
- PickFu: An online research tool that allows you to conduct tests, optimizations, and instant consumer surveys to replace guesswork. With PickFu, you can instantly gather opinions from up to 500 US consumers. By seeking collective wisdom, it helps you make better business decisions.
- SurveySparrow: Omnichannel Experience Management Platform for conducting customer satisfaction surveys across various channels.
- Qwary: A CX (Customer Experience) platform that helps businesses collect customer feedback and improve shopping experiences and product performance through beautifully designed professional surveys. It allows measurement of NPS, CSAT, and CES.
- Opinion Stage: Create free quizzes, polls, and forms with visually appealing designs and good functionality. It also offers paid plans to increase the number of responses per month.
- Typeform: Elegant online form builder.
- UXPressia: Quickly create professional Customer Journey Maps, Personas, and Impact Maps with various ready-to-use templates.
- Surfer: SEO tool primarily used by content editors. It offers AI-generated SEO copy, keyword recommendations, SEO audits, and a visually appealing interface.
- CopyAI: An AI-powered copywriting generator that creates high-quality copy for your business.
- ABtesting AI: Have you tried optimizing your website with AB testing? Try AI testing with a free plan available.
- Frase: Use AI to assist in searching, writing, and optimizing SEO articles with ease.
- AppSumo: One-time payment platform for discounted digital software (greatly reduces costs).
- Tidio: Design a high-quality online chat tool for your website.
- Help Scout: Online customer support platform (alternative to Zendesk).
- HeySummit: Host virtual online summits.
- SimplyBook: Online appointment scheduling system and app booking software.
- Liinks: One-page multi-link website that integrates multiple social and official website links.
- LearnWorlds: Create and sell online course websites.
- Teachable: A platform for creating and selling online course websites.
- Make: A visual automation workflow tool that allows data integration and seamless movement between various software applications, enhancing work efficiency.
- Piktochart: An information chart design tool.
- ClickMagick: While searching for AB testing tools, I came across ClickMagick, which offers this functionality. After watching introductions from other YouTubers and finding it user-friendly, I decided to give it a try.
- MotionElements: A platform for professional video materials, templates, and plugins.
- MotionVFX: A platform for professional video materials, templates, and plugins.
- Payoneer: A secure and fast one-stop solution for cross-border payments.
- Wise: A cross-border account for international payments and receipts.
- Surfshark: I recently started using Surfshark VPN, and it’s been great! Originally, I wanted to browse certain foreign websites that automatically redirected me, but using a VPN solved this problem.
- Firstory: The most comprehensive and powerful podcast hosting platform for platform deployment, sponsored subscriptions, and advertising revenue. It eliminates all the tedious publishing processes by automatically distributing your recorded audio files to platforms such as KKBOX, Apple Podcasts, Spotify, and Google Podcasts.
- Continuously collecting and researching more…
Why is Irving’s website content regularly updated and refreshed?
- To effectively convey a concept and cover all aspects, it often requires a certain level of explanation. Leaving out even one detail can potentially lead to misinterpretation. In my case, I strive to provide thorough explanations in written form and keep my website updated. The content is typically refreshed on a monthly basis to ensure it remains current.
- I approach content management from an SEO perspective, aiming to optimize the content by considering real user experiences. Based on my personal experience, when searching for a solution, I often find myself navigating through various articles only to realize that some of them are outdated and not the best answer. This forces users conducting Google searches to explore more results, filter and refine their search to bypass articles that are solely optimized for SEO purposes.
- Please note that I’m not criticizing the practice of SEO for the sake of SEO. Different industries, needs, and strategies call for different approaches. There is no absolute right or wrong, only a continuous process of optimization.
Featured Articles
- Irving’s Web Design Portfolio: Shopify x WordPress
- Recommended WordPress Plugins (2023)
- Building Customized Shopify Websites in Two Months (2023)
- How to Customize Shopify Web Design and Layout (2023)
- Getting Started with PageFly: Building Shopify Web Pages Quickly
- Recommended Shopify SEO App: Yoast SEO Practical Guide
- Shopify Website Design Workflow and Schedule
- WordPress Website Design Workflow and Schedule
- How to Create and Optimize Web Images?
- Introduction to Cloudways Hosting and Practical Notes | Building WordPress Websites
If you have any questions, please feel free to fill out the form and leave a message or email me at irving@irvinglab.com. You can also reach out to me through the Facebook or have a direct online chat. Let’s communicate and grow together! You can check out my web design portfolio to see my work. Join the Shopify website design and development learning community on the Line group to exchange ideas and learn together! However, please note that users in the United States cannot join the Taiwan Line group. Therefore, I have also created a Telegram community where valuable experiences from both platforms will be shared and organized. To further understand our services, you can add Irvinglab’s Line@ official account and leave a message for us.
