Add custom liquid block to product information

Mark04
Visitor
3 0 0

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.

Replies 5 (5)

JasmeetVT14313
Shopify Partner
204 48 56

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.



JasmeetVT14313_0-1713437465551.png

 

 

- Helpful? Please hit Like and mark it as a solution
- VTN Power Wishlist ultimate solution for effortless wishlist management. Free plan available
- Feel free to contact me at jasmeet.kaur@vtnetzwelt.com
Mark04
Visitor
3 0 0

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
Shopify Partner
204 48 56

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!

- Helpful? Please hit Like and mark it as a solution
- VTN Power Wishlist ultimate solution for effortless wishlist management. Free plan available
- Feel free to contact me at jasmeet.kaur@vtnetzwelt.com
Mark04
Visitor
3 0 0

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
Shopify Partner
204 48 56

@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

- Helpful? Please hit Like and mark it as a solution
- VTN Power Wishlist ultimate solution for effortless wishlist management. Free plan available
- Feel free to contact me at jasmeet.kaur@vtnetzwelt.com