Enable swipe on desktop

ecommfirst
Shopify Partner
7 0 1

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

 

Screenshot 2024-05-01 at 10.29.23.png

Reply 1 (1)

Amir_456
Visitor
2 0 0

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.