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

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay