customise section

Topic summary

A user wants to create a custom section in the Dawn theme matching a specific layout shown in an attached image.

Solution provided includes:

  • Accessing theme code via Shopify admin (Online Store > Themes > Edit code)
  • Creating a new section file in the Sections directory
  • Adding custom HTML, CSS, and Liquid code to achieve the desired design
  • Optionally defining schema settings for theme editor customization
  • Including the section in relevant template files using Liquid tags
  • Testing changes before going live

The discussion remains open for further assistance if needed. The image attachment is central to understanding the specific layout requirements.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.

hi m using Dawn theme and wants to create customized section like shown in picture

Hi @Nabeelshakil

I see you’re looking to create a custom section in the Dawn theme, similar to the one shown in your image. Let’s walk through the process together.

1. Access Your Theme’s Code:- From your Shopify admin dashboard, navigate to Online Store > Themes.

  • Find your current theme (Dawn) and click on Actions > Edit code.

2. Create a New Section:- In the Sections directory, click on Add a new section.

  • Name your section appropriately (e.g., custom-section) and click Create section.

3. Add Your Custom Code:- In the newly created custom-section.liquid file, you’ll see some default code. You can replace this with your custom HTML, CSS, and Liquid code to achieve the desired layout and functionality.

4. Define Section Settings (Optional):- To make your section customizable from the theme editor, you can define settings within {% schema %} tags. This allows you to add text fields, image pickers, and other inputs that can be adjusted without touching the code.

5. Include the Section in Your Theme:- To add this custom section to a specific page or template, you’ll need to include it in the relevant template file. For example, to add it to your homepage, you can add {% section ‘custom-section’ %} in the index.liquid file.

6. Test Your Changes:- After saving your changes, preview your store to ensure the new section appears as intended and functions correctly.

If you need any other assistance, I am willing to help.

Best regards,

Daisy.