How to add Slider in Multicolumn in Dawn theme in Shopify

Aug 13, 2022

How To Add Slider In Multicolumn In Dawn Theme In Shopify

Step 1:

Add setting schema:

Add this schema after swipe on the mobile checkbox schema.

{

"type": "checkbox",

"id": "swipe_on_desktop",

"default": false,

"label": "Swipe on desktop"

}

Step 2:

Around Line 44 conditions to add at the end of class.

{% if section.settings.swipe_on_mobile or section.settings.swipe_on_desktop %} slider {% endif %}{% if section.settings.swipe_on_mobile and section.blocks.size > 1 %} slider--mobile grid--peek{% endif %}{% if section.settings.swipe_on_desktop and section.blocks.size > 3 %} slider--everywhere{% endif %}

Step 3:

Around Line 109 add this condition for the buttons.

section.settings.show_mobile_slider or section.settings.swipe_on_desktop

Step 4:

Then create a new CSS file "section-multicolumn-slider-custom.css" in the Assets folder and paste the below code into this file.

.grid--2-col-tablet.slider--everywhere .multicolumn-list__item {

margin-top: 0;

}

.multicolumn .slider--everywhere+.slider-buttons {

display: flex;

}

Step 5: