How can I add a link option to each section block?

[biznazz101]

I would like to add a link to each option so when clicked user is taken to the selected URL. Currently there is no option in the custom section. Any help would be highly appreciated.

Current Section Code:

<div id="plan" class="page-width">
  <div class="plan-title center">Pick Your Plan</div>

  <div class="yodolefi-plan">
    {%- for block in section.blocks %}
      <div class="yodolefi-plan-item">
        <div class="yodolefi-plan-item-package">{{ block.settings.package }}</div>
        <div class="yodolefi-plan-price-box">
          <span class="yodolefi-plan-usd">$</span>
          <span class="yodolefi-plan-price">{{ block.settings.price }}</span>
          <span class="yodolefi-plan-mo">/mo</span>
        </div>
      </div>
    {% endfor %}
  </div>
  <div class="plan-active-button">
    <a href="https://yodolefi.com/account/login">Activate</a>
  </div>
</div>

<style>
  .plan-active-button{
    text-align:center;
    margin-top: 40px;
  }
  .plan-active-button a{
    text-decoration: none;
padding: 10px 15px;
background: #f0592c;
color: #fff;
  }
  .plan-active-button a:hover{
    opacity:0.8;
  }
  .yodolefi-plan{
    cursor:grab;
  }
  .yodolefi-plan-price-box{
    display: flex;
justify-content: center;
align-items: baseline;
  }
  .yodolefi-plan-usd{
    font-size: 35px;
align-self: flex-start;
margin-right: 3px;
  }
  .yodolefi-plan-price{
    font-size: 60px;
    font-weight:bold;
  }
  .yodolefi-plan-mo{
    font-size: 22px;
  }
  .plan-title{
    font-size: 35px;
font-weight: bold;
margin-bottom: 25px;
color: #555;
  }
  .yodolefi-plan-item{
    background: #f6f6f6;
    border-radius: 10px;
    overflow: hidden;
  }
  .yodolefi-plan-item-package{
    background: #f0592c;
    text-align:center;
    font-size: 30px;
    font-weight:bold;
    color:#fff;
  }
</style>




{% schema %}
  {
    "name": "Plan & Package",
    "settings": [
      
    ],
    "blocks": [
    {
      "type": "plan",
      "name": "Plan",
    
      "settings": [
        {
          "type": "text",
          "id": "package",
          "label": "Package"
          
        },
        {
          "type": "text",
          "id": "price",
          "label": "Price"
        },
  {
          "type": "text",
          "id": "act_fee",
          "label": "Act Fee"
        }
      ]
    }
  ],
    "presets": [
      {
        "name": "Plan & Package"
      }
    ]
  }
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

[Moeed · Accepted solution]

Hey @biznazz101 

To add a link to each option in your Shopify store's custom section, you can modify your existing code by adding a URL field to your plan block settings. Here's an updated version of your code with the necessary modifications:

<div id="plan" class="page-width">
  <div class="plan-title center">Pick Your Plan</div>

  <div class="yodolefi-plan">
    {%- for block in section.blocks %}
      <div class="yodolefi-plan-item">
        <div class="yodolefi-plan-item-package">{{ block.settings.package }}</div>
        <div class="yodolefi-plan-price-box">
          <span class="yodolefi-plan-usd">$</span>
          <span class="yodolefi-plan-price">{{ block.settings.price }}</span>
          <span class="yodolefi-plan-mo">/mo</span>
        </div>
        <div class="plan-active-button">
          <a href="{{ block.settings.url }}">Activate</a>
        </div>
      </div>
    {% endfor %}
  </div>
</div>

<style>
  /* Your existing styles */
</style>

{% schema %}
{
  "name": "Plan & Package",
  "settings": [

  ],
  "blocks": [
    {
      "type": "plan",
      "name": "Plan",
      "settings": [
        {
          "type": "text",
          "id": "package",
          "label": "Package"
        },
        {
          "type": "text",
          "id": "price",
          "label": "Price"
        },
        {
          "type": "url",
          "id": "url",
          "label": "URL"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Plan & Package"
    }
  ]
}
{% endschema %}

In the updated code, I added a new setting of type "url" with the ID "url" to the plan block in the schema section. This will allow you to specify a URL for each plan block in the Shopify admin.

Inside the for loop, I added a new div with the class "plan-active-button" and an anchor (<a>) tag inside it. The href attribute of the anchor tag is set to {{ block.settings.url }}, which will dynamically populate the URL based on the value you set in the Shopify admin for each plan block.

Make sure to replace the <style> section with your existing styles or update them as needed.

With these modifications, you can set a unique URL for each plan in the Shopify admin, and when the "Activate" link is clicked, the user will be taken to the corresponding URL.

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[biznazz101]

This did work great. Thank you very much for the help!