Enable swipe on desktop

[ecommfirst]

Hi All, 

Using the Trade theme, have added a multicolumn section that swipes on mobile but not on Desktop. Is there a way to do this? Thanks in advance. see below 

shopify.com/store/magicalmepieces

[Amir_456]

To enable swiping in a multicolumn section on both mobile and desktop devices, you'll likely need to implement custom CSS or JavaScript code. Here's a general approach you can take:

1. Identify the Multicolumn Section: Locate the HTML markup or CSS classes associated with the multicolumn section on your Shopify theme. You may need to inspect the page elements using your web browser's developer tools to find this information.

2. Implement Swiping Behavior: Write custom JavaScript code to enable swiping functionality for the multicolumn section. You can use libraries like Swiper.js or Slick.js to handle touch events and swipe gestures. Here's a simplified example using Swiper.js:

html

Copy code

<!-- Include Swiper CSS --> <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"> <!-- Multicolumn Section HTML Markup --> <div class="multicolumn-section"> <!-- Your multicolumn content here --> </div> <!-- Include Swiper JS --> <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script> <script> // Initialize Swiper var swiper = new Swiper('.multicolumn-section', { // Enable swiping behavior slidesPerView: 'auto', spaceBetween: 10, // Add other Swiper options as needed }); </script>

1. Apply Custom Code to Your Shopify Theme: Once you've written the custom JavaScript code, you'll need to apply it to your Shopify theme. Depending on your theme setup, you can add the code directly to your theme files (e.g., theme.liquid, theme.js, etc.) or use Shopify's built-in theme customization options to insert the code.

2. Test and Refine: After applying the custom code, thoroughly test the swiping functionality on both mobile and desktop devices to ensure it works as expected. Make any necessary adjustments to the code or styling to achieve the desired behavior.

Keep in mind that implementing custom code changes to your Shopify theme may require some technical expertise, and it's essential to back up your theme files before making any modifications. Additionally, consider the implications of customizations on future theme updates and compatibility with other features of your Shopify store. If you're not comfortable making these changes yourself, you may want to consult with a Shopify developer or expert for assistance.

[wildlingcandle]

Hello, 

I had been trying to do this for a while, and although I couldn't find an exact solution I wanted to share this tutorial for a testimonial slider that I used instead. I had to adapt my content a little to suit it but it's the closest I could find! 

https://mrdigitals.com/how-to-add-testimonial-slider-in-shopify-store-dawn-theme/ 

Shoutout to the Amazing Learning channel on YouTube - my website would not be without it 🙂