Enable arrows on product page slider [no apps]

In this tutorial, we’ll walk you through the process of adding a custom slider arrow feature to your Shopify product pages. This feature is designed to work seamlessly with your store’s existing slider, ensuring a smooth and fast experience for your customers.

Unlike other apps that remove the original slider and inject their own, which can be slow and laggy, this solution uses the original theme's slider, making it much faster and more efficient.

The EZFY Slider Arrows are highly customizable, giving you full control over the appearance of the arrows. With options like arrow size (for both desktop and mobile), color, background color, hover effects, border radius, and even the option to upload your own custom SVG arrow design, you can tailor the look to perfectly match your store's style.

Before starting: 👉 Click here to download the code 👀 Click here to view a live demo

Step 1: adding the code to your theme

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you want to edit, then click on the three dots next to it and select Edit Code.
   
3. On the left sidebar, scroll down and click on the Sections folder to expand it.
4. Click on the Add a new section button located below the Sections folder.
   
5. In the popup window that appears:
   1. Make sure the liquid option is selected.
   2. Name the file exactly ezfy-slider-arrows.
   3. Click Done.
      
6. Now open the file you previously downloaded. Inside it, you’ll find a file named ezfy-slider-arrows.txt.
7. Open it and copy all of its contents.
8. Paste the code inside the new section file ezfy-slider-arrows.liquid that you just created. Delete all the code in there and paste the new one.
9. Click the Save button at the top-right corner to save your changes.
   
   

Step 2: Customizing the Slider Arrows Section

Now that you've added the code to your theme, it’s time to enable it:

1. From your Shopify admin, click on the three dots in the top left corner, and select Customize theme.
   
   
2. In the theme editor, go to the Product pages section by clicking on the Products dropdown at the top and selecting Default product.
   
   
3. Once the product page is loaded, locate the Add section button on the left sidebar and click on it.
4. In the "Add section" menu, search for EZFY Slider Arrows. When it appears, click on it to add it to the page.
   
   
   
5. Drag the new section to the very top of your product page, ensuring it is positioned above other sections.
   
   
   
6. Finally, click on the section Product Information > Layout, and choose either "Thumbnails" or "Thumbnails Carousel".
   
   Also make sure you pick "Show thumbnails" or "Hide Thumbnails" for the mobile layout. Click on save to trigger the updates.
   
   
   

Now you’ve successfully added the slider arrows to your product page! To customize it, simply click on the section to access its settings. You’ll now see a variety of options that you can adjust. Here are the most important ones:

1. Arrow Size: Adjust the arrow size for desktop and mobile. You can choose any value from 20px to 100px for desktop, and 16px to 80px for mobile.
2. SVG Dimensions: Set the size of the SVG arrow to match your design requirements (ranging from 8px to 80px).
3. Arrow Colors: Customize the color of the arrows, the background color, as well as the hover effects for both the arrow and the background.
4. Arrow Style: Modify the border radius to round the corners of your arrows (from 0% to 50%).
5. Custom SVG: If you prefer a completely unique arrow design, you can paste your own SVG code here.

Take your time to experiment with these options to match your store’s branding. Once you're happy with how everything looks, don’t forget to hit the Save button in the top right corner to keep your changes.

Conclusion

Congratulations! You've successfully followed this step-by-step Shopify tutorial to add and customize the EZFY Slider Arrows on your Shopify product page. This lightweight feature enhances the customer experience by enabling smooth navigation through product images — all while preserving speed by reusing the original Shopify slider instead of replacing it.

Unlike most third-party apps that inject heavy external sliders and slow down your store, the EZFY Slider Arrows use your theme's native slider, keeping your Shopify store fast, responsive, and optimized for conversions.

The built-in settings give you full control to match your brand’s aesthetic. You can easily customize arrow size for desktop and mobile, SVG dimensions, arrow colors, hover states, and even use your own custom SVG icons. Want the arrows pointing left or right? You can toggle that too.

By using this approach instead of relying on slow apps, you ensure a better shopping experience, improved theme performance, and faster page load times — all of which boost SEO and conversion rates.

If you haven’t already, don’t forget to click Save in your theme editor to apply your changes. You’re now ready to impress visitors with a slick and high-performing image slider!

We hope this Shopify tutorial helped you take your store design to the next level. For more Shopify coding tips and lightweight customizations, stay tuned with us.