How to Customize Shopify Web Design Layout

Analyzing the practical steps of customizing website pages in Shopify and comparing the differences between Shopify and WordPress in page creation. (Last updated: February 3, 2023)

This article is crucial for building a Shopify website, as it addresses a direct showdown! We believe that all users who are starting to use Shopify for website development will encounter the most fundamental and important requirement: “How to create custom web page designs and layouts.”

This article’s content will undergo significant updates in the near future, with additional comprehensive explanations and video tutorials for assistance. Remember to check back periodically within the next couple of months. If you want to be the first to receive the latest updates, you can join the official Irvinglab Line or Telegram.

Additionally, at the bottom of this page, there is a pre-recorded video comparing the pros and cons of Shopify and WordPress in terms of web page layout and design. This video aims to help everyone understand the experience of using a mature web page editor. The article will be periodically updated with more content. Feel free to bookmark and share it!

“Firsthand Expertise, Not Just a Summary of Web-Based Information” – Irving

Solution for Visual Design and Layout in Shopify Web Pages

5 Methods for Customizing Web Page Design in Shopify

1. Find suitable free or paid templates (paid versions offer more features).
2. Install a Shopify app with page editing functionality (considered the best option for most users, search for keywords like “Shopify Page Builder”).
3. Utilize Shopify 2.0’s built-in page creation templates and advanced settings with metafields.
4. Hire a developer to write custom web page code (higher cost, time, and communication requirements).
5. Edit web page code manually (suitable for users with web programming knowledge or development experience).

The combination of the above methods can be as follows: Use the first and second methods to establish the foundation of your Shopify website and have greater freedom in page editing. Then, for specific special features or requirements, utilize the third method to find a freelance developer or hire an external engineer to address those needs.

The following presentation is from a Shopify Meetup event in 2022 where I shared insights on “How to Customize Shopify Websites” using five different methods. These methods provide an overview of options that can be chosen individually or combined based on specific needs and available resources.

Irving 爾文的實戰分享 Shopify Meetup 2022 – Irvinglab 爾文實驗室

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.

---

When considering the creation of a Shopify website, the following five methods can be used as a step-by-step approach:

Step 1. Find a suitable free or paid template (paid versions offer more features).

Start by searching for suitable templates in the Shopify Theme Store and ThemeForest — Shopify Templates. Filter and narrow down the options based on your expected requirements or general direction. Paid templates usually offer more diverse features and designs. Having a solid foundation with a chosen template will save you time and effort in the long run. However, you can also start with a free template, but keep in mind that customizing it later will require significant time and resources. Visual design modifications and feature settings will incur a considerable time cost. There is no absolute rule, as it depends on individual needs and budget. Some people prefer free templates and search for alternative ways to add desired features by following tutorials or videos and editing code themselves. While this approach can save money initially, it may not be cost-effective in the long term. This is just a personal opinion and should be considered as a reference.

It is recommended to at least find a template that aligns with your current or future potential requirements. This way, you can save yourself some effort and time in the customization process.

You can also refer to Shopify’s official articles, where they recommend both free and paid theme options. These articles can provide valuable insights and guidance in selecting the right template for your Shopify website: Browse the Best Shopify Themes for Your Online Store

I have personally used the Minimal (free theme) and Prestige (paid theme: $180 USD) for Shopify. When you actually work with them, you’ll notice that each theme offers different “basic page layouts” and “interactive features.” So, it’s important to carefully browse the theme’s page description, try out the demo, and explore the available features. This way, you can get a better sense of the theme before making a purchase. It’s worth mentioning that in the Shopify Theme Store, you can try installing the paid themes (“Try theme”) to preview them, but you won’t be able to publish them until you make a purchase.

I have developed my own SOP (Standard Operating Procedure) for trying out themes. During the trial period, I open all the pages of the theme to explore. This is because the demo may not showcase all the available features and options provided by the theme. By doing this, I can understand the limitations of the theme and document each screen (I use Figma for this purpose). This not only facilitates communication with my team or clients but also helps me in remembering and taking notes effectively.

Considerations after purchasing a Shopify theme

After purchasing a Shopify theme, it is important to note that the theme license typically allows you to use it on a single Shopify website only. The official policy states that a paid Shopify theme can be applied to one Shopify store. It is not permitted to use the same theme on multiple websites without obtaining additional licenses for each site.

