Add custom liquid block to product information

[Mark04]

Hi,

I've created my own custom liquid section. Everything works as expected, except for the placement of this section. I want it to be placed in the product info section, beneath the buy buttons. I cannot however find any documentation on this topic, and the only youtube tutorial for this did not work for my situation.

How can I add this already made section to this part of my product page? I get that it probably has to change from a section to a block since the product info is a section on its own. It seems like a common thing to do, since a lot of apps do this and my theme (impact) does this as well.

[JasmeetVT14313]

Hi @Mark04 

You can use the "Custom Liquid" block for this. Check the attached screenshot

If you'd like to discuss this more, don't hesitate to send me a PM.

Please hit Like and mark it as a solution if this has helped you.

[Mark04]

Thank you for your answer. Unfortunately, pasting this section code in the 'Custom Liquid' block does not work for me. My liquid code has a few settings to edit the block in the Shopify editor. I'm not sure if that is possible through the Custom Liquid block? I know a lot of apps manage to do this.

You can view the section code that I'd like to put in this block here:

{%- if section.settings.heading != blank -%}
  <p
    class="usp_heading"
    style="color: {{ section.settings.text_color }}; font-size: {{ section.settings.font_size }}px; margin-block-end: {{ section.settings.margin_bottom }}px"
  >
    {{ section.settings.heading }}
  </p>
{%- endif -%}
<ul class="usp_list">
  {%- for block in section.blocks -%}
    <li class="usp" style="padding-inline-start: {{ section.settings.indent }}px">
      <svg
        class="usp_icon"
        style="color: {{ block.settings.icon_color }}; width: {{  block.settings.icon_size }}px"
        viewBox="0 0 14 10"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path d="M4.89571 10L0 5.25988L1.22393 4.07484L4.89571 7.62994L12.7761 0L14 1.18503L4.89571 10Z" fill="currentColor"/>
      </svg>
      <span class="usp_text" style="color: {{ block.settings.text_color }};font-size: {{ block.settings.font_size }}px">
        {{ block.settings.title }}
      </span>
    </li>
  {% endfor %}
</ul>

{% schema %}
{
  "name": "Test section",
  "class": "mvh_usp",
  "settings": [
    {
      "type": "inline_richtext",
      "id": "heading",
      "label" : "Heading",
      "default" : "Why coose us"
    },
    {
      "type": "range",
      "id": "font_size",
      "min": 8,
      "max": 28,
      "step": 1,
      "unit": "px",
      "label": "Font size",
      "default": 16
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Font color"
    },
    {
      "type": "range",
      "id": "margin_bottom",
      "min": 0,
      "max": 28,
      "step": 1,
      "unit": "px",
      "label": "Text margin bottom",
      "default": 8
    },
    {
      "type": "range",
      "id": "indent",
      "min": 0,
      "max": 24,
      "step": 1,
      "unit": "px",
      "label": "Text indent",
      "default": 8
    }
  ],
  "blocks": [
    {
      "type": "usp",
      "name": "USP",
      "settings": [
        {
          "type": "inline_richtext",
          "id": "title",
          "label" : "USP text",
          "default" : "My custom USP"
        },
        {
          "type": "range",
          "id": "icon_size",
          "min": 8,
          "max": 28,
          "step": 1,
          "unit": "px",
          "label": "Icon size",
          "default": 16
        },
        {
          "type": "color",
          "id": "icon_color",
          "label": "Icon color"
        },
        {
          "type": "range",
          "id": "font_size",
          "min": 8,
          "max": 28,
          "step": 1,
          "unit": "px",
          "label": "Font size",
          "default": 16
        },
        {
          "type": "color",
          "id": "text_color",
          "label": "Text color"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Test section",
      "blocks": [
        {
          "type": "usp"
        },
        {
          "type": "usp"
        },
        {
          "type": "usp"
        }
      ]
    }
  ]
}
{% endschema %}

{% stylesheet %}
  .mvh_usp .usp_list {
    padding-inline-start: 0;
  }

  .mvh_usp .usp {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
  }

  .mvh_usp .usp_icon {
    width: 16px;
  }
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

[JasmeetVT14313]

Hi @Mark04 
In this case we'll have to create a block as per your requirement/settings.
If you like me to do it for you or need my assistance, don't hesitate to send me a PM

If this information is helpful, please consider giving it a Like. If it resolves your issue, kindly mark it as the Solution!

[Mark04]

I don't really see where I can PM you but if you can help me convert it to a block that I can use in the product info section that would be great!

[JasmeetVT14313]

@Mark04 
I can convert and provide you the code but there will be multiple updates to be made apart from that.
You can check my signature part if you are not able to PM me

[Gherea]

I have the same problem , I am using Maxmin theme bought from themeforest, the is custom liquid option as section but not as block, and the is no more information to see like price... in  product template , I wanted to add custom liquid code sothat to create custom print options text and  image , can you help me how please. check my screenshot for more details.

[supper]

Did you find out how to add a custom liquid to the blocks?