How can I create a pricing table for the Dawn theme?

Store Design
, , , , ,
1

Hi!

I need to create a Pricing Table for my page to look exactly like this but I do know how to proceed. I think I might need to use a multicolumn section but the line dividers and check icons, that I do not know how can be inserted.

Thank you so much in advance!

Screenshot 2023-08-28 at 5.28.26 PM.png
Screenshot 2023-08-28 at 5.28.26 PM.png1153×842 69 KB

2

Hello @gsantoz ,

Yes you can use multicoluns.

But to make it similar like the images it must necessary hat you have knowledge of the html/css.
Alternatively you can use this app GEMPAGES.

Thanks

3

Hi @gsantoz

You can try to using an app

https://apps.shopify.com/search?q=pricing%20table

4

HI, Guleria! Thanks for your reply. I already made a pricing table using the multicolumn but I wanted to include such checkmarks from the example image and the line divider as well. Here’s what I currently have using the multicolumn

gsantoz_0-1693221175258.png
gsantoz_0-1693221175258.png1292×684 48.7 KB

5

Thanks, Dan! I want to make it without using an app as much as possible

6

Hello Gsantoz,

So here is one of fully customizable pricing table section you can use for your shop . Adjust it to your requirements . If you need any help you can contact me through link in my video .

ptable.gif

Below you will find the code to be inserted . Create a section called pricingtable.liquid or anything of your liking and paste the code as below.