When you purchase a paid theme from our theme store, it is licensed only to 1 store. You will need to purchase it again on your second store. More info here: Refer to Adding, previewing, and buying themes

Most Shopify themes that are purchased do not come with the exact images and text content as shown in the demo. Instead, you will typically receive a blank slate with basic theme settings, and it is up to you to customize and add your own images and text. Some themes may offer the option to import sample content, but it is not a standard feature across all themes. It’s always a good idea to carefully review the theme documentation or contact the theme developer to understand the specific features and functionalities included with the theme you have purchased.

To understand the features and styles offered by each theme’s template, it is recommended to create separate pages for each template provided by the theme. This includes creating Page Templates, Product Templates, Collection Templates, and so on. You will need to manually create and configure each page and temporarily populate them with placeholder text and images to see how the layout looks in practice. This way, you can explore and assess the functionality and visual presentation of each template.

The theme does not include all the Shopify apps installed in the demo, so it is necessary to analyze and identify the apps used in the demo separately, and then manually install them one by one. This can indeed be a challenge and may give the impression that purchasing the theme will provide a worry-free experience. However, it’s important to note that the theme and apps are separate entities, and installing the desired apps is part of customizing the functionality of your Shopify store to meet your specific needs.

To analyze whether a website is built with Shopify and identify the themes and Shopify apps used, you can use tools like Shopify Inspector and Shopify App/Theme Detector by Fera.ai. However, it’s important to note that these tools may not provide complete information. A more advanced approach would be to inspect the website’s code to find clues. For example, if you purchased a theme from the official Shopify Theme Store, you can open the website’s “View Page Source” and search for “theme_store_id.” If the ID is, for instance, 796, you can then search on Google for “shopify theme 796” to find the theme. If it shows “null,” it might indicate that the theme was purchased from a third-party platform, which requires further investigation. You can refer to the article “How to Find Out Which Shopify Theme a Store is Using” for more detailed instructions.

During the trial period, you can preview up to 19 paid themes in order to compare them before making a purchase. If you exceed this limit, you may encounter restrictions. One possible solution could be to remove previously installed themes to continue testing new ones. You can experiment with this approach and see if it allows you to continue testing the desired themes.

To learn more about the trial period and using themes on Shopify, you can refer to the official documentation: Adding, previewing, and buying themes

---

Step 2. Install a Shopify App with page editing functionality (the best choice for most users)

Purchasing a paid Shopify App that includes a page editor or allows you to freely insert sections into your pages is essential for creating more flexible layouts and customizing your website’s functionality. Without such capabilities, websites built using the same theme may end up looking very similar. Free versions of apps often come with limitations, such as being restricted to a limited number of pages. Whether or not to purchase a paid app depends on your specific needs. If the theme you are using meets your requirements, it may be sufficient to observe and evaluate before making a decision.

How to find a suitable Shopify website page editor?

When it comes to WordPress, I personally prefer using WPBakery Page Builder and I’m quite familiar with its strengths and weaknesses. However, when it comes to Shopify, I start by searching on the official website and enter the keyword “Page Builder” in the Shopify App Store. From the search results list, I choose the top two or three apps with the highest ratings and the most reviews to determine whether to install and try them out. You can also refer to this article titled “14+ Best Shopify Page Builder Apps” which provides ratings and overviews for various tools.

Since I had limited time, I couldn’t compare and test each app individually. Therefore, I decided to base my judgment on the rating being higher than 4.5 stars and having a significant number of reviews to ensure credibility. Based on these criteria, I selected two Shopify apps: PageFly Landing Builder and Shogun Page Builder.

I initially chose to use the Shogun Page Builder but ended up removing it within three minutes. I have never experienced such a difficult-to-use page editing method before. It was frustrating and hindered my progress in many areas. A few months later, I decided to give it another chance, only to abandon it once again. The main reason might be that it was not intuitive and possibly because I was already accustomed to using WPBakery Page Builder, which is highly functional and user-friendly in WordPress. This stark contrast in user experience caused immediate dissatisfaction and frustration. It’s perplexing why marketing videos often portray such plugins as simple and easy to use, but the reality falls short of expectations.

Shopify Page Builder： PageFly Landing Page Builder（Recommended）

