Sidebar Menu in Minimal Theme - Trying from outdated thread

Highlighted
Shopify Partner
5 0 0

In my attempt to create a left sidebar menu for collections, I've followed instructions on an "outdated" thread here:

https://ecommerce.shopify.com/c/ecommerce-design/t/add-sidebar-to-collection-page-in-minimal-theme-1...

For the most part I think I have it. I've got the sidebar menu on the left, but my items all appear in one column and below the menu, instead of to the right of it. Maybe some of the code in that thread is no longer compatible?

I thought the "span" of my page was 12, which would mean the span3 is for the menu, and a span9 next to it for the products, but for some reason all the items are appearing below instead of next to?

 

Any thoughts?

0 Likes
Shopify Partner
5 0 0

I figured it out. In the CSS file (theme.scss.liquid) I created a class for each "column":

.span3-1-3 {
  width: 25%;
  float: left;
  padding-left: 30px;
  margin-right: 0px;
}

.span9-2-3 {
  width: 75%;
  float: left;
  margin-left: 0px;
}

Then directly under  <div class="grid-uniform grid-link__container">  in the collection.liquid file I added:

<!---My custom added div--->
  <div class="span3-1-3">
  {% include 'product_sidebar' %}
    </div>
  
  <!---My custom added div--->
  <div class="span9-2-3">

The second class (span9-2-3) encloses all the products, so there is an closing div ( </div> ) after the last {% endfor %} command.

 

I also changed this {% unless grid_item_width %} {% assign grid_item_width = 'wide--one-sixth large--one-quarter medium-down--one-half' %} {% endunless %}  at the top of the product-grid-item.liquid in snippets. I changed it to {% unless grid_item_width %} {% assign grid_item_width = 'wide--one-quarter large--one-third medium-down--one-half' %} {% endunless %}

That just changed the number of items that appear per row, and is subjective.

If anyone else finds this thread and still has questions let me know.

0 Likes
Highlighted
New Member
2 0 0

Hi Laura - I think I'm following the same trails you were on. This was referenced in that outdated thread. Did that code replace what's in the Collections file, and if so, which one? There are three Collections files in Minimal. Stoked to hear you got this working!

0 Likes
Highlighted
New Member
2 0 0

Hey - It looks like we've been down the same trails trying to create a sidebar in Minimal. I'm stoked you got this working. To start, wondering if you used the code from the dated thread you referenced above? It's the github code provided by Caroline. If so, did you completely replace what was in the collections.liquid file?

0 Likes
Highlighted
New Member
1 0 0

HI

Where did you put this in

In the CSS file (theme.scss.liquid) I created a class for each "column":

.span3-1-3 {
  width: 25%;
  float: left;
  padding-left: 30px;
  margin-right: 0px;
}

.span9-2-3 {
  width: 75%;
  float: left;
  margin-left: 0px;
}

I want to add a sidebar to the minimal theme too.

Jackie

0 Likes
Highlighted
New Member
4 0 0

HI there,

I am also trying to follow the instructions from the outdated post to create a sidebar on the left side of the product page. https://ecommerce.shopify.com/c/ecommerce-design/t/add-sidebar-to-collection-page-in-minimal-theme-1...

The snippet product.loop.liquid file is no longer there. I can't follow the instructions.

Next, I copied/pasted the code provided by Caroline to the collection.liquid. That change the 4 items per row to 1 item per row. 

I have some css/html experience. If someone can provide some intermediate steps or updates from the 2013 post, it would be great.

Thanks!

0 Likes
Highlighted
New Member
5 0 0

Sir can you guide me , i want to add sidebar to minimal theme. This is the link of my website" https://amazewears.com/"

i want to make it look like this "https://www.buysense.pk/"

0 Likes