{% style %}
  .pricingTable {
    margin: 40px auto;
  }
  .pricingTable > .pricingTable-title {
    text-align: center;
  
    font-size: 3em;
    font-size: 300%;
    margin-bottom: 20px;
    letter-spacing: 0.04em;
  }
  .pricingTable > .pricingTable-subtitle {
    text-align: center;
  
    font-size: 1.8em;
    letter-spacing: 0.04em;
    margin-bottom: 60px;
  }
  @media screen and (max-width: 480px) {
    .pricingTable > .pricingTable-subtitle {
      margin-bottom: 30px;
    }
  }
  .pricingTable-firstTable {
    list-style: none;
    padding-left: 2em;
    padding-right: 2em;
    text-align: center;
  }
  .pricingTable-firstTable_table {
    vertical-align: middle;
    width: 31%;
   
    display: inline-block;
    padding: 0px 30px 40px;
    text-align: center;
    max-width: 320px;
    transition: all 0.3s ease;
    border-radius: 5px;
  }
  @media screen and (max-width: 767px) {
    .pricingTable-firstTable_table {
      display: block;
      width: 90%;
      margin: 0 auto;
      max-width: 90%;
      margin-bottom: 20px;
      padding: 10px;
      padding-left: 20px;
    }
  }
  @media screen and (max-width: 767px) {
    .pricingTable-firstTable_table > * {
      display: inline-block;
      vertical-align: middle;
    }
  }
  @media screen and (max-width: 480px) {
    .pricingTable-firstTable_table > * {
      display: block;
      float: none;
    }
  }
  @media screen and (max-width: 767px) {
    .pricingTable-firstTable_table:after {
      display: table;
      content: "";
      clear: both;
    }
  }
  .pricingTable-firstTable_table:hover {
    transform: scale(1.08);
  }
  @media screen and (max-width: 767px) {
    .pricingTable-firstTable_table:hover {
      transform: none;
    }
  }
  .pricingTable-firstTable_table:not(:last-of-type) {
    margin-right: 1.5%;
  }
  @media screen and (max-width: 767px) {
    .pricingTable-firstTable_table:not(:last-of-type) {
      margin-right: auto;
    }
  }
  .pricingTable-firstTable_table:nth-of-type(2) {
    position: relative;
  }
  @media screen and (max-width: 767px) {
    .pricingTable-firstTable_table:nth-of-type(2) h1 {
      padding-top: 8%;
    }
  }
  .pricingTable-firstTable_table:nth-of-type(2):before {
    content: "Most Popular";
    position: absolute;
    color: white;
    display: block;
    background-color: #3bbdee;
    text-align: center;
    right: 15px;
    top: -25px;
    height: 65px;
    width: 65px;
    border-radius: 50%;
    box-sizing: border-box;
    font-size: 0.5em;
    padding-top: 22px;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    transition: all 0.5s ease;
  }
  @media screen and (max-width: 988px) {
    .pricingTable-firstTable_table:nth-of-type(2):before {
      font-size: 0.6em;
    }
  }
  @media screen and (max-width: 767px) {
    .pricingTable-firstTable_table:nth-of-type(2):before {
      left: 10px;
      width: 45px;
      height: 45px;
      top: -10px;
      padding-top: 13px;
    }
  }
  @media screen and (max-width: 480px) {
    .pricingTable-firstTable_table:nth-of-type(2):before {
      font-size: 0.8em;
    }
  }
  .pricingTable-firstTable_table:nth-of-type(2):hover:before {
    transform: rotate(360deg);
  }
  .pricingTable-firstTable_table__header {
    font-size: 1.6em;
    padding: 40px 0px;
    border-bottom: 2px solid #fff;
    letter-spacing: 0.03em;
  }
  @media screen and (max-width: 1068px) {
    .pricingTable-firstTable_table__header {
      font-size: 1.45em;
    }
  }
  @media screen and (max-width: 767px) {
    .pricingTable-firstTable_table__header {
      padding: 0px;
      border-bottom: none;
      float: left;
      width: 33%;
      padding-top: 3%;
      padding-bottom: 2%;
    }
  }
  @media screen and (max-width: 610px) {
    .pricingTable-firstTable_table__header {
      font-size: 1.3em;
    }
  }
  @media screen and (max-width: 480px) {
    .pricingTable-firstTable_table__header {
      float: none;
      width: 100%;
      font-size: 1.8em;
      margin-bottom: 5px;
    }
  }
  .pricingTable-firstTable_table__pricing {
    font-size: 3em;
    padding: 30px 0px;
    border-bottom: 2px solid #fff;
    line-height: 0.7;
  }
  @media screen and (max-width: 1068px) {
    .pricingTable-firstTable_table__pricing {
      font-size: 2.8em;
    }
  }
  @media screen and (max-width: 767px) {
    .pricingTable-firstTable_table__pricing {
      border-bottom: none;
      padding: 0;
      float: left;
      clear: left;
      width: 33%;
    }
  }
  @media screen and (max-width: 610px) {
    .pricingTable-firstTable_table__pricing {
      font-size: 2.4em;
    }
  }
  @media screen and (max-width: 480px) {
    .pricingTable-firstTable_table__pricing {
      float: none;
      width: 100%;
      font-size: 3em;
      margin-bottom: 10px;
    }
  }
  .pricingTable-firstTable_table__pricing span:first-of-type {
    font-size: 0.35em;
    vertical-align: top;
    letter-spacing: 0.15em;
  }
  @media screen and (max-width: 1068px) {
    .pricingTable-firstTable_table__pricing span:first-of-type {
      font-size: 0.3em;
    }
  }
  .pricingTable-firstTable_table__pricing span:last-of-type {
    vertical-align: bottom;
    font-size: 0.3em;
    letter-spacing: 0.04em;
    padding-left: 0.2em;
  }
  @media screen and (max-width: 1068px) {
    .pricingTable-firstTable_table__pricing span:last-of-type {
      font-size: 0.25em;
    }
  }
  .pricingTable-firstTable_table__options {
    list-style: none;
    padding: 15px;
    font-size: 0.9em;
    border-bottom: 2px solid #fff;
  }
  @media screen and (max-width: 1068px) {
    .pricingTable-firstTable_table__options {
      font-size: 0.85em;
    }
  }
  @media screen and (max-width: 767px) {
    .pricingTable-firstTable_table__options {
      border-bottom: none;
      padding: 0;
      margin-right: 10%;
    }
  }
  @media screen and (max-width: 610px) {
    .pricingTable-firstTable_table__options {
      font-size: 0.7em;
      margin-right: 8%;
    }
  }
  @media screen and (max-width: 480px) {
    .pricingTable-firstTable_table__options {
      font-size: 1.3em;
      margin-right: none;
      margin-bottom: 10px;
    }
  }
  .pricingTable-firstTable_table__options > li {
    padding: 8px 0px;
  }
  @media screen and (max-width: 767px) {
    .pricingTable-firstTable_table__options > li {
      text-align: left;
    }
  }
  @media screen and (max-width: 610px) {
    .pricingTable-firstTable_table__options > li {
      padding: 5px 0;
    }
  }
  @media screen and (max-width: 480px) {
    .pricingTable-firstTable_table__options > li {
      text-align: center;
    }
  }
  .pricingTable-firstTable_table__options > li:before {
    content: "✓";
    display: inline-flex;
    margin-right: 15px;
    color: white;
 background-color: green;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    font-size: 0.8em;
    padding: 2px;
    align-items: center;
    justify-content: center;
  }
  @media screen and (max-width: 1068px) {
    .pricingTable-firstTable_table__options > li:before {
      width: 14px;
      height: 14px;
      padding: 1.5px;
    }
  }
  @media screen and (max-width: 767px) {
    .pricingTable-firstTable_table__options > li:before {
      width: 12px;
      height: 12px;
    }
  }
  .pricingTable-firstTable_table__getstart {
    color: white;
    border: 0;
    background-color: #71ce73;
    margin-top: 30px;
    border-radius: 5px;
    cursor: pointer;
    padding: 15px;
    box-shadow: 0px 3px 0px 0px #66ac64;
    letter-spacing: 0.07em;
    transition: all 0.4s ease;
  }
  @media screen and (max-width: 1068px) {
    .pricingTable-firstTable_table__getstart {
      font-size: 0.95em;
    }
  }
  @media screen and (max-width: 767px) {
    .pricingTable-firstTable_table__getstart {
      margin-top: 0;
    }
  }
  @media screen and (max-width: 610px) {
    .pricingTable-firstTable_table__getstart {
      font-size: 0.9em;
      padding: 10px;
    }
  }
  @media screen and (max-width: 480px) {
    .pricingTable-firstTable_table__getstart {
      font-size: 1em;
      width: 50%;
      margin: 10px auto;
    }
  }
  .pricingTable-firstTable_table__getstart:hover {
    transform: translateY(-10px);
    box-shadow: 0px 40px 29px -19px rgba(102, 172, 100, 0.9);
  }
  @media screen and (max-width: 767px) {
    .pricingTable-firstTable_table__getstart:hover {
      transform: none;
      box-shadow: none;
    }
  }
  .pricingTable-firstTable_table__getstart:active {
    box-shadow: inset 0 0 10px 1px #66a564, 0px 40px 29px -19px rgba(102, 172, 100, 0.95);
    transform: scale(0.95) translateY(-9px);
  }
  @media screen and (max-width: 767px) {
    .pricingTable-firstTable_table__getstart:active {
      transform: scale(0.95) translateY(0);
      box-shadow: none;
    }
  }
{% endstyle %}

  ## {{ section.settings.title }}
  ### {{ section.settings.subtitle }}

  
    {% for block in section.blocks %}
      - # {{ block.settings.title }}
        

            ${{ block.settings.price }}{{ block.settings.interval }}
        

        
            {% if block.settings.list-item-1 != blank %}
            - {{ block.settings.list-item-1 }}

            {% endif %}
            {% if block.settings.list-item-2 != blank %}
            - {{ block.settings.list-item-2 }}

            {% endif %}
            {% if block.settings.list-item-3 != blank %}
            - {{ block.settings.list-item-3 }}

            {% endif %}
            {% if block.settings.list-item-4 != blank %}
            - {{ block.settings.list-item-4 }}

            {% endif %}
            {% if block.settings.list-item-5 != blank %}
            - {{ block.settings.list-item-5 }}
            {% endif %}
       
        
        
      
    {% endfor %}

   
  