The second one I tried was PageFly Landing Page Builder After exploring its features and understanding the categorization and logic of setting up pages, I found it to be a good starting point. However, when it came to the core aspect of designing page layouts, I encountered some difficulties. Fortunately, PageFly has a fantastic feature: an online chat support within the app. I reached out to their technical support, and one of the representatives promptly recorded a basic instructional video with English explanations for me. It was very convenient! I continued to ask them various questions, and I believe I asked more than fifty in total. They were able to address most of my needs, and some features were still in development, with ongoing product updates.

Before deciding to install this app, you can visit the official video channel to get an idea of how it works and familiarize yourself with the interface. It’s helpful to see if it aligns with your expectations. Additionally, you can explore the official help center page to assess the clarity and completeness of the documentation. This will give you a preliminary understanding of the app’s maturity and support resources.

Tutorial: PageFly Video Tutorials
Help Center: PageFly Help Center

Yes! I chose PageFly Landing Page Builder as the primary tool for “page creation and design layout” for this Shopify website. It’s truly a blessing for both web designers and beginners setting up their websites. Of course, there is still room for improvement, but it can at least meet the basic requirements for flexible layout design. I believe it will continue to mature and become as comprehensive as the page editors in WordPress. If you have a basic understanding of HTML/CSS, it will further enhance your efficiency in editing pages.

Finally, in 2023, I have released a new article titled “Getting Started with PageFly: Building Shopify Webpages Quickly“. In this article, I provide a comprehensive overview of PageFly’s basic operations and key features. I have also recorded a video introduction to further illustrate the details. With a wealth of practical experience to share, I plan to create a series of informative articles that will walk readers through the process step by step.

Official PageFly Tutorial Videos

If your company or you have installed the Shopify App – PageFly Page Builder and want to customize your web design layout, you can refer to their official tutorial videos titled “TUTORIAL – PageFly Elements.” These videos are very easy to understand and provide step-by-step guidance. If you encounter any issues during the implementation process, you can first watch their YouTube tutorial videos or ask questions to their official customer support through the Live Chat feature available in the bottom left corner of the PageFly backend. Additionally, if you get stuck at a specific point, you can join the active Shopify Line community in Taiwan, share your question along with screenshots, and I can help research and assist you. For those who don’t have a team of developers or web designers proficient in CSS, using the Shopify App – PageFly is indeed one of the best solutions available.

There are several advantages to choosing PageFly as your Shopify page builder:

1. Since I use PageFly daily, feel free to ask me if you have any questions XD (However, some settings can be cumbersome or require the use of other Shopify apps or custom CSS to achieve. You may need to spend time testing them yourself, but I can provide general guidance.)
2. After installing PageFly, you can access their online customer support in the bottom left corner. They are very responsive and helpful in addressing any inquiries in English. Recently, their team has implemented real-time translation for Chinese messages, so when you type in Chinese, they should receive instant translations in English.
3. They have been making rapid progress and have introduced new features recently (which are increasingly aligning with my ideal requirements).
4. Their official tutorial videos on YouTube are quite extensive: PageFly Shopify Page Builder App — YouTube Channel.

Note: No matter how powerful the features are, they are not a one-size-fits-all solution. The actual suitability of the solution depends on the specific needs. These types of apps typically provide extensive customization support for basic web design and layout functionalities. In practice, designers who are proficient in CSS may have an advantage as combining this app with basic CSS skills can create a more seamless and tailored experience.

Features

PageFly has a feature called “Saved Section” which was not available in the past. After two years of anticipation, it finally emerged in 2022 and has gradually matured. This feature is incredibly important for building efficient websites as it enhances website update and maintenance efficiency while saving manpower and time costs. It aligns with the concept of “not reinventing the wheel.” Moreover, this feature has been continuously optimized to its current state, allowing users to create “repetitive content” as Saved Sections within PageFly. These Saved Sections are not only compatible with pages created in PageFly but also seamlessly compatible with Shopify 2.0. For more information, you can refer to the official PageFly Help Center documentation: https://help.pagefly.io/manual/saved-section/

Note: The number of Saved Sections that can be created depends on the chosen plan. For example, the Free plan allows only 1 Saved Section, while the Silver plan offers 5. The actual quantity limitations should be based on the information provided on the PageFly official website.

PageFly Twttier

PageFly’s official Twitter account is a great resource to stay updated on their latest announcements, events, software updates, and integration with other Shopify apps. It’s a valuable source to keep track of the latest developments and can be incorporated into your page-building planning.

When using PageFly, there are a few common issues that users may encounter:

