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

Store Design
, , , ,
1

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.

biznazz101_0-1685932887009.png
biznazz101_0-1685932887009.png2690×811 89.9 KB

Current Section Code:


  
Pick Your Plan

  
    {%- for block in section.blocks %}
      

        
{{ block.settings.package }}

        
          $
          {{ block.settings.price }}
          /mo
        

      

    {% endfor %}
  

  
    [Activate](https://yodolefi.com/account/login)
  

{% 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 %}
2

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:


  
Pick Your Plan

  
    {%- for block in section.blocks %}
      

        
{{ block.settings.package }}

        
          $
          {{ block.settings.price }}
          /mo
        

        
          Activate
        

      

    {% endfor %}
  

{% 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 () 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 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
3

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