Prestige theme - make buttons transparent with a border

Store Design
, ,
1

Hello everyone! I’m using the Prestige theme on my Shopify store and I’d like to make my buttons transparent with a border. Could you please guide me on how to accomplish this? Any help or suggestions would be greatly appreciated. Thank you!

1 Like
2

Hi @Ajla ,

This is Henry at PageFly - Shopify Advanced Page Builder app.

You can try this code by following these steps:

Go to Online store => themes => actions => edit code and add this code on file theme.liquid before tag

PageFlyHenry_0-1685264964266.png
PageFlyHenry_0-1685264964266.png1600×794 139 KB

PageFlyHenry_1-1685264964269.png
PageFlyHenry_1-1685264964269.png1600×777 197 KB

If the code doesn’t work please help me share Store URL and password so I can check it.

Hope this answer helps.

Best regards,

Henry | PageFly

3

Hello @Ajla

To make buttons transparent with a border in the Prestige theme on your Shopify store, you’ll need to make some modifications to the theme’s code. Here’s a step-by-step guide to help you accomplish this:

  1. Log in to your Shopify admin panel and go to “Online Store” and then “Themes.”

  2. Find the Prestige theme and click on the “Actions” dropdown menu, then select “Edit code.” This will open the theme code editor.

  3. In the theme code editor, locate the “theme.scss.liquid” file under the “Assets” directory.

  4. Open the “theme.scss.liquid” file and scroll to the bottom or search for the section where you can add custom CSS styles.

  5. Add the following CSS code to make buttons transparent with a border:

.btn {
  background-color: transparent;
  border: 1px solid #000; /* Replace #000 with the desired border color */
  color: #000; /* Replace #000 with the desired button text color */
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

.btn:hover {
  background-color: #000; /* Replace #000 with the desired background color on hover */
  color: #fff; /* Replace #fff with the desired button text color on hover */
}

  1. Customize the values in the code to match your desired button appearance. You can change the border color, text color, and background color on hover by modifying the hex color codes (#000 and #fff).

  2. Save the changes you made to the file.

  3. Visit your Shopify store and navigate to a page with buttons. The buttons should now appear transparent with a border and change color on hover according to the CSS modifications you made.

By following these steps and adding the custom CSS code to the “theme.scss.liquid” file, you can make buttons transparent with a border in the Prestige theme on your Shopify store.

4

Hello @Ajla

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->theme.css>Add this code at the bottom.

.button, .shopify-challenge__button, .shopify-payment-button__button--unbranded {
    background: transparent !important;
    border: 1px solid transparent !important;
    color: #000 !important;
}