How to add a sidebar section to a page to the right of main content

Technical Q&A
1

I am not a programmer, and have only about 2 months experience using Shopify as an admin. I am trying a new theme (Dawn) but have yet to publish it. I have a page template within this theme that I need to update to include a sidebar area to the right of the main content. The AI code generator has created the sidebar and its required functionality, but it did so as just a section. I need to update the page template to include the sidebar so that the content appears on the right side instead of below the main content. What is my best course of action here?

Here is the code from the page template file (templates/page.default-with-sidebar.json):

/*
 * ------------------------------------------------------------
 * IMPORTANT: The contents of this file are auto-generated.
 *
 * This file may be updated by the Shopify admin theme editor
 * or related systems. Please exercise caution as any changes
 * made to this file may be overwritten.
 * ------------------------------------------------------------
 */
{
  "sections": {
    "main": {
      "type": "main-page",
      "settings": {
        "padding_top": 28,
        "padding_bottom": 28
      }
    },
    "175043037946126716": {
      "type": "_blocks",
      "blocks": {
        "ai_gen_block_1bc20a0_FzCyQe": {
          "type": "ai_gen_block_1bc20a0",
          "settings": {
            "sidebar_image": "shopify://shop_images/Petes_Greens_logo.png",
            "image_height": 120,
            "image_border_radius": 0,
            "headline": "Related Products",
            "headline_alignment": "left",
            "max_products": 6,
            "columns_desktop": "2",
            "columns_mobile": "1",
            "product_image_height": 160,
            "product_border_radius": 6,
            "background_color": "#ffffff",
            "headline_color": "#000000",
            "product_title_color": "#000000",
            "product_price_color": "#666666",
            "headline_size": 20,
            "product_title_size": 14,
            "product_price_size": 13,
            "padding": 20,
            "section_spacing": 20,
            "product_spacing": 12,
            "border_radius": 8
          },
          "blocks": {}
        }
      },
      "block_order": [
        "ai_gen_block_1bc20a0_FzCyQe"
      ],
      "settings": {}
    },
    "1750432241b4f94853": {
      "type": "_blocks",
      "settings": {}
    }
  },
  "order": [
    "main",
    "175043037946126716",
    "1750432241b4f94853"
  ]
}
2

You can add may be a class to this specific template and then make the sidebar go right with css that will target only this template.

3

Thanks for your reply. I’m not a programmer though, so I don’t know how to add a class or use css.

4

You can reach out via personal links below with Collab access or you can invite me with my mail also down in the links below.

I did something similar but not exactly to what you want but sharing just as a ln example: www.eluxestore.de

See the collections page, this is not a sidebar but just a static column coded directly into the collection file.