Shopify Product Nutrition Section – Nutritional Facts Display

                    <!-- 
========================================
Section Name: Product Nutrition
Tech Stack: Liquid, HTML, CSS, JavaScript, SVG
What This Section Does: 
- Displays product nutritional information with a wavy divider and two-column layout.
- Features customizable content badges with options for text or image display.
- Includes an area for showcasing nutrition facts labels or ingredient information.
- Fully responsive design with mobile-optimized layout and elegant styling.

Promotion: 
Enhance your food product pages with a professional nutrition facts section. Highlight key nutritional benefits and certifications to build customer trust. Get it now at [PrebuiltTemplates](https://prebuilttemplates.com/).
========================================
-->

<section class="product-nutrition-section" style="background-color: {{ section.settings.bg_color }};">
  <div class="wave-top">
    <svg viewBox="0 0 1440 120" preserveAspectRatio="none">
      <path d="M0,120 C240,40 720,160 1200,60 C1320,20 1380,40 1440,60 L1440,120 L0,120 Z" fill="{{ section.settings.bg_color }}"></path>
    </svg>
  </div>
  
  <div class="nutrition-content-wrapper page-width">
    <div class="nutrition-content">
      {% if section.settings.heading != blank %}
        <h2 class="nutrition-heading" style="color: {{ section.settings.heading_color }}; font-size: {{ section.settings.heading_size }}px;">
          {{ section.settings.heading }}
        </h2>
      {% endif %}
      
      {% if section.settings.description != blank %}
        <div class="nutrition-description" style="color: {{ section.settings.text_color }};">
          {{ section.settings.description }}
        </div>
      {% endif %}
      
      <div class="nutrition-badges">
        {% for block in section.blocks %}
          {% case block.type %}
            {% when 'badge' %}
              <div class="nutrition-badge" {{ block.shopify_attributes }}>
                {% if block.settings.badge_image != blank %}
                  <img src="{{ block.settings.badge_image | img_url: '120x' }}" alt="{{ block.settings.badge_title }}" loading="lazy">
                {% else %}
                  <div class="nutrition-badge-text" style="background-color: {{ block.settings.badge_bg_color }}; color: {{ block.settings.badge_text_color }};">
                    {{ block.settings.badge_title }}
                  </div>
                {% endif %}
              </div>
          {% endcase %}
        {% endfor %}
      </div>
    </div>
    
    <div class="nutrition-facts-wrapper">
      {% if section.settings.nutrition_image != blank %}
        <img src="{{ section.settings.nutrition_image | img_url: '600x' }}" alt="Nutrition Facts" class="nutrition-facts-image">
      {% else %}
        <div class="nutrition-facts-placeholder">
          <p>Upload a nutrition facts image</p>
        </div>
      {% endif %}
    </div>
  </div>
</section>

<style>
.product-nutrition-section {
  position: relative;
  background-color: {{ section.settings.bg_color }};
  padding: {{ section.settings.section_padding }}px 0;
  margin-top: 100px;
}

.wave-top {
  position: absolute;
  top: -120px;
  left: 0;
  width: 100%;
  height: 120px;
  overflow: hidden;
}

.wave-top svg {
  position: absolute;
  width: 100%;
  height: 100%;
}

.nutrition-content-wrapper {
  max-width: {{ section.settings.container_width }}px;
  margin: 0 auto;
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.nutrition-content {
  flex: 1;
}

.nutrition-heading {
  margin-bottom: 20px;
  font-weight: 700;
  line-height: 1.2;
}

.nutrition-description {
  margin-bottom: 30px;
  font-size: {{ section.settings.text_size }}px;
  line-height: 1.6;
}

.nutrition-badges {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.nutrition-badge {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nutrition-badge img {
  max-width: 100%;
  height: auto;
}

.nutrition-badge-text {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 700;
  font-size: 14px;
  padding: 10px;
}

.nutrition-facts-wrapper {
  flex: 1;
  max-width: 380px;
}

.nutrition-facts-image {
  width: 100%;
  height: auto;
  display: block;
  border: 2px solid white;
}

.nutrition-facts-placeholder {
  width: 100%;
  height: 400px;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed #ccc;
}

@media screen and (max-width: 990px) {
  .nutrition-content-wrapper {
    flex-direction: column;
  }
  
  .nutrition-facts-wrapper {
    max-width: 100%;
    width: 100%;
    order: 2;
  }
  
  .nutrition-content {
    order: 1;
  }
}

@media screen and (max-width: 768px) {
  .nutrition-heading {
    font-size: {{ section.settings.heading_size | minus: 6 }}px;
  }
  
  .nutrition-description {
    font-size: {{ section.settings.text_size | minus: 2 }}px;
  }
  
  .wave-top {
    height: 80px;
    top: -80px;
  }
}

@media screen and (max-width: 480px) {
  .nutrition-badges {
    justify-content: center;
  }
}
</style>

{% schema %}
{
  "name": "Product Nutrition",
  "settings": [
    {
      "type": "header",
      "content": "Layout Settings"
    },
    {
      "type": "range",
      "id": "section_padding",
      "label": "Section Padding",
      "min": 0,
      "max": 100,
      "step": 5,
      "default": 60
    },
    {
      "type": "range",
      "id": "container_width",
      "label": "Container Width",
      "min": 800,
      "max": 1600,
      "step": 50,
      "default": 1200
    },
    {
      "type": "header",
      "content": "Content Settings"
    },
    {
      "type": "color",
      "id": "bg_color",
      "label": "Background Color",
      "default": "#E94335"
    },
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "The standard Lorem"
    },
    {
      "type": "range",
      "id": "heading_size",
      "label": "Heading Size",
      "min": 20,
      "max": 60,
      "step": 2,
      "default": 36
    },
    {
      "type": "color",
      "id": "heading_color",
      "label": "Heading Color",
      "default": "#FFFFFF"
    },
    {
      "type": "richtext",
      "id": "description",
      "label": "Description",
      "default": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>"
    },
    {
      "type": "range",
      "id": "text_size",
      "label": "Text Size",
      "min": 12,
      "max": 20,
      "step": 1,
      "default": 16
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text Color",
      "default": "#FFFFFF"
    },
    {
      "type": "header",
      "content": "Nutrition Facts Image"
    },
    {
      "type": "image_picker",
      "id": "nutrition_image",
      "label": "Nutrition Facts Image"
    }
  ],
  "blocks": [
    {
      "type": "badge",
      "name": "Product Badge",
      "settings": [
        {
          "type": "text",
          "id": "badge_title",
          "label": "Badge Title",
          "default": "ORIGINAL"
        },
        {
          "type": "image_picker",
          "id": "badge_image",
          "label": "Badge Image"
        },
        {
          "type": "color",
          "id": "badge_bg_color",
          "label": "Badge Background Color",
          "default": "#FFFFFF"
        },
        {
          "type": "color",
          "id": "badge_text_color",
          "label": "Badge Text Color",
          "default": "#E94335"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Product Nutrition",
      "blocks": [
        {
          "type": "badge"
        },
        {
          "type": "badge"
        },
        {
          "type": "badge"
        }
      ]
    }
  ]
}
{% endschema %}