FrontendShopify Nutrition Facts
The Nutrition Facts Shopify section helps you display nutritional information in a structured manner on product pages. This allows customers to easily access essential product details without putting extra effort. Perfect for food, health, and supplement stores. Â
Â
Key Features:
- Displays Nutritional Facts
- Easily upload facts via CSV
- Custom CSS support is available
Â
No monthly fees | 30-days support | Easy setup
Description
Explore the custom section to display nutrition facts on product pages in Shopify. The section offers an easy way to add nutrition details to products via CSV upload. You can modify the design and position of the nutrition facts table on the product pages.
Make the product details more clear on your Shopify store with a nutrition facts table. The custom section provided by us helps you upload nutrition facts CSV for each item and display a table on the product pages.
Included Features:
- Navigate to Online store>Theme>Customize>Product Page>Add section>Nutritional Facts. Now you can customize your section.
- Note: To display the data, you need to upload a CSV for each product.
- Header Settings
- Label Heading Settings
- Label Settings
- Footer Note Settings
- Sections Settings
- Section Spacing Settings
- You can also add custom styles to this particular section using custom css.
Easiest Solution to Add Nutrition Facts in Shopify.
Nutritional Facts label is too easy to add to your Shopify store. You don’t need to hire any developer to do so.
Step 1: Create a Metafield for CSV
We will begin by creating a metafield to store product-specific nutrition facts data in a CSV format.
1. Access Shopify Admin: Log in to your Shopify admin. Navigate to Settings > Custom data.
2. Create a Product Metafield: In the Custom data section, select Product Metafield. Click the Add Definition button to create a new metafield.
3. Configure the Metafield: Enter the name for the metafield as `Ingredients`. This will help you identify the metafield in your product setup. Set the type as File. This allows you to upload a CSV file that contains the nutrition facts. Under validation select - Accept all file types. After filling in the details, click Save.
4. Upload CSV File: You can now use the metafield to upload nutrition facts for each product. Go to Products > Edit for the desired product. Download or prepare the `meetanshi-nutrition-facts.zip` file that contains the necessary code for this section. Extract the contents of the zip file on your local computer. Open the "Meetanshi Nutrition Facts" folder then Open the `nutrition-facts-sample.csv`.
Note: Make sure all the content except headings of the column are editable.
In the product page, find the metafield under Metafields, and upload your nutrition facts CSV.
Step 2: Add a New Section for Nutrition Facts
Next, you will add a custom section that displays the nutrition facts on the product pages.
1. Edit Shopify Theme: Go to Online Store > Themes in your Shopify admin. Click Actions > Edit code to access the theme code.
2. Add a New Section: In the left-hand panel, find Sections and click Add a new section. Name the new section `nutritional-facts`. This will be the section that displays your nutrition facts.
3. Add the Code: Open the `nutrition-facts.txt` file and copy its contents. In the `nutritional-facts.liquid` file you created, paste the copied code. Click Save to apply the changes.
Step 3: Display the Nutrition Facts Table on Product Pages
After creating the section, you need to display it on your product pages.
1. Access Theme Customizer: In Shopify admin, go to Online Store > Themes > Customize.
2. Choose Product Page Layout: In the theme customizer, select Product Pages from the dropdown at the top.
3. Add Nutrition Facts Section: On the product page editor, click Add Section. Select the newly created Nutrition Facts section.
4. Customize and Save: You can customize how the nutrition facts appear on the product page. Adjust settings like size, placement, or style as needed. Once you're satisfied, click Save.