Custom colour swatches not showing - DAWN

Hello,
I have tried to fix this many times with no success. I have created colour swatches and our colour are custom so have uploaded the swatches as files in our store. Not all of them show and I am not sure why.

If anyone could help, that would be great

www.thefreedomofpeach.com.au

Ahceep

1 Like

@LitExtension I thought this might be something you could share insight on

Hi @FOP ,

I checked and some color code was not understood, like ‘Cornflower’ you can’t declare color code with ‘Cornflower’. There will be 2 ways for this case:

  • 1: You need to upload all these colors with images, like create cornflower.png file and upload it at Assets, then I will help you edit to display it.

  • 2: I will help you to edit the code to display images of product variants.

Which way do you choose?

@FOP

yes, have try this code also Color Swatch

Hello @LitExtension

i have uploaded them as png files. Oddly one product of mine is working as per the screenshot but the rest is not…. So not sure why that would be?

Hi @FOP ,

I checked and it still does not get the image file, can you send me the code of card-product.liquid file, I will check it for you.

Hi @LitExtension as requested.

Let me know how you go.

{% comment %}
    Renders a product card

    Accepts:
    - card_product: {Object} Product Liquid object (optional)
    - media_aspect_ratio: {String} Size of the product image card. Values are "square" and "portrait". Default is "square" (optional)
    - show_secondary_image: {Boolean} Show the secondary image on hover. Default: false (optional)
    - show_vendor: {Boolean} Show the product vendor. Default: false
    - show_rating: {Boolean} Show the product rating. Default: false
    - extend_height: {Boolean} Card height extends to available container space. Default: true (optional)
    - lazy_load: {Boolean} Image should be lazy loaded. Default: true (optional)
    - show_quick_add: {Boolean} Show the quick add button.
    - section_id: {String} The ID of the section that contains this card.

    Usage:
    {% render 'card-product', show_vendor: section.settings.show_vendor %}
{% endcomment %}

{{ 'component-rating.css' | asset_url | stylesheet_tag }}

