We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more

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

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

jeffBBVT
Visitor
2 0 0

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"
  ]
}

 

Replies 3 (3)

Shadab_dev
Shopify Partner
1583 83 173

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.

Buy me Coffee, if you feel i was helpful. Email Me here or WhatsApp me with this link for any help with shopify theme customizations or any project in web dev. If this is helpful, please Like and Accept the solution.
jeffBBVT
Visitor
2 0 0

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

Shadab_dev
Shopify Partner
1583 83 173

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.

Buy me Coffee, if you feel i was helpful. Email Me here or WhatsApp me with this link for any help with shopify theme customizations or any project in web dev. If this is helpful, please Like and Accept the solution.