Add Image Slider in Shopify Page
Wow Shopify with AI
files/Channels_-_Growth_Social_Static_Affiliates_Affiliates-Merchants__320x480_7724dbcb-6bd4-46ed-8a59-93eb2012e8b0.png

Add Image Slider in Shopify Page

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: Compatible with Shopify 2.0 FREE themes only.

Add a simple slider in your Shopify page and can arrange it with your Shopify page content. 

With the code below, we need to edit the page and enclosed the images you want in the slider. You can add multiple image sliders. Please note that spaces does affect the space before and after the slider. Be mindful when doing so.

You can check the demo store here. Password: made4uo

What you are buying:

  • Add an image slider on the Shopify page
  • Slider size is half of the page container
  • Change the position of slider in the page
  • Height of the slider is affected by the maximum image height
  • Make sure to have images with portrait size or landscape grouped together

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. Go to Admin Shopify store > Themes > Actions > Edit Code

2. In Section folder, open the main-page.liquid

3. Replace the whole code with the code below. Make sure to SAVE

<

4. Next, we need to create a page. From your Admin page, go to Online store, then Pages. 

5. Write the page, but when you want the slider to enclose the image, add the text below before the first image. Make sure to not add spaces.

<

 

See image below on how the "===page-slider===" is added before the first image. NOTE: Do not add quotation marks (")

Before the "===page-slider==="

6. Add text below after the last image. Please follow on how it is written below.

<

 

See image below on how the "===/page-slider===" is added after the last image. NOTE: Do not add quotation marks (")

Last image of the "===/page-slider==="

See the image below, how to make a space between the next image that is not included in the page-slider.

Click the image that you want to place beside the slide. Make sure to add a space on the left. For this example below, I set it to 10. 

Add a space on the left of image

7. To change the position of the slider, make sure to change the alignment of the first image only inside the slider. Click the image, then change the Alignment to left, center, or right. See image below.

Slider position

8. Click SAVE

 If you are having issues at times, it might be because some code was changed in your Admin Page. Make sure that the code for the ===page-slider=== is enclosed by a <p> or <p><span>. You need to click the "<>" to see the code. See image below

Shopify code settings

If you are having troubles, just contact us with "Chat with us."

That's it (",)

Copied!
Back to blog

Leave a comment