{%- if card_product and card_product != empty -%}
  {%- liquid
    assign ratio = 1
    if card_product.featured_media and media_aspect_ratio == 'portrait'
      assign ratio = 0.8
    elsif card_product.featured_media and media_aspect_ratio == 'adapt'
      assign ratio = card_product.featured_media.aspect_ratio
    endif
    if ratio == 0 or ratio == nil
      assign ratio = 1
    endif
  -%}
  
    

      

        {%- if card_product.featured_media -%}
          

            

              {% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
              
              {% comment %}theme-check-enable ImgLazyLoading{% endcomment %}

              {%- if card_product.media[1] != nil and show_secondary_image -%}
                
              {%- endif -%}
            

          

        {%- endif -%}
        
          

            ### 
              
                {{ card_product.title | escape }}
              
            
          

          
            {%- if card_product.available == false -%}
              {{ 'products.product.sold_out' | t }}
            {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
              {{ 'products.product.on_sale' | t }}
            {%- endif -%}
          

        

      

      
        

          ### 
            
              {{ card_product.title | escape }}
            
          
          
            {%- if show_vendor -%}
              {{ 'accessibility.vendor' | t }}
              
{{ card_product.vendor }}

            {%- endif -%}

            {{ block.settings.description | escape }}

            {%- if show_rating and card_product.metafields.reviews.rating.value != blank -%}
              {% liquid
                assign rating_decimal = 0
                assign decimal = card_product.metafields.reviews.rating.value.rating | modulo: 1
                if decimal >= 0.3 and decimal <= 0.7
                  assign rating_decimal = 0.5
                elsif decimal > 0.7
                  assign rating_decimal = 1
                endif
              %}
              

                
              

              

                {{ card_product.metafields.reviews.rating.value }} / {{ card_product.metafields.reviews.rating.value.scale_max }}
              

              

                ({{ card_product.metafields.reviews.rating_count }})
                {{ card_product.metafields.reviews.rating_count }} {{ "accessibility.total_reviews" | t }}
              

            {%- endif -%}
  {% render 'price', product: card_product, price_class: '' %}
  {% assign keys = "Color,color,Colour,colour" | split: ',' %}
            {% for key in keys %}
            {% if card_product.options contains key %}
            
              {% for color_option in card_product.options_by_name[key].values %}
              {% for variant in card_product.variants  %}
              {% if variant.options contains color_option %}
              {% if variant.image %}
              {% assign background_style = color_option %}
              {% endif %}
              {% if variant.metafields.color.swatch %}
              {% assign background_style = variant.metafields.color.swatch %}
              {% endif %}
              {% if variant.metafields.image.swatch %}
              {% assign background_style = "url(" | append: variant.metafields.image.swatch | append: ")" %}
              {% endif %}
              {% endif %}
              {% endfor %}
			  
              
              {% endfor %}
            

            {% endif %}
            {% endfor %}
          

        

        {%- if show_quick_add -%}
          
            {%- assign product_form_id = 'quick-add-' | append: section_id | append: card_product.id -%}
            {%- if card_product.has_only_default_variant -%}
              
            {%- else -%}
              
              
            {%- endif -%}
          

        {%- endif -%}
        
          {%- if card_product.available == false -%}
            {{ 'products.product.sold_out' | t }}
          {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
            {{ 'products.product.on_sale' | t }}
          {%- endif -%}
        

      

    

  

{%- else -%}
  
    

      

        

          

            ### 
              
                {{ 'onboarding.product_title' | t }}
              
            
          

        

      

      
        

          ### 
            
              {{ 'onboarding.product_title' | t }}
            
          
          
            {%- if show_vendor -%}
              {{ 'accessibility.vendor' | t }}
              
{{ 'products.product.vendor' | t }}

            {%- endif -%}
            {% render 'price' %}
          

        

      

    

  

{%- endif -%}

Hi @FOP ,

I have tested and the code is declared to display images according to Metafields so you just need to create Metafields and upload the image it will work fine. Please follow the steps below:

  • Step 1: Create Metafields for a variant with name swatch. Refer:

  • Step 2: Go to variant and upload a color image for it.

Hope it is clear to you.

Hi @LitExtension all my products have the metafeild with a PNG colour swatch the only one that worked is the ‘Bindi top’(Screenshot 1) on the main collection page, when you select the product it does not populate (Screenshot 2)

It seems that no one can fix this issue, I may also add on screenshot 1, the last colour for ‘bindi’ is not even right

Hi @FOP ,

I checked and didn’t find this, can you send me a link to show it.

Hi @FOP ,

Please change all code card-product.liquid file:

{% comment %}
    Renders a product card

    Accepts:
    - card_product: {Object} Product Liquid object (optional)
    - media_aspect_ratio: {String} Size of the product image card. Values are "square" and "portrait". Default is "square" (optional)
    - show_secondary_image: {Boolean} Show the secondary image on hover. Default: false (optional)
    - show_vendor: {Boolean} Show the product vendor. Default: false
    - show_rating: {Boolean} Show the product rating. Default: false
    - extend_height: {Boolean} Card height extends to available container space. Default: true (optional)
    - lazy_load: {Boolean} Image should be lazy loaded. Default: true (optional)
    - show_quick_add: {Boolean} Show the quick add button.
    - section_id: {String} The ID of the section that contains this card.

    Usage:
    {% render 'card-product', show_vendor: section.settings.show_vendor %}
{% endcomment %}

{{ 'component-rating.css' | asset_url | stylesheet_tag }}

{%- if card_product and card_product != empty -%}
  {%- liquid
    assign ratio = 1
    if card_product.featured_media and media_aspect_ratio == 'portrait'
      assign ratio = 0.8
    elsif card_product.featured_media and media_aspect_ratio == 'adapt'
      assign ratio = card_product.featured_media.aspect_ratio
    endif
    if ratio == 0 or ratio == nil
      assign ratio = 1
    endif
  -%}
  
    

      

        {%- if card_product.featured_media -%}
          

            

              {% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
              
              {% comment %}theme-check-enable ImgLazyLoading{% endcomment %}

              {%- if card_product.media[1] != nil and show_secondary_image -%}
                
              {%- endif -%}
            

          

        {%- endif -%}
        
          

            ### 
              
                {{ card_product.title | escape }}
              
            
          

          
            {%- if card_product.available == false -%}
              {{ 'products.product.sold_out' | t }}
            {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
              {{ 'products.product.on_sale' | t }}
            {%- endif -%}
          

        

      

      
        

          ### 
            
              {{ card_product.title | escape }}
            
          
          
            {%- if show_vendor -%}
              {{ 'accessibility.vendor' | t }}
              
{{ card_product.vendor }}

            {%- endif -%}

            {{ block.settings.description | escape }}

            {%- if show_rating and card_product.metafields.reviews.rating.value != blank -%}
              {% liquid
                assign rating_decimal = 0
                assign decimal = card_product.metafields.reviews.rating.value.rating | modulo: 1
                if decimal >= 0.3 and decimal <= 0.7
                  assign rating_decimal = 0.5
                elsif decimal > 0.7
                  assign rating_decimal = 1
                endif
              %}
              

                
              

              

                {{ card_product.metafields.reviews.rating.value }} / {{ card_product.metafields.reviews.rating.value.scale_max }}
              

              

                ({{ card_product.metafields.reviews.rating_count }})
                {{ card_product.metafields.reviews.rating_count }} {{ "accessibility.total_reviews" | t }}
              

            {%- endif -%}
            {% render 'price', product: card_product, price_class: '' %}
            {% assign keys = "Color,color,Colour,colour" | split: ',' %}
            {% for key in keys %}
            {% if card_product.options contains key %}
            
              {% for color_option in card_product.options_by_name[key].values %}
              {% for variant in card_product.variants  %}
              {% if variant.options contains color_option %}
              {% if variant.image %}
              {% assign background_style = color_option %}
              {% endif %}
              {% if variant.metafields.color.swatch %}
              {% assign background_style = variant.metafields.color.swatch %}
              {% endif %}
              {% if variant.metafields.custom.custom_colour %}
              {% assign background_style = "url(" | append: variant.metafields.custom.custom_colour | append: ")" %}
              {% endif %}
              {% endif %}
              {% endfor %}
			  
              
              {% endfor %}
            

            {% endif %}
            {% endfor %}
          

        

        {%- if show_quick_add -%}
          
            {%- assign product_form_id = 'quick-add-' | append: section_id | append: card_product.id -%}
            {%- if card_product.has_only_default_variant -%}
              
            {%- else -%}
              
              
            {%- endif -%}
          

        {%- endif -%}
        
          {%- if card_product.available == false -%}
            {{ 'products.product.sold_out' | t }}
          {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
            {{ 'products.product.on_sale' | t }}
          {%- endif -%}
        

      

    

  

{%- else -%}
  
    

      

        

          

            ### 
              
                {{ 'onboarding.product_title' | t }}
              
            
          

        

      

      
        

          ### 
            
              {{ 'onboarding.product_title' | t }}
            
          
          
            {%- if show_vendor -%}
              {{ 'accessibility.vendor' | t }}
              
{{ 'products.product.vendor' | t }}

            {%- endif -%}
            {% render 'price' %}
          

        

      

    

  

{%- endif -%}

Hi @FOP ,

Please change all code:

{% comment %}
    Renders a product card

    Accepts:
    - card_product: {Object} Product Liquid object (optional)
    - media_aspect_ratio: {String} Size of the product image card. Values are "square" and "portrait". Default is "square" (optional)
    - show_secondary_image: {Boolean} Show the secondary image on hover. Default: false (optional)
    - show_vendor: {Boolean} Show the product vendor. Default: false
    - show_rating: {Boolean} Show the product rating. Default: false
    - extend_height: {Boolean} Card height extends to available container space. Default: true (optional)
    - lazy_load: {Boolean} Image should be lazy loaded. Default: true (optional)
    - show_quick_add: {Boolean} Show the quick add button.
    - section_id: {String} The ID of the section that contains this card.

    Usage:
    {% render 'card-product', show_vendor: section.settings.show_vendor %}
{% endcomment %}

{{ 'component-rating.css' | asset_url | stylesheet_tag }}

{%- if card_product and card_product != empty -%}
  {%- liquid
    assign ratio = 1
    if card_product.featured_media and media_aspect_ratio == 'portrait'
      assign ratio = 0.8
    elsif card_product.featured_media and media_aspect_ratio == 'adapt'
      assign ratio = card_product.featured_media.aspect_ratio
    endif
    if ratio == 0 or ratio == nil
      assign ratio = 1
    endif
  -%}
  
    

      

        {%- if card_product.featured_media -%}
          

            

              {% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
              
              {% comment %}theme-check-enable ImgLazyLoading{% endcomment %}

              {%- if card_product.media[1] != nil and show_secondary_image -%}
                
              {%- endif -%}
            

          

        {%- endif -%}
        
          

            ### 
              
                {{ card_product.title | escape }}
              
            
          

          
            {%- if card_product.available == false -%}
              {{ 'products.product.sold_out' | t }}
            {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
              {{ 'products.product.on_sale' | t }}
            {%- endif -%}
          

        

      

      
        

          ### 
            
              {{ card_product.title | escape }}
            
          
          
            {%- if show_vendor -%}
              {{ 'accessibility.vendor' | t }}
              
{{ card_product.vendor }}

            {%- endif -%}

            {{ block.settings.description | escape }}

            {%- if show_rating and card_product.metafields.reviews.rating.value != blank -%}
              {% liquid
                assign rating_decimal = 0
                assign decimal = card_product.metafields.reviews.rating.value.rating | modulo: 1
                if decimal >= 0.3 and decimal <= 0.7
                  assign rating_decimal = 0.5
                elsif decimal > 0.7
                  assign rating_decimal = 1
                endif
              %}
              

                
              

              

                {{ card_product.metafields.reviews.rating.value }} / {{ card_product.metafields.reviews.rating.value.scale_max }}
              

              

                ({{ card_product.metafields.reviews.rating_count }})
                {{ card_product.metafields.reviews.rating_count }} {{ "accessibility.total_reviews" | t }}
              

            {%- endif -%}
            {% render 'price', product: card_product, price_class: '' %}
            {% assign keys = "Color,color,Colour,colour" | split: ',' %}
            {% for key in keys %}
            {% if card_product.options contains key %}
            
              {% for color_option in card_product.options_by_name[key].values %}
              {% for variant in card_product.variants  %}
              {% if variant.options contains color_option %}
              {% if variant.image %}
              {% assign background_style = color_option %}
              {% endif %}
              {% if variant.metafields.color.swatch %}
              {% assign background_style = variant.metafields.color.swatch %}
              {% endif %}
              {% if variant.metafields.custom.custom_colour %}
              {% assign background_style = "url({{variant.metafields.custom.custom_colour | img_url:'master'}})" %}
              {% endif %}
              {% endif %}
              {% endfor %}
			  
              
              {% endfor %}
            

            {% endif %}
            {% endfor %}
          

        

        {%- if show_quick_add -%}
          
            {%- assign product_form_id = 'quick-add-' | append: section_id | append: card_product.id -%}
            {%- if card_product.has_only_default_variant -%}
              
            {%- else -%}
              
              
            {%- endif -%}
          

        {%- endif -%}
        
          {%- if card_product.available == false -%}
            {{ 'products.product.sold_out' | t }}
          {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
            {{ 'products.product.on_sale' | t }}
          {%- endif -%}
        

      

    

  

{%- else -%}
  
    

      

        

          

            ### 
              
                {{ 'onboarding.product_title' | t }}
              
            
          

        

      

      
        

          ### 
            
              {{ 'onboarding.product_title' | t }}
            
          
          
            {%- if show_vendor -%}
              {{ 'accessibility.vendor' | t }}
              
{{ 'products.product.vendor' | t }}

            {%- endif -%}
            {% render 'price' %}
          

        

      

    

  

{%- endif -%}

Hi @FOP ,

Please change all code:

{% comment %}
    Renders a product card

    Accepts:
    - card_product: {Object} Product Liquid object (optional)
    - media_aspect_ratio: {String} Size of the product image card. Values are "square" and "portrait". Default is "square" (optional)
    - show_secondary_image: {Boolean} Show the secondary image on hover. Default: false (optional)
    - show_vendor: {Boolean} Show the product vendor. Default: false
    - show_rating: {Boolean} Show the product rating. Default: false
    - extend_height: {Boolean} Card height extends to available container space. Default: true (optional)
    - lazy_load: {Boolean} Image should be lazy loaded. Default: true (optional)
    - show_quick_add: {Boolean} Show the quick add button.
    - section_id: {String} The ID of the section that contains this card.

    Usage:
    {% render 'card-product', show_vendor: section.settings.show_vendor %}
{% endcomment %}

{{ 'component-rating.css' | asset_url | stylesheet_tag }}

{%- if card_product and card_product != empty -%}
  {%- liquid
    assign ratio = 1
    if card_product.featured_media and media_aspect_ratio == 'portrait'
      assign ratio = 0.8
    elsif card_product.featured_media and media_aspect_ratio == 'adapt'
      assign ratio = card_product.featured_media.aspect_ratio
    endif
    if ratio == 0 or ratio == nil
      assign ratio = 1
    endif
  -%}
  
    

      

        {%- if card_product.featured_media -%}
          

            

              {% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
              
              {% comment %}theme-check-enable ImgLazyLoading{% endcomment %}

              {%- if card_product.media[1] != nil and show_secondary_image -%}
                
              {%- endif -%}
            

          

        {%- endif -%}
        
          

            ### 
              
                {{ card_product.title | escape }}
              
            
          

          
            {%- if card_product.available == false -%}
              {{ 'products.product.sold_out' | t }}
            {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
              {{ 'products.product.on_sale' | t }}
            {%- endif -%}
          

        

      

      
        

          ### 
            
              {{ card_product.title | escape }}
            
          
          
            {%- if show_vendor -%}
              {{ 'accessibility.vendor' | t }}
              
{{ card_product.vendor }}

            {%- endif -%}

            {{ block.settings.description | escape }}

            {%- if show_rating and card_product.metafields.reviews.rating.value != blank -%}
              {% liquid
                assign rating_decimal = 0
                assign decimal = card_product.metafields.reviews.rating.value.rating | modulo: 1
                if decimal >= 0.3 and decimal <= 0.7
                  assign rating_decimal = 0.5
                elsif decimal > 0.7
                  assign rating_decimal = 1
                endif
              %}
              

                
              

              

                {{ card_product.metafields.reviews.rating.value }} / {{ card_product.metafields.reviews.rating.value.scale_max }}
              

              

                ({{ card_product.metafields.reviews.rating_count }})
                {{ card_product.metafields.reviews.rating_count }} {{ "accessibility.total_reviews" | t }}
              

            {%- endif -%}
            {% render 'price', product: card_product, price_class: '' %}
            {% assign keys = "Color,color,Colour,colour" | split: ',' %}
            {% for key in keys %}
            {% if card_product.options contains key %}
            
              {% for color_option in card_product.options_by_name[key].values %}
              {% for variant in card_product.variants  %}
              {% if variant.options contains color_option %}
              {% if variant.image %}
              {% assign background_style = color_option %}
              {% endif %}
              {% if variant.metafields.color.swatch %}
              {% assign background_style = variant.metafields.color.swatch %}
              {% endif %}
              {% if variant.metafields.custom.custom_colour %}
                {% capture background_style %}
                  url({{variant.metafields.custom.custom_colour | img_url:'master'}})
                {% endcapture %}
              {% endif %}
              {% endif %}
              {% endfor %}
			  
              
              {% endfor %}
            

            {% endif %}
            {% endfor %}
          

        

        {%- if show_quick_add -%}
          
            {%- assign product_form_id = 'quick-add-' | append: section_id | append: card_product.id -%}
            {%- if card_product.has_only_default_variant -%}
              
            {%- else -%}
              
              
            {%- endif -%}
          

        {%- endif -%}
        
          {%- if card_product.available == false -%}
            {{ 'products.product.sold_out' | t }}
          {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
            {{ 'products.product.on_sale' | t }}
          {%- endif -%}
        

      

    

  

{%- else -%}
  
    

      

        

          

            ### 
              
                {{ 'onboarding.product_title' | t }}
              
            
          

        

      

      
        

          ### 
            
              {{ 'onboarding.product_title' | t }}
            
          
          
            {%- if show_vendor -%}
              {{ 'accessibility.vendor' | t }}
              
{{ 'products.product.vendor' | t }}

            {%- endif -%}
            {% render 'price' %}
          

        

      

    

  

{%- endif -%}

Hi @LitExtension thank you for helping me with this. It has been resolved on the collection page but sadly when a product is selected it still does not show. There must be an issue with the main product liquid??

Hi @FOP ,

Please go to main-product.liquid file and change all code:


{% schema %}
{
  "name": "t:sections.main-product.name",
  "tag": "section",
  "class": "section",
  "blocks": [
    {
      "type": "@app"
    },
    {
      "type": "text",
      "name": "t:sections.main-product.blocks.text.name",
      "settings": [
        {
          "type": "text",
          "id": "text",
          "default": "Text block",
          "label": "t:sections.main-product.blocks.text.settings.text.label"
        },
        {
          "type": "select",
          "id": "text_style",
          "options": [
            {
              "value": "body",
              "label": "t:sections.main-product.blocks.text.settings.text_style.options__1.label"
            },
            {
              "value": "subtitle",
              "label": "t:sections.main-product.blocks.text.settings.text_style.options__2.label"
            },
            {
              "value": "uppercase",
              "label": "t:sections.main-product.blocks.text.settings.text_style.options__3.label"
            }
          ],
          "default": "body",
          "label": "t:sections.main-product.blocks.text.settings.text_style.label"
        }
      ]
    },
    {
      "type": "title",
      "name": "t:sections.main-product.blocks.title.name",
      "limit": 1
    },
    {
      "type": "price",
      "name": "t:sections.main-product.blocks.price.name",
      "limit": 1
    },
    {
      "type": "quantity_selector",
      "name": "t:sections.main-product.blocks.quantity_selector.name",
      "limit": 1
    },
    {
      "type": "variant_picker",
      "name": "t:sections.main-product.blocks.variant_picker.name",
      "limit": 1,
      "settings": [
        {
          "type": "select",
          "id": "picker_type",
          "options": [
            {
              "value": "dropdown",
              "label": "t:sections.main-product.blocks.variant_picker.settings.picker_type.options__1.label"
            },
            {
              "value": "button",
              "label": "t:sections.main-product.blocks.variant_picker.settings.picker_type.options__2.label"
            }
          ],
          "default": "button",
          "label": "t:sections.main-product.blocks.variant_picker.settings.picker_type.label"
        }
      ]
    },
    {
      "type": "buy_buttons",
      "name": "t:sections.main-product.blocks.buy_buttons.name",
      "limit": 1,
      "settings": [
        {
          "type": "checkbox",
          "id": "show_dynamic_checkout",
          "default": true,
          "label": "t:sections.main-product.blocks.buy_buttons.settings.show_dynamic_checkout.label",
          "info": "t:sections.main-product.blocks.buy_buttons.settings.show_dynamic_checkout.info"
        }
      ]
    },
    {
      "type": "description",
      "name": "t:sections.main-product.blocks.description.name",
      "limit": 1
    },
    {
      "type": "share",
      "name": "t:sections.main-product.blocks.share.name",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "share_label",
          "label": "t:sections.main-product.blocks.share.settings.text.label",
          "default": "Share"
        },
        {
          "type": "paragraph",
          "content": "t:sections.main-product.blocks.share.settings.featured_image_info.content"
        },
        {
          "type": "paragraph",
          "content": "t:sections.main-product.blocks.share.settings.title_info.content"
        }
      ]
    },
    {
      "type": "custom_liquid",
      "name": "t:sections.main-product.blocks.custom_liquid.name",
      "settings": [
        {
          "type": "liquid",
          "id": "custom_liquid",
          "label": "t:sections.main-product.blocks.custom_liquid.settings.custom_liquid.label",
          "info": "t:sections.main-product.blocks.custom_liquid.settings.custom_liquid.info"
        }
      ]
    },
    {
      "type": "collapsible_tab",
      "name": "t:sections.main-product.blocks.collapsible_tab.name",
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "default": "Collapsible row",
          "info": "t:sections.main-product.blocks.collapsible_tab.settings.heading.info",
          "label": "t:sections.main-product.blocks.collapsible_tab.settings.heading.label"
        },
        {
          "type": "select",
          "id": "icon",
          "options": [
            {
              "value": "none",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__1.label"
            },
            {
              "value": "apple",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__2.label"
            },
            {
              "value": "banana",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__3.label"
            },
            {
              "value": "bottle",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__4.label"
            },
            {
              "value": "box",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__5.label"
            },
            {
              "value": "carrot",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__6.label"
            },
            {
              "value": "chat_bubble",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__7.label"
            },
            {
              "value": "check_mark",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__8.label"
            },
            {
              "value": "clipboard",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__9.label"
            },
            {
              "value": "dairy",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__10.label"
            },
            {
              "value": "dairy_free",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__11.label"
            },
            {
              "value": "dryer",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__12.label"
            },
            {
              "value": "eye",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__13.label"
            },
            {
              "value": "fire",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__14.label"
            },
            {
              "value": "gluten_free",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__15.label"
            },
            {
              "value": "heart",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__16.label"
            },
            {
              "value": "iron",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__17.label"
            },
            {
              "value": "leaf",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__18.label"
            },
            {
              "value": "leather",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__19.label"
            },
            {
              "value": "lightning_bolt",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__20.label"
            },
            {
              "value": "lipstick",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__21.label"
            },
            {
              "value": "lock",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__22.label"
            },
            {
              "value": "map_pin",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__23.label"
            },
            {
              "value": "nut_free",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__24.label"
            },
            {
              "value": "pants",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__25.label"
            },
            {
              "value": "paw_print",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__26.label"
            },
            {
              "value": "pepper",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__27.label"
            },
            {
              "value": "perfume",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__28.label"
            },
            {
              "value": "plane",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__29.label"
            },
            {
              "value": "plant",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__30.label"
            },
            {
              "value": "price_tag",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__31.label"
            },
            {
              "value": "question_mark",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__32.label"
            },
            {
              "value": "recycle",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__33.label"
            },
            {
              "value": "return",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__34.label"
            },
            {
              "value": "ruler",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__35.label"
            },
            {
              "value": "serving_dish",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__36.label"
            },
            {
              "value": "shirt",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__37.label"
            },
            {
              "value": "shoe",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__38.label"
            },
            {
              "value": "silhouette",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__39.label"
            },
            {
              "value": "snowflake",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__40.label"
            },
            {
              "value": "star",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__41.label"
            },
            {
              "value": "stopwatch",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__42.label"
            },
            {
              "value": "truck",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__43.label"
            },
            {
              "value": "washing",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__44.label"
            }
          ],
          "default": "check_mark",
          "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.label"
        },
        {
          "type": "liquid",
          "id": "content",
          "label": "t:sections.main-product.blocks.collapsible_tab.settings.content.label"
        },
        {
          "type": "page",
          "id": "page",
          "label": "t:sections.main-product.blocks.collapsible_tab.settings.page.label"
        }
      ]
    },
    {
      "type": "popup",
      "name": "t:sections.main-product.blocks.popup.name",
      "settings": [
        {
          "type": "text",
          "id": "text",
          "default": "Pop-up link text",
          "label": "t:sections.main-product.blocks.popup.settings.link_label.label"
        },
        {
          "id": "page",
          "type": "page",
          "label": "t:sections.main-product.blocks.popup.settings.page.label"
        }
      ]
    },
    {
      "type": "rating",
      "name": "t:sections.main-product.blocks.rating.name",
      "limit": 1,
      "settings": [
        {
          "type": "paragraph",
          "content": "t:sections.main-product.blocks.rating.settings.paragraph.content"
        }
      ]
    }
  ],
  "settings": [
    {
      "type": "checkbox",
      "id": "enable_sticky_info",
      "default": true,
      "label": "t:sections.main-product.settings.enable_sticky_info.label"
    },
    {
      "type": "header",
      "content": "t:sections.main-product.settings.header.content",
      "info": "t:sections.main-product.settings.header.info"
    },
    {
      "type": "select",
      "id": "gallery_layout",
      "options": [
        {
          "value": "stacked",
          "label": "t:sections.main-product.settings.gallery_layout.options__1.label"
        },
        {
          "value": "thumbnail",
          "label": "t:sections.main-product.settings.gallery_layout.options__2.label"
        },
        {
          "value": "thumbnail_slider",
          "label": "t:sections.main-product.settings.gallery_layout.options__3.label"
        }
      ],
      "default": "stacked",
      "label": "t:sections.main-product.settings.gallery_layout.label"
    },
    {
      "type": "select",
      "id": "media_size",
      "options": [
        {
          "value": "small",
          "label": "t:sections.main-product.settings.media_size.options__1.label"
        },
        {
          "value": "medium",
          "label": "t:sections.main-product.settings.media_size.options__2.label"
        },
        {
          "value": "large",
          "label": "t:sections.main-product.settings.media_size.options__3.label"
        }
      ],
      "default": "large",
      "label": "t:sections.main-product.settings.media_size.label",
      "info": "t:sections.main-product.settings.media_size.info"
    },
    {
      "type": "select",
      "id": "mobile_thumbnails",
      "options": [
        {
          "value": "show",
          "label": "t:sections.main-product.settings.mobile_thumbnails.options__1.label"
        },
        {
          "value": "hide",
          "label": "t:sections.main-product.settings.mobile_thumbnails.options__2.label"
        }
      ],
      "default": "hide",
      "label": "t:sections.main-product.settings.mobile_thumbnails.label"
    },
    {
      "type": "checkbox",
      "id": "hide_variants",
      "default": false,
      "label": "t:sections.main-product.settings.hide_variants.label"
    },
    {
      "type": "checkbox",
      "id": "enable_video_looping",
      "default": false,
      "label": "t:sections.main-product.settings.enable_video_looping.label"
    },
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 36
    }
  ]
}
{% endschema %}