DEV Community

Qrolic Technologies
Qrolic Technologies

Posted on

1

How to create a section with a customized option?

Follow this tutorial to create a section with a customize option in Shopify.

  1. Log in to your Shopify admin panel and navigate to the Section folder.
  2. Click on the Add a new section link.
    Alt Text

  3. Add a section name and hit the Create Section button.
    Alt Text

  4. Add a dynamic image in your section.

You can view all your schema type from here

Now add the following code in grid-box.liquid file:

{% schema %} 
  { 
    "name": "Grid Box", 
    "settings": [{
           "type": "image_picker", 
           "id": "image", 
           "label": "This is image picker" 
        }] 
  } 
{% endschema %} 
Enter fullscreen mode Exit fullscreen mode

Now update the Setting_data.json file with the following code:

"grid-box": {
        "type": "grid-box", 
        "settings": { 
            "image": "shopify:\/\/shop_images\/pexels-sam-lion-5710223.jpg" 
         } 
} 
Enter fullscreen mode Exit fullscreen mode

Now write your section name in content for an index of your home page section.

"content_for_index": [ 
      "grid-box" 
    ] 
Enter fullscreen mode Exit fullscreen mode

Quadratic AI

Quadratic AI – The Spreadsheet with AI, Code, and Connections

  • AI-Powered Insights: Ask questions in plain English and get instant visualizations
  • Multi-Language Support: Seamlessly switch between Python, SQL, and JavaScript in one workspace
  • Zero Setup Required: Connect to databases or drag-and-drop files straight from your browser
  • Live Collaboration: Work together in real-time, no matter where your team is located
  • Beyond Formulas: Tackle complex analysis that traditional spreadsheets can't handle

Get started for free.

Watch The Demo 📊✨

Top comments (0)

Image of Stellar post

🚀 Stellar Dev Diaries Series: Episode 1 is LIVE!

In the Stellar Dev Diaries, we take a dive deep into the experiences of the Freelii team as they build and launch their product on the Stellar Network.

Read more