How can I relocate the slide button above the slide?

Shopify Discussion
1

Hey, I would like to move the slide button to above the slide. As the picture bellow.

I’ll do a photo edit how I’d like!
Can someone help me?

My website link: https://freitasbonfiglioli.myshopify.com/

Captura de tela 2023-04-28 183426.png
Captura de tela 2023-04-28 183426.png1338×970 207 KB

Captura de tela 2023-04-28 183510.png
Captura de tela 2023-04-28 183510.png1338×966 230 KB

2

But what code do I use to leave it that way definitively?

3

You have to find where is element html on your theme.

Here are the steps to find the HTML element and move it to the top:

  1. Log in to your Shopify admin panel.
  2. Click on “Online Store” from the left-hand menu.
  3. Select “Themes” from the submenu.
  4. On the Themes page, locate the theme that you want to edit and click “Actions” > “Edit code”.
  5. In the “Edit Code” section, find the file that contains the code for the slide. This could be in a Liquid file or a JavaScript file, depending on the slider plugin you’re using.
  6. Locate the HTML element that represents the slide button. This may be a button or a link.
  7. Cut the HTML code for the slide button.
  8. Find the HTML element where you want to move the slide button to. This may be at the top of the slide or in a different section of the page.
  9. Paste the HTML code for the slide button into the new location.
  10. Save the changes by clicking on the “Save” button.

here is another method to do this.

  1. Log in to your Shopify admin panel.
  2. Click on “Online Store” from the left-hand menu.
  3. Select “Themes” from the submenu.
  4. On the Themes page, locate the theme that you want to edit and click “Actions” > “Edit code”.
  5. In the “Edit Code” section, scroll down and find the CSS file. This file is typically named “theme.css” or “styles.css”.
  6. Open the CSS file and scroll to the bottom of the file.
  7. Copy the code I provided earlier and paste it at the bottom of the CSS file.
  8. Save the changes by clicking on the “Save” button.
.slideshow__controls.slideshow__controls--top.slider-buttons.no-js-hidden {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    width: 100%;
}