If you are using the Prestige Shopify theme and have installed the PageFly Landing Builder app, you may encounter an issue where the product images appear blank on the mobile version of the product page. After consulting with PageFly’s customer support, it was determined that there was a conflict between the Prestige theme and the PageFly app. Their engineers provided a code fix, which resolved the issue, and the product images now display correctly. (PageFly’s live chat customer support is indeed very efficient)

To handle conflicts between Shopify themes and apps, here are some approaches:

1. When encountering conflicts between a Shopify theme and a Shopify app: I would first reach out to the app developer to address the issue with their product, rather than contacting the theme developer. This is because Shopify apps generally have more frequent updates compared to themes, and I may not frequently update the pre-configured Shopify theme, or even consider doing so.

2. When encountering conflicts between Shopify apps: If you encounter conflicts between two Shopify apps, it's possible that each app developer may point fingers at the other. In such cases, conflicts are more likely to occur between apps of similar types or functionalities. It's recommended to choose one app from the conflicting options or select a multi-functional app that covers your requirements.

---

Step 3. Utilize Shopify 2.0’s Page Templates Feature with Advanced Configuration using Metafields.

I have heard that many merchants want to save money by avoiding the cost of a page builder app while still customizing their webpage layouts. So, what can they do in this case? Well, there is an alternative approach they can take. They can directly use the page templates offered by Shopify 2.0 to create numerous page templates, with each template representing a different layout. This way, they can generate a variety of page layouts and content.

However, this solution is not ideal. Imagine if they need to create 100 pages, they would have to create 100 individual templates. This approach becomes difficult to maintain and is impractical. Moreover, it deviates from the intended purpose of the “template” feature.

While using Shopify 2.0’s page templates can provide some customization options, it is important to consider the scalability and maintainability of this approach. Investing in a dedicated page builder app may offer more flexibility and efficiency in the long run, especially if you require frequent updates and dynamic content on your website.

Fortunately, Shopify’s backend allows the addition of metafields, which are essentially variables. After creating the required metafields, they can be inserted into the template pages. While this approach sounds promising, it still has certain limitations in terms of customization. The implementation process may also encounter challenges, depending on the chosen template and the lack of knowledge in HTML/CSS for modifying the pages.

Step 4. Hiring a developer to write webpage code involves higher costs, time commitment, and communication efforts.

For specific needs that cannot be addressed by existing templates or dedicated apps, outsourcing to a skilled developer can be a viable solution. For instance, if a chosen template lacks a slider for product images and only displays multiple images in a row, or if you want to modify the image display to full-screen, you can explore options on the official Shopify Experts page or third-party outsourcing platforms to find companies or developers capable of handling such issues. Alternatively, you can also reach out to me directly for assistance. ^^

Regarding the issue of template homogeneity, some users of popular e-commerce platforms in Taiwan, such as Shopline or Cyberbiz, have shared with me that their templates are not as visually appealing, have limited choices, and tend to look similar to other websites on the same platform, making it difficult to create differentiation. The key point is that platforms like Shopline or Cyberbiz are closed systems and do not offer the same level of global access to third-party development of various customizable templates or plugins as Shopify does. This is why Shopify, originating from Canada, stands out with its abundant choices, extensive resources, and flexibility for users.

Step 5. Editing webpage code on your own can be considered if you have a basic understanding of web programming or development experience.

If you have a foundation in web programming, including HTML/CSS, JavaScript, jQuery, etc., and you want to customize your website by editing code on your own, it is worth considering learning Liquid, the programming language used by Shopify. You can explore resources such as the official Shopify Partners blog “Learning Liquid,” the ShopifyDevs YouTube channel, the official Shopify Liquid documentation, Shopify Liquid GitHub repository, or browse through Shopify Open Source Software Projects (which is an amazing resource!). Additionally, you can leverage the power of AI conversation using ChatGPT, a popular AI chatbot in 2022. I have found it to be a helpful tool for development assistance, as it can provide automatic responses and generate code snippets for reference. It’s super cool!

I will gradually start sharing how to get started with editing Shopify Liquid language in an easy way, so that even beginners can reference and execute it. Stay tuned for more updates!

---

To learn about the best practices for Shopify SEO, you can refer to my latest article titled “Recommended Shopify SEO App: Yoast SEO Practical Tutorial” It provides insights and guidance on utilizing the Yoast SEO app for optimizing your Shopify store’s search engine visibility.

