How to Create a Shopify Slider on Mobile with GemPages V7

How to Create a Slider on Mobile

GemPages has responsive design built-in, which means when you add a slider on mobile, it will automatically have the right design suitable for mobile devices. GemPages always encourages users to design on desktop first and then switch to mobile view to make any necessary adjustments.

Option 1: Create a Shopify Slider Using Carousel Element

This option allows you to create a Shopify slider for almost any element.

Step 1: Open the page where you want to add the slider.
Step 2: Find the Carousel element and drag it onto your page.

Step 3: Click on the Carousel to open its settings. For each slide, you can add various elements such as:

• Hero Banners: Great for promotional content with images, headlines, and call-to-action buttons.
• Product Modules: Show individual products with images, titles, and prices.
• Images or Text Blocks: For custom content or testimonials.

Etc,.

Customize each slide’s content to fit your needs.

Step 4: With the Carousel selected, go to the Settings tab. You can adjust:

• Number of Items: How many items to display per slide (up to 12).
• Spacing: Space between items.
• Sneak Peek: Enable to partially show the next slide.
• Navigation Controls: Enable arrows or dots for manual control.
• Autoplay: Set automatic slide transitions.

For more info on carousel settings, see the Carousel element.
For a visual guide on creating slideshows with the Carousel and Hero Banner elements, you might find the following tutorial helpful:

Step 5: Switch to Mobile View inside the editor to preview the slider on smaller screens. Adjust text, images, and buttons as needed.

Option 2: Create a Shopify Slider Using Product List Element

If you only want a slider for product images, use the Product Image List element.

Step 1: Open the page to edit, find the Product List element, then drag and drop it onto your page.

Step 2: Select the Product Image List, go to the Settings tab, find Layout section, and choose Slider.

Step 3: Customize the slider options such as number of images, navigation controls, and spacing.

For more information, see the Product list element.

How to Create a Slider for Mobile Devices Only?

If you want a slider that shows only on mobile devices, use GemPages’ visibility settings:

Step 1: Select the slider you want to hide on desktop.
Step 2: Go to the Advanced tab, then Display On, and toggle off the desktop view.

This will make the slider visible only on mobile devices.