Web-CMS-Shopify Design¶
Shopify¶
Shopify is an e-commerce platform that allows individuals and businesses to create and manage their online stores.
The platform provides a user-friendly interface that enables users to build and customize their online stores without the need for extensive technical knowledge or coding skills. Shopify offers a range of customizable templates and themes that allow store owners to design their websites to suit their brand's style and needs.
Basic Content Architecture¶
Content architecture refers to the organization and structure of the content within the Shopify platform. To enhance the capabilities of content management in Shopify, you can utilize metaobjects and metafields. These concepts allow you to add additional custom data and attributes to your content, beyond the standard fields provided by default.
Metaobjects: Metaobjects are custom objects that you can create to extend the default content types in Shopify, such as products or articles. These objects are defined much like JavaScript classes and object entries are persisted in Shopify servers. These objects are globally accessible by Shopify applications and as part of Shopify Headless content served to other customer storefront implementations.
Metafields: Metafields are the individual data points or attributes within a metaobject. They allow you to store and retrieve additional information for your content.
Once done, we can now consider Shopify to be our new headless CMS. The difference is that Shopify comes with many advanced built-in object types designed for e-Commerce, which we can just use!
Web Design¶
In our web design approach, we will employ the StartP theme system as our foundation. To enhance its capabilities, we will embed/convert it into REMIX, a technology that seamlessly integrates the StartP theme system into Hydrogen / REMIX, which is a powerful website builder stack that offers extensive customization options and flexibility. This also enables it to be efficiently deployed on Oxygen, Shopify’s hosting service dovetailed with Hydrogen. One of these stack’s advantages is Shopify SSR (Server-Side Rendering) technology which is fast and secure.
By integrating Oxygen with Shopify's SSR technology, we can ensure optimal performance and faster loading times for our website.
Headless Content Data¶
This refers to data persistence that can be queried by applications, even ones that are outside Shopify’s ecosystem. However, to make Shopify the home of content, we need to migrate certain data objects from Strapi to Shopify, a one-time effort to move data. These objects encompass products and articles, which will be mapped and integrated into Shopify's built-in data structure. Additionally, we plan to incorporate additional data structures such as Item, standardProperty, category, and more within the Shopify ecosystem. This migration allows us to leverage the capabilities of Shopify's content management system while ensuring a smooth transition from Strapi.
As a result of this migration, our goal is to make all the content we created on Strapi available on Shopify. This will be achieved by either utilizing Shopify's built-in objects, such as products and articles or by creating custom data meta objects.
Web Design and data hierarchy¶
In our web design approach, we follow the principle of "separation of concerns" by utilizing a combination of themes and metadata. Our selected theme, StartP, offers a variety of style collections.
The data structure of the theme is organized in a hierarchical manner, resembling a tree structure. At the top level, we have the "site" object, which represents the overall website. Within each site, we can have multiple "pages," each containing multiple "sections," and further divided into multiple "blocks." This hierarchical structure allows us to organize and manage the content of our website in a structured and intuitive manner.
Hierachical Structure :
Below is a visual :
To facilitate page design using Hydrogen, we will create the site data as globally accessible meta objects. This means that the site data can be accessed and utilized across multiple pages, allowing for consistent design and easy management.
Furthermore, this design approach also provides flexibility to accommodate multiple sites within a single Shopify store account, which we refer to as our "Master Store." This means that we can create and manage multiple websites or brands using a single Shopify account, streamlining our operations and centralizing our content management efforts.
Marketing Team Design¶
The marketing team plays a crucial role in designing, modifying, and updating websites within our system. They primarily accomplish this through two key activities:
- Creating or modifying site data objects (including sites, pages, and sections)
- Selecting a specific site object from a list of designed sites.
When the marketing team creates or modifies site data objects, they essentially define the website's structure and content. This involves specifying the site's hierarchy, pages, sections, and blocks. Each site object contains all the necessary content already defined within its page, section, and block hierarchy.
To work on a particular site, the team selects a site object from a list of designed sites. This selection allows them to access and make changes to the specific site's content. The list provides an overview of the various sites available, and the marketing team can choose the appropriate site they want to design, modify, or update.
Web Designer Interface¶
The web designer interface provides a convenient platform within the Shopify admin panel for the marketing team to manage and customize the website's design. To facilitate this, data-entry forms are available for each meta object defined in the system.
These data-entry forms enable the marketing team to input and modify content and attributes associated with each meta object. Their design interactions are strictly limited to these forms, ensuring that they do not need to directly manipulate the web page design.
To maintain consistency and coherence, the marketing team can choose from a curated list of styles, which is a subset of the StartP theme's design options. While they can refer to the StartP demo for inspiration and reference, it's important to note that they cannot directly alter the page behaviour.