Shopify Store 2.0 - Metafields and Shopify CLI

Your store design matters not only because it affects your business experience with your brand but also because it affects your ability to convert visitors into customers. 

Learning how to customize your store is an essential skill to any eCommerce store owner; it is imperative to learn how to adjust your store to address every customer's questions while delivering an aesthetically pleasing experience. 

Supporting your e-commerce success - Shopify Online Store 2.0 new features and tools make it easier to control your store's aesthetic. By giving you access to more data with revamped metafields and providing your development team with a streamlined set of developer tools, you enjoy greater levels of flexibility and customization. Learn more about Shopify 2.0 themes and Online Store 2.0 theme architecture, here. 

The highlights of Online Store 2.0 Shopify:

• Sections Everywhere: Sections are now available not just on the homepage but for every page when you migrate to Online Store 2.0 Shopify.
• Theme App Extensions: AppsIntegrate any Shopify app into your store without touching theme code by using app blocks within the Theme Editor.
• Improved Metafields:  You can quickly reinvent your store infrastructure with improved metafield to create, customize, scale, and monetize on Shopify. 
• Developer Tools: As the future of commerce relies on creative expression at every touchpoint, introducing new dev tools such as Shopify Github integration, Theme Check, and a new Shopify CLI tool will help you build better commerce.
• Dawn Theme: It is the first reference theme for Online store 2.0 and it is 35 X faster than the Debut Shopify Theme. You can learn more the theme in our Shopify Dawn theme review blog. 

You can learn more about what makes Shopify Online Store 2.0 special and the difference between Shopify 1.0  and Shopify 2.0  in this Shopify Online Store 2.0 introduction.

Unlock creativity with Shopify Online Store 2.0 improved metafields:

While Shopify's product template limits you from storing extra information about the product, the improved Shopify Metafields in the Shopify Online Store 2.0 allows you to easily add custom fields to the required product page or variants accordingly. 

So for merchants who circumvented the Shopify 1.0 limitations with metafield applications that gave the ability to store custom fields, improved metafields will allow you to create unique experiences that will bring your store to life. That is, once configured by Shopify developers, you’ll now be able to define and edit the product content in a few clicks. Read more about Shopify Online Store 2.0 benefits for merchants and developers. 

That means you can use metafields to store additional product information about a product. The improvised version of Online store 2.0 Shopify Metafields will significantly increase flexibility to capture and represent data specific to your brand. You can now connect metafields to apps or your theme that anyone on your team can access. 

For example, 

If you want to show the Size Chart for your products, you can create metafields and generate their value dynamically. Below we show how to create metafields and fetch the value dynamically. 

Creating Shopify Online Store 2.0 metafields from Customizer 

Step 1: Log in to your store backend using the following link.

Step 2: Select the "Customize option beside your current theme option in the Online Store.

Step 3: Select the Default product in the drop and click on the "Add block”option in the side bar.

Step 4: Select the theme block style you want to display the information. In our case, let's select the "Collapsible tab" option.

Step 5: Click on the “Collapsible tab” option to change the heading and add the information.  

Step 5.1:  In the Tab Content option, enter the information you want to display. Please note that the values you input here (30 inches) will be the same across all the other pages until you fetch them dynamically by creating metafields. 

Step 6: To fetch it dynamically, meaning different values for each product but the same fields, you must select the "Dynamic Source" icon on the top right of the "Tab Content" option.

Step 7: Select the metafields and click on the "Insert'' option. Later, click on the "Save" option to save the changes. 

(1) 

(2)

If you don't have the metafields created: 

Action 1: Select the "Add metafield" option from Step 6 

Action 2: Follow the screen and click on the “Products” option to add product metafield definition as required for your store. Later,  click on the "Save" option.

(1)

(2)

If you need help setting up metafields, you can also connect with HulkApps Shopify Online Store 2.0 experts. 

Action 3: Head towards your product page, and you will find the metafields defined in the "Product Metafield." You can enter your required values.

Action 4: Repeat Action 3 for all the product pages where you want to display the special information.

Action 5: Head back to Step 6 and complete the steps.

If you want  to make your theme compatible with Shopify Online Store 2.0, read our step-by-step Shopify Online Store 2.0 migration guide. 

Accelerate Shopify Theme development with intuitive developer tools

Shopify Online Store 2.0 introduces a whole new way for developers and merchants to make advanced customizations more efficiently than ever, introducing the Shopify GitHub integration, an updated Shopify CLI tool, and Theme Check. 

Shopify GitHub Integration

Say No to any more duplication of theme or complex way of implementing the changes as Shopify integrates GitHub. The integration allows you and your team to collaborate, implement and merge the changes safely before populating them, plus you have got version control. The Shopify GitHub Integration will save time and improve the efficiency of your development process.

Shopify CLI

Alternative to the Shopify theme kit, the Shopify CLI is improved to support Shopify Online store 2.0 flexibility in getting started. Previously, you might have had your developers work on Shopify CLI to quickly generate Node.js and Ruby on Rails apps and app extensions, but now you can extend it to bring in new functions for your store. 

As Shopify CLI allows you to initialize a new theme project using the new Shopify theme, Dawn, as a starting point, push and publish themes from the command line and run Theme Check, Shopify CLI accelerates your theme development. 

The Shopify App CLI tool can speed up your next project by automating a lot of the steps you previously carried out manually. Creating a private or custom app using the CLI tool quickly scaffolds a project by automating many common development tasks, such as creating the project, copying over the credentials, and setting up an HTTP tunnel to connect to your app while in development.

The Shopify App CLI tool is designed to help devs build apps for all Shopify merchant's requirements. Whether you want a private or custom Shopify App for your store or make some development changes, you can check out Shopify Premium Development Service Package. 

Conclusion: 

Creating a store with Online Store 2.0 features gives you more creative flexibility in designing your online store even without coding knowledge and the developer's help. Isn't it awesome? 

If you're interested in exploring Shopify Online Store 2.0 and how it could help your Shopify store, our team will be happy to implement or migrate your store to the new Shopify Online Store 2.0.