How to change collection navigation drawer to show from left on Blockshop theme?

[JunNa]

Hello everyone,

I would like to change the collection navigation drawer to show from left.

Currently, the drawer pops out from the right side.

Please see the attached screenshot.

 

Our collection page is blocked now, please let me know if you need anything.

Thank you all!

Here is the sections/collection--navigation.liquid code:

{%- liquid
assign ajax_url = collection.url | append: '?'
unless collection.current_vendor == blank and collection.current_type == blank
assign ajax_url = collection.url | append: '&'
endunless

assign show_browse_button = section.settings.show-browse-button
assign show_sort_button = section.settings.show-sort-button
assign show_refine_button = section.settings.show-refine-button
-%}

{%-
render 'navigation',
ajax_url: ajax_url,
custom_collection_list: section.settings.custom-list-collections,
mobile_buttons: 'browse,refine'
results_string: false,
show_browse_button: section.settings.show-browse-button,
show_collection_list: section.settings.show-collections-list,
show_layout_buttons: section.settings.show-layout-buttons,
show_search_link: section.settings.show-search-link,
show_sort_button: section.settings.show-sort-button,
show_sort_list: section.settings.show-sort-list,
show_refine_button: section.settings.show-refine-button,
show_refine_list: section.settings.show-refine-list,
storage_name: 'collection_layout',
swatches: section.settings.swatches
-%}

{%- if show_browse_button or show_refine_button or show_sort_button -%}
<div class="filter--for-drawer" style="display:none;">
{%-
render 'filter',
collection_url: collection.url,
custom_collection_list: section.settings.custom-list-collections,
filters: collection.filters,
show_collection_list: section.settings.show-collections-list,
show_refine_list: section.settings.show-refine-list,
show_search_link: section.settings.show-search-link,
show_sort_list: section.settings.show-sort-list,
sort_by: collection.sort_by,
sort_options: collection.sort_options,
swatches: section.settings.swatches
-%}
</div>
{%- endif -%}

{% schema %}
{
"name": "Collection navigation",
"class": "section--collection-navigation",
"settings": [
{
"content": "Quick links",
"type": "header"
},
{
"label": "Show browse button",
"id": "show-browse-button",
"type": "checkbox",
"default": true
},
{
"label": "Show sort by button",
"id": "show-sort-button",
"type": "checkbox",
"default": true
},
{
"label": "Show refine button",
"id": "show-refine-button",
"type": "checkbox",
"default": true
},
{
"label": "Show layout buttons",
"id": "show-layout-buttons",
"type": "checkbox",
"default": true
},
{
"content": "Drawer",
"type": "header"
},
{
"label": "Show collections list",
"id": "show-collections-list",
"type": "checkbox",
"default": true
},
{
"label": "Enable custom collection list",
"id": "custom-list-collections",
"type": "link_list"
},
{
"label": "Show sort by list",
"id": "show-sort-list",
"type": "checkbox",
"default": true
},
{
"label": "Show refine list",
"id": "show-refine-list",
"type": "checkbox",
"default": true
},
{
"type": "select",
"id": "swatches",
"label": "Swatches",
"options": [
{ "label": "Circle", "value": "circle" },
{ "label": "Square", "value": "square" },
{ "label": "None", "value": "none" }
],
"default": "circle",
"info": "Connect options to swatch colors or images using Shopify metafields. [Learn more](https://help.shopify.com/en/manual/custom-data/metafields/category-metafields/using-category-metafie...)"
},
{
"label": "Show search link",
"id": "show-search-link",
"type": "checkbox",
"default": true
}
]
}
{% endschema %}

[Entaice]

To change the collection navigation drawer to open from the left in the Blockshop theme, you'll need to adjust the CSS and maybe a bit of JavaScript for the behavior.

1. Edit CSS: In your theme's stylesheet (usually found under 'Assets' > theme.scss.liquid or similar), look for the styles that position the drawer. You might find something like `right: 0;`. Change that to `left: 0;`.

2. Adjust Javascript&colon; If there's JavaScript controlling the drawer toggle, ensure that it references the left instead of the right. This might involve changing `margin-right` to `margin-left` or modifying the animation to slide in from the left.

[JunNa]

Hi,
Thank you for your help but I can't find something like right:0 from theme.css.

Is there any other way to change the position?