Custom Multicolumn with Image Viewer

Custom Multicolumn with Image Viewer

Log in or Sign up to ensure access to purchased code across multiple devices.

How to see the code

1. Please log in/create an account first. This is to ensure that all purchases are connected to an account and can be viewed on different devices.

2. Purchase the code using the "purchase box" on the specific page of the desired code.

3. After the purchase, please refresh the page.

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,File 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 ('',)

Copied!
Back to blog

Leave a comment