Enable swipe on desktop

Store Design
, ,

Topic summary

A user working with Shopify’s Trade theme seeks to enable desktop swiping functionality for a multicolumn section that currently only swipes on mobile.

Proposed Solutions:

  • Custom JavaScript Implementation: One response suggests using swipe libraries like Swiper.js or Slick.js to add touch/swipe gestures to desktop. This involves:

    • Identifying the multicolumn section’s HTML/CSS classes
    • Including Swiper CSS and JS files
    • Initializing Swiper with appropriate configuration options
    • Adding the custom code to theme files (theme.liquid, theme.js) or using Shopify’s built-in customization options
    • Testing thoroughly across both mobile and desktop devices

  • Alternative Workaround: Another user shares a tutorial for creating a testimonial slider in the Dawn theme as an alternative approach, noting they adapted their content to fit this solution since an exact match wasn’t found.

Important Considerations:

  • Backup theme files before making modifications
  • Custom code changes require technical expertise
  • Consider consulting a Shopify developer if uncomfortable with code modifications
  • Test compatibility with future theme updates
Summarized with AI on November 4. AI used: claude-sonnet-4-5-20250929.
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
Screenshot 2024-05-01 at 10.29.23.png2212×1396 253 KB

2

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

  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.

3

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 :slightly_smiling_face: