Compatibility: All Shopify Theme (design might vary).
The Multicolumn with Image Slider Viewer is a versatile web component that combines a multicolumn layout with a dynamic image slider. It allows you to present multiple columns of content alongside an interactive image slider, enhancing the visual appeal and user experience of your website. With customizable options and responsive design, it seamlessly integrates into your site, providing an engaging and organized way to showcase various types of information.
You can open the the pop-up slider by clicking the image of the multicolumn slider. This images are file links from you Admin page > Content > Files.
You can check the demo store here. Password: made4uo
What you are buying:
- Add multicolumn with image slider viewer section
- Add multiple images from your files
What makes our code better:
- We do not use external libraries, with that being said, our code will have no to minimal effect to your website's speed performance
- We do not leave or add codes use to advertise for our website
- Our code is mobile friendly
Any issues related to the code will be fix with no additional cost, excluding code customization requests. Simply contact us with "Chat with us." We are just a button away.
To start:
1. From your Admin page, go to Online store > Themes > Click the three dots, then Edit code
2. Create a section, liquid file, and name it whatever you want, then replace the default code with the code below. Make sure to SAVE.
3. Go to Asset folder, and create a CSS file name "custom-multicolumn", then paste the code below. Make sure to SAVE.
4. In the same folder, Asset, find the theme.js or global.js (your main javascript file for your theme).
5. Add the code below at the very end of the file, then SAVE.
6. Customize your theme, and add the Multicolumn image viewer section.
To have the images in pop up:
1. From you Admin page, go to Content, then Files
2. Click the link,
to get the image links.
3. In your Theme editor, find the Multicolumn image view and click the block or Column.
4. Place the image links inside the Image links from your website file and make sure to separate with comma (,) and no space in between.
That's it ('',)