Step By Step Installation
In our example, we're going to show our fields on Product pages in our store. All our new product fields will be shown below the standard description field on your products.
For basic usage, you'll only need to follow a few simple steps for installation. Any time a new field is created (or the ordering is re-arranged) your Shopify theme template will be automatically updated as well! This is the simplest method of using Custom Fields, however, the app can be very flexible and powerful if you need it to be! Check out our advanced installation guide for more detail on advanced usage.
Let's get started!
1.) From the top bar, click on Products, then click on the +Configure Fields tab.
2.) From this screen, you can edit the different Custom Fields you have created.
Click on the Installation button on the Orange Menu Bar, then select Install Custom Fields For Products. This will automatically add the code necessary for our app to show your fields.
After it has finished installing, you will get a green message that tells you it installed correctly! If this doesn't happen for some reason, please check out our tutorial on Manual Installation. Now we can make new product fields that will display on product pages.
3.) Click on +Create New Custom Field tab under Products.
Create a new field to test with. In our case, we created a new HTML field. Select HTML under the Advanced drop-down and save the form by clicking on Create New HTML Field.
4.) After you Save your New Field, you will see a drop down called Edit Code. This is where you can edit this specific fields code and how it functions if you wish.
You can read more about how this feature makes Custom Fields so powerful in our Theming Examples and Tutorials category.
5.) Click on Search and search for a product in your Shopify store that you can test with.
If you don't already have any Shopify products, go to your store and create some products. After you complete that come back to this step.
6.) Click Edit Custom Fields and add some test content. Save the page.
7.) Verify it works by viewing your test product in your store.
You've completed the basic installation! From here you can now add or remove any test fields and add or re-arrange fields as you like. This was a one-time process, for products. You may wish to follow these same basic steps for other types such as blog posts or pages.