---

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.

You can try out Shopify and PageFly for free to learn and explore their features

1. Register for Shopify (there’s a special promotion offering $1 per month for the first 3 months, but the duration of the offer is unknown, so take advantage of it while you can).
2. Install the Shopify app: PageFly (choose the free plan for learning purposes).
3. If you have any questions, you can email me at irving@irvinglab.com or join the Shopify Website Design and Development Learning Community on Line to connect and learn together!

---

Hello! I'm Irving Chen, a senior web designer. Let me quickly introduce my website development experience. I have several years of experience in using WordPress for website development and design projects. I am familiar with the limitations and flexibility of platforms like Squarespace and Wix. These platforms often have significant limitations, where you're confined to their templates and have limited options for customization. Making specific modifications can be difficult and frustrating. On the other hand, WordPress offers a high degree of flexibility. You have complete control over the backend, the ability to modify page code, and access to a vast array of templates and plugins to enhance your website's digital capabilities. However, I recommend sticking to the original functionality as much as possible and avoiding excessive modifications to the website's structure and plugin code. This is because WordPress templates and plugins are developed by dedicated developers or companies, and updates are released periodically. These updates may not be compatible with older versions of WordPress and could potentially cause compatibility issues.

The role of a web designer primarily focuses on visual web design, with frontend programming as a secondary skill. The ratio is typically 9:1, where the emphasis is on designing web visuals. A basic knowledge of frontend programming languages such as HTML and CSS is necessary, and additional experience in understanding basic JavaScript syntax, working with frontend frameworks like Bootstrap, jQuery plugins, and using website platforms such as WordPress and Shopify is considered a plus.

Shopify vs. WordPress: Differences in Web Page Layout and Design Settings

Many people who are familiar with WordPress and adept at using various WordPress plugins may assume that building a website with Shopify is as easy as platforms like Wix or Squarespace and that they can quickly get the hang of it. If you or your boss have no specific requirements for the website and are satisfied with a basic template or a complete off-the-shelf solution, then using a regular website builder platform may meet your needs. However, if you have more ideas and creative concepts for your website, you will soon discover that it is a daunting task, especially when it comes to the fundamental aspect of “web page layout,” which seems almost immovable.

I initially held the same mindset, thinking that I could easily conquer Shopify when it came to building websites. However, to my surprise, as soon as I started using it, I realized that the most crucial and fundamental aspect of “web page layout” had limited functionality in its default state. This forced me to seek alternative solutions.

I have recorded a short video to provide a quick overview of the differences between the two platforms when it comes to constructing general page layouts (without analyzing product pages and blog pages).

Below is a quick comparison of the “Page Editors” plugins between WordPress and Shopify:

WordPress

1. The default Gutenberg Editor: The Gutenberg editor is constantly evolving, free, and offers a considerable number of settings. It is fairly easy for the average user to create page layouts.
2. Plugins like Elementor, Divi Builder, WPBakery Page Builder, etc., offer popular and powerful page builders with diverse and highly customizable features.
3. These editors not only provide a wide range of features but also allow for the addition of various add-ons to enhance the firepower and create exciting page structures and interactive effects.
4. They are also user-friendly when it comes to writing CSS, allowing the naming of IDs and classes for more flexible style customization.
6. Depending on the specific page builders, they offer various pricing models, including free versions (such as Gutenberg), one-time payment options (like WPBakery Page Builder), and subscription-based plans (such as Elementor Pro).

Shopify

1. The default editing interface in Shopify is similar to a basic text editor with limited settings, similar to writing a blog post.
2. To enhance the page building capabilities in Shopify, you can explore Shopify Apps, similar to WordPress plugins, available in the Shopify App Store. There are several highly rated page builders to choose from, with ratings of 4.5 stars or above. One popular option is PageFly Landing Page Builder. However, compared to the extensive range of page builder plugins available for WordPress, there is still room for improvement in terms of the level of customization and user experience.
3. These page builder apps in Shopify provide a few basic layout options and limited integration with other Shopify apps.
4. You can write CSS code and use ID and class names for more flexible styling options.
5. It’s important to note that these page builder apps in Shopify generally operate on a subscription-based model rather than offering one-time payments. This means you would need to provide your credit card information for monthly automatic billing.

In WordPress, extensions are called plugins, while in Shopify, they are referred to as apps.

WordPress plugins and Shopify apps serve similar purposes.

---

---