What is SHOPIFY's meta object? [Part 2] How to extend the display by customization by editing LIQUID code

Does your store provide information that you want to know and information that the store wants to know?
By providing a variety of information, the angle of approach to customers who visit the store can be expanded, resulting in improving customer experience and improving engagement.

Former articleSoHow to customize the display using the meta object of SHOPIFY, how to actually create and display a metao must -go from the content of "Metao Basket".I told you.

Summari of the previous article

• What is Metao Budget?

• Differences from metafield

• Define an object called creator (Creator)

• Add an entry

• Create an individual page for the creator entry

• Create a list page of the creator entry you created

Last time, all were implemented with no code.
This time, I will explain how to edit the code a little as the second part and expand the display! If you haven't touched the code, it's okay! I will tell you for each step.

This article will expand the display based on what you created in the previous article, so if you haven't read the previous article yet, please check it out.

This section is still no code!

What to do in this section

• Use product metaphield to link the creator to the product

• Create a template for the product page that displays the creator

• Change the product display template

  Working page: Settings → Custom data  

From the definition of the metafield, select the product and click "Add the definition"

Enter the name, specify the "Metao Becture" in the reference check → Select the already created Creator Metao Bectage, select and save "1 entry".

  Working page: SHOPIFY management screen → Left menu → Product management → Applicable product page  

Select the product you want to link the creator and scroll down. Then you can see that the metafield "Creator" created earlier is displayed.

Select and save the creator you want to link in the column.

* It is assumed that the creator's metallic entry has already been created.
See the first article for the method.

  Working page: SHOPIFY management screen → Left menu → online shop → "Customize" for the theme during use 

Select "Product" from the "homepage" at the top of the customizer, and then select "Create a template".

Set a name that is easy to understand for management and create a template.

From "Add Section", select an image with text and add it to the page.
(This time, the image with a text is selected, but if it suits you, the section is okay).

Select Creator and select Image from the "Connect dynamic source" icon in the image with text.

Similarly, set the name and the description on the text.

Set the link to the button to be an individual page for the creator.

When it is completed so farThe creator information was displayed on the product page!

I feel a little troublesome ...? Is it just necessary to set the metafield to the product and display it ...? Maybe it feels like that at first.

but, There are great benefits to using a metao must -go! 
It is assumed that John DOE's work, which is created as an example, is exhibited in the store. Therefore, when changing John's description, if you are using a metafode, you need to change the value of the meta field with all 50 products.

It's so crazy ... If you have more than 200 items, you'll get tired just to imagine the trouble.

If you are using a metao must -go Just change the information of John, which is created as an entry for a metao must -do, all 50 product information will be changed at the same time. ！

As an aside, in the world of engineers, "" Don't Repeat Yourself "There is a word.
The same description is not repeatedly written in various places in the code (not such specifications).

As an engineer, I feel that there is a part that leads to how to use the metao must be used.

In the previous section, we talked about how to display the information of the creator on the product page.
This time, on the other hand, let's display the list of products on individual pages for the creator.

This section edits a little Liquid code. I will explain it in an easy -to -understand manner, so please try it for each step.

What to do in this section

• Add products to the creator's Metal Object Entry

• Create a section to display the list of products on the creator's individual page

• Add a section to the creator's individual page

  Working page: Settings → Custom Data → Metal Definition → Creator 

Select the already created Creator Metao Budget, and select "Product" from the button on the field.

Enter the name and select "List of Product".
Remember that the "key" displayed below the name is required later. (You can check it later even if you don't remember it!)

Save when the setting is over.

  Working page: Shopify Management Screen → Content → Metao Bject → Creator 

Open the entry that has already been created and set the target product to the PRODUCT added earlier.

I want to display the target product in this way on the creator's individual page!
But Even if the "special collection" is inserted from the customizer, the list of the products set in the metao must be entered will not be displayed. … So let's touch the Liquid code a little from here.

The shape will be used as it is to use the special feature collection to display the product list of the creator.

  Working page: Shopify management screen → Online store → edit code 

Click "Edit Code" on the theme you are currently using.
If you do not want to edit the current theme because it is a test purpose, select "Duplication" and edit the duplicated theme code in the theme library.

Click "Add a new section" in the sections folder, enter any file name and click "Complete".

Leave the created file once.

Search for "featured-college.liquid" from the code or search from a search box to display the target code.

Copy all the code in the featured-college.liquid and paste all into the Creator-products.lique created in the procedure (1).

When created, you can overwrite it into several lines of code included by default.

Change the name.
The number of rows of code may vary depending on the theme or version.
Change the name in Presets just before name and Endshema just after Schema

For Product in Section.Collection.products 

The part where it is written

For Product in Metaobject.product.Value

I will rewrite.

This is the only code editing! After that, press the save button on the upper right to finish the code editing screen.

I can easily explain what this part is doing.
In this part, the product information is extracted one by one from the given product list, and the product name is displayed and photos are displayed based on the product information.

The part of this "given product list" is In the case of featured-college.liquid, the collection list For so Creator-products.liquid value in Product in the metaubect I rewrote it.

Congratulations on the code editing! Next, fill the section created earlier on the page!

  Working page: SHOPIFY management screen → online store → Customizer 

Click the "homepage" at the top of the customizer screen and select "Creator" at the bottom.
(Created in the article in the first part)

Click Add the left column section ...There is "Creator's Products" created earlier!Click there and display it in any location on the page.

Then, a product linked to the relevant creator was output in the list!

Change the headline. (It can also be changed by editing code)

Select Creator's name from the "Connection of dynamic source" icon. If you are lonely if it is just a name, you may want to put "'S Collection" later.

Here is the completed page! Under the introduction of John, John's list of productions will be lined up. The page migration rate has increased, which is also useful for improving conversions.

Thank you for your hard work! To summarize the results from the first part

• Create an creator list page

• Producer individual page creation product list display

• Display the creator information on the product page

These three were realized.

At the e -commerce store, unlike face -to -face sales, information will be unilateral,SHOPIFY is an e -commerce platform with a very customizability. Feel free to customize and shop and provide a variety of information!

However, "high customizability" requires certain knowledge. If you can see this article and the previous part of the previous part, you can experience the expansion of the display using metao must -do, but after all it is a little difficult, there is no resource in the company, at least it can be realized, but I want to customize it more! If you have any problems, please contact Go Ride.

We will help you that your store will be a fun shopping experience for our customers!