{% schema %}
{
  "name": "Pricing Table",
  "settings": [
      {
          "type": "text",
          "id": "title",
          "default": "Top Title",
          "label": "Title"
        },
      {
          "type": "text",
          "id": "subtitle",
          "default": "Subtitle",
          "label": "Subtitle"
        },
      {
      "type": "color_scheme",
      "id": "section_color_scheme",
      "label": "t:sections.all.colors.label",
      "default": "scheme-1"
    }
  ],
  "blocks": [
    {
      "type": "table",
      "name": "Table",
      "limit": 3,
        "settings": [
         {
          "type": "text",
          "id": "title",
          "default": "Title",
          "label": "Title"
        },
           {
          "type": "text",
          "id": "price",
          "default": "Price",
          "label": "Price"
        },
              {
          "type": "select",
          "id": "interval",
          "options": [
            {
              "value": "monthly",
              "label": "Monthly"
            },
            {
              "value": "yearly",
              "label": "Yearly"
            }
          ],
          "default": "monthly",
          "label": "Monthly"
        },
          {
            "type": "text",
          "id": "list-item-1",
          "default": "List Item 1",
          "label": "List Item 1"
          },
          {
            "type": "text",
          "id": "list-item-2",
          "default": "List Item 2",
          "label": "List Item 2"
          },
          {
            "type": "text",
          "id": "list-item-3",
          "default": "List Item 3",
          "label": "List Item 3"
          },
          {
            "type": "text",
          "id": "list-item-4",
          "default": "List Item 4",
          "label": "List Item 4"
          },
          {
            "type": "text",
          "id": "list-item-5",
          "default": "List Item 5",
          "label": "List Item 5"
          },
          {
          "type": "text",
          "id": "button",
          "default": "Button Title",
          "label": "Button Title"
        },
           {
          "type": "url",
          "id": "button_link",
          "label": "t:sections.image-with-text.blocks.button.settings.button_link.label"
        },
          {
            "type":"color",
            "id":"bgcolor",
            "default": "#FFFFFF",
            "label":"Background Color"
          }
        ]
    }
  ],
  "presets": [
   {
     "name":"Pricing Table"
   }
  ]
}
{% endschema %}

or If you need any help . You can contact me via mail : rahul@prowebcoder.com .

7

@gsantoz So I have a pricing table which is fully customizable

Please check

{% style %}
  .pricingTable {
    margin: 40px auto;
  }
  .pricingTable > .pricingTable-title {
    text-align: center;
  
    font-size: 3em;
    font-size: 300%;
    margin-bottom: 20px;
    letter-spacing: 0.04em;
  }
  .pricingTable > .pricingTable-subtitle {
    text-align: center;
  
    font-size: 1.8em;
    letter-spacing: 0.04em;
    margin-bottom: 60px;
  }
  @media screen and (max-width: 480px) {
    .pricingTable > .pricingTable-subtitle {
      margin-bottom: 30px;
    }
  }
  .pricingTable-firstTable {
    list-style: none;
    padding-left: 2em;
    padding-right: 2em;
    text-align: center;
  }
  .pricingTable-firstTable_table {
    vertical-align: middle;
    width: 31%;
   
    display: inline-block;
    padding: 0px 30px 40px;
    text-align: center;
    max-width: 320px;
    transition: all 0.3s ease;
    border-radius: 5px;
  }
  @media screen and (max-width: 767px) {
    .pricingTable-firstTable_table {
      display: block;
      width: 90%;
      margin: 0 auto;
      max-width: 90%;
      margin-bottom: 20px;
      padding: 10px;
      padding-left: 20px;
    }
  }
  @media screen and (max-width: 767px) {
    .pricingTable-firstTable_table > * {
      display: inline-block;
      vertical-align: middle;
    }
  }
  @media screen and (max-width: 480px) {
    .pricingTable-firstTable_table > * {
      display: block;
      float: none;
    }
  }
  @media screen and (max-width: 767px) {
    .pricingTable-firstTable_table:after {
      display: table;
      content: "";
      clear: both;
    }
  }
  .pricingTable-firstTable_table:hover {
    transform: scale(1.08);
  }
  @media screen and (max-width: 767px) {
    .pricingTable-firstTable_table:hover {
      transform: none;
    }
  }
  .pricingTable-firstTable_table:not(:last-of-type) {
    margin-right: 1.5%;
  }
  @media screen and (max-width: 767px) {
    .pricingTable-firstTable_table:not(:last-of-type) {
      margin-right: auto;
    }
  }
  .pricingTable-firstTable_table:nth-of-type(2) {
    position: relative;
  }
  @media screen and (max-width: 767px) {
    .pricingTable-firstTable_table:nth-of-type(2) h1 {
      padding-top: 8%;
    }
  }
  .pricingTable-firstTable_table:nth-of-type(2):before {
    content: "Most Popular";
    position: absolute;
    color: white;
    display: block;
    background-color: #3bbdee;
    text-align: center;
    right: 15px;
    top: -25px;
    height: 65px;
    width: 65px;
    border-radius: 50%;
    box-sizing: border-box;
    font-size: 0.5em;
    padding-top: 22px;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    transition: all 0.5s ease;
  }
  @media screen and (max-width: 988px) {
    .pricingTable-firstTable_table:nth-of-type(2):before {
      font-size: 0.6em;
    }
  }
  @media screen and (max-width: 767px) {
    .pricingTable-firstTable_table:nth-of-type(2):before {
      left: 10px;
      width: 45px;
      height: 45px;
      top: -10px;
      padding-top: 13px;
    }
  }
  @media screen and (max-width: 480px) {
    .pricingTable-firstTable_table:nth-of-type(2):before {
      font-size: 0.8em;
    }
  }
  .pricingTable-firstTable_table:nth-of-type(2):hover:before {
    transform: rotate(360deg);
  }
  .pricingTable-firstTable_table__header {
    font-size: 1.6em;
    padding: 40px 0px;
    border-bottom: 2px solid #fff;
    letter-spacing: 0.03em;
  }
  @media screen and (max-width: 1068px) {
    .pricingTable-firstTable_table__header {
      font-size: 1.45em;
    }
  }
  @media screen and (max-width: 767px) {
    .pricingTable-firstTable_table__header {
      padding: 0px;
      border-bottom: none;
      float: left;
      width: 33%;
      padding-top: 3%;
      padding-bottom: 2%;
    }
  }
  @media screen and (max-width: 610px) {
    .pricingTable-firstTable_table__header {
      font-size: 1.3em;
    }
  }
  @media screen and (max-width: 480px) {
    .pricingTable-firstTable_table__header {
      float: none;
      width: 100%;
      font-size: 1.8em;
      margin-bottom: 5px;
    }
  }
  .pricingTable-firstTable_table__pricing {
    font-size: 3em;
    padding: 30px 0px;
    border-bottom: 2px solid #fff;
    line-height: 0.7;
  }
  @media screen and (max-width: 1068px) {
    .pricingTable-firstTable_table__pricing {
      font-size: 2.8em;
    }
  }
  @media screen and (max-width: 767px) {
    .pricingTable-firstTable_table__pricing {
      border-bottom: none;
      padding: 0;
      float: left;
      clear: left;
      width: 33%;
    }
  }
  @media screen and (max-width: 610px) {
    .pricingTable-firstTable_table__pricing {
      font-size: 2.4em;
    }
  }
  @media screen and (max-width: 480px) {
    .pricingTable-firstTable_table__pricing {
      float: none;
      width: 100%;
      font-size: 3em;
      margin-bottom: 10px;
    }
  }
  .pricingTable-firstTable_table__pricing span:first-of-type {
    font-size: 0.35em;
    vertical-align: top;
    letter-spacing: 0.15em;
  }
  @media screen and (max-width: 1068px) {
    .pricingTable-firstTable_table__pricing span:first-of-type {
      font-size: 0.3em;
    }
  }
  .pricingTable-firstTable_table__pricing span:last-of-type {
    vertical-align: bottom;
    font-size: 0.3em;
    letter-spacing: 0.04em;
    padding-left: 0.2em;
  }
  @media screen and (max-width: 1068px) {
    .pricingTable-firstTable_table__pricing span:last-of-type {
      font-size: 0.25em;
    }
  }
  .pricingTable-firstTable_table__options {
    list-style: none;
    padding: 15px;
    font-size: 0.9em;
    border-bottom: 2px solid #fff;
  }
  @media screen and (max-width: 1068px) {
    .pricingTable-firstTable_table__options {
      font-size: 0.85em;
    }
  }
  @media screen and (max-width: 767px) {
    .pricingTable-firstTable_table__options {
      border-bottom: none;
      padding: 0;
      margin-right: 10%;
    }
  }
  @media screen and (max-width: 610px) {
    .pricingTable-firstTable_table__options {
      font-size: 0.7em;
      margin-right: 8%;
    }
  }
  @media screen and (max-width: 480px) {
    .pricingTable-firstTable_table__options {
      font-size: 1.3em;
      margin-right: none;
      margin-bottom: 10px;
    }
  }
  .pricingTable-firstTable_table__options > li {
    padding: 8px 0px;
  }
  @media screen and (max-width: 767px) {
    .pricingTable-firstTable_table__options > li {
      text-align: left;
    }
  }
  @media screen and (max-width: 610px) {
    .pricingTable-firstTable_table__options > li {
      padding: 5px 0;
    }
  }
  @media screen and (max-width: 480px) {
    .pricingTable-firstTable_table__options > li {
      text-align: center;
    }
  }
  .pricingTable-firstTable_table__options > li:before {
    content: "✓";
    display: inline-flex;
    margin-right: 15px;
    color: white;
 background-color: green;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    font-size: 0.8em;
    padding: 2px;
    align-items: center;
    justify-content: center;
  }
  @media screen and (max-width: 1068px) {
    .pricingTable-firstTable_table__options > li:before {
      width: 14px;
      height: 14px;
      padding: 1.5px;
    }
  }
  @media screen and (max-width: 767px) {
    .pricingTable-firstTable_table__options > li:before {
      width: 12px;
      height: 12px;
    }
  }
  .pricingTable-firstTable_table__getstart {
    color: white;
    border: 0;
    background-color: #71ce73;
    margin-top: 30px;
    border-radius: 5px;
    cursor: pointer;
    padding: 15px;
    box-shadow: 0px 3px 0px 0px #66ac64;
    letter-spacing: 0.07em;
    transition: all 0.4s ease;
  }
  @media screen and (max-width: 1068px) {
    .pricingTable-firstTable_table__getstart {
      font-size: 0.95em;
    }
  }
  @media screen and (max-width: 767px) {
    .pricingTable-firstTable_table__getstart {
      margin-top: 0;
    }
  }
  @media screen and (max-width: 610px) {
    .pricingTable-firstTable_table__getstart {
      font-size: 0.9em;
      padding: 10px;
    }
  }
  @media screen and (max-width: 480px) {
    .pricingTable-firstTable_table__getstart {
      font-size: 1em;
      width: 50%;
      margin: 10px auto;
    }
  }
  .pricingTable-firstTable_table__getstart:hover {
    transform: translateY(-10px);
    box-shadow: 0px 40px 29px -19px rgba(102, 172, 100, 0.9);
  }
  @media screen and (max-width: 767px) {
    .pricingTable-firstTable_table__getstart:hover {
      transform: none;
      box-shadow: none;
    }
  }
  .pricingTable-firstTable_table__getstart:active {
    box-shadow: inset 0 0 10px 1px #66a564, 0px 40px 29px -19px rgba(102, 172, 100, 0.95);
    transform: scale(0.95) translateY(-9px);
  }
  @media screen and (max-width: 767px) {
    .pricingTable-firstTable_table__getstart:active {
      transform: scale(0.95) translateY(0);
      box-shadow: none;
    }
  }
{% endstyle %}

  ## {{ section.settings.title }}
  ### {{ section.settings.subtitle }}

  
    {% for block in section.blocks %}
      - # {{ block.settings.title }}
        

            ${{ block.settings.price }}{{ block.settings.interval }}
        

        
            {% if block.settings.list-item-1 != blank %}
            - {{ block.settings.list-item-1 }}

            {% endif %}
            {% if block.settings.list-item-2 != blank %}
            - {{ block.settings.list-item-2 }}

            {% endif %}
            {% if block.settings.list-item-3 != blank %}
            - {{ block.settings.list-item-3 }}

            {% endif %}
            {% if block.settings.list-item-4 != blank %}
            - {{ block.settings.list-item-4 }}

            {% endif %}
            {% if block.settings.list-item-5 != blank %}
            - {{ block.settings.list-item-5 }}
            {% endif %}
       
        
        
      
    {% endfor %}

   
  

{% schema %}
{
  "name": "Pricing Table",
  "settings": [
      {
          "type": "text",
          "id": "title",
          "default": "Top Title",
          "label": "Title"
        },
      {
          "type": "text",
          "id": "subtitle",
          "default": "Subtitle",
          "label": "Subtitle"
        },
      {
      "type": "color_scheme",
      "id": "section_color_scheme",
      "label": "t:sections.all.colors.label",
      "default": "scheme-1"
    }
  ],
  "blocks": [
    {
      "type": "table",
      "name": "Table",
      "limit": 3,
        "settings": [
         {
          "type": "text",
          "id": "title",
          "default": "Title",
          "label": "Title"
        },
           {
          "type": "text",
          "id": "price",
          "default": "Price",
          "label": "Price"
        },
              {
          "type": "select",
          "id": "interval",
          "options": [
            {
              "value": "monthly",
              "label": "Monthly"
            },
            {
              "value": "yearly",
              "label": "Yearly"
            }
          ],
          "default": "monthly",
          "label": "Monthly"
        },
          {
            "type": "text",
          "id": "list-item-1",
          "default": "List Item 1",
          "label": "List Item 1"
          },
          {
            "type": "text",
          "id": "list-item-2",
          "default": "List Item 2",
          "label": "List Item 2"
          },
          {
            "type": "text",
          "id": "list-item-3",
          "default": "List Item 3",
          "label": "List Item 3"
          },
          {
            "type": "text",
          "id": "list-item-4",
          "default": "List Item 4",
          "label": "List Item 4"
          },
          {
            "type": "text",
          "id": "list-item-5",
          "default": "List Item 5",
          "label": "List Item 5"
          },
          {
          "type": "text",
          "id": "button",
          "default": "Button Title",
          "label": "Button Title"
        },
           {
          "type": "url",
          "id": "button_link",
          "label": "t:sections.image-with-text.blocks.button.settings.button_link.label"
        },
          {
            "type":"color",
            "id":"bgcolor",
            "default": "#FFFFFF",
            "label":"Background Color"
          }
        ]
    }
  ],
  "presets": [
   {
     "name":"Pricing Table"
   }
  ]
}
{% endschema %}

ptable.gif

8

You can create pricing table.

Here is the complete guide for FREE.

9

Yes, you’re right — a multicolumn section can work for basic layout, but getting the styling right with dividers, check icons, and proper spacing can be tricky if you’re not comfortable with custom HTML/CSS.

To save time and effort, you can use this ready-made section that’s built specifically for creating pricing tables on Shopify pages:
:backhand_index_pointing_right: https://arhamcommerce.com/products/iconic-price-table

It includes column layouts, check icons, dividers, and is fully customizable. You just need to copy and paste the section into your theme, and it works across any Shopify theme without needing an app.

Hope this helps!

Regards
Kushal | Arham Web Works