Move the arrows to the top right of the page

Store Design
, , ,

Topic summary

A user seeks to reposition collection slider arrows to the top right of their page, sharing a screenshot as reference.

Solution Provided:

  • Edit theme code via Online Store → Theme → Edit code
  • Open the theme.liquid file
  • Paste custom CSS/markup code before the closing body tag

Follow-up Customizations:
The user successfully implemented the initial solution and requested additional modifications:

  • Increase arrow size
  • Change arrow color to black
  • Replace default arrows with custom image icons

The support representative (from PageFly Landing Page Builder) provided CSS code snippets for the size and color adjustments. The conversation remains ongoing regarding the custom image implementation, with the final question about using personal arrow images from a computer rather than Shopify’s default icons still awaiting a response.

Summarized with AI on November 22. AI used: claude-sonnet-4-5-20250929.
1

How to move the collection arrows on the slider to move to the top right of the page as shown below

Screenshot 2023-03-15 at 21.03.50.png
Screenshot 2023-03-15 at 21.03.50.png2056×1020 159 KB

2

Hi @kickduo ,

This is Victor from PageFly - Landing page builder, I’d like to suggest this idea:

Step 1. Go to Online Store → Theme → Edit code
Step 2. Open your theme.liquid theme file
Step 3. Paste below code before :

Hope my answer will help you.

Best regards,

Victor | PageFly

1 Like
3

wow thank you fantastic

4

do you no how to make the arrows bigger and also change the colour to black ?

5

Yes, you can try this code below:
6

amazing thank you so much, by any chance do you no how we can change the icons to a custom image? to have my own arrows from my computer not shopifys