How To Add A Light Border Around Products On Reformation Theme

Basically, I want to create this minimal border effect when the mouse is hovered over products. I want a minimal, clean look to my website. I also want my headers and descriptions centered like they are here below the images, but I don’t know what coding to use. or anything to make these types of edits. thank you to anyone that helps!

1 Like

Hi @daniellamendi ,

Would you mind to share your URL wbsite with password if its protected?

Thanks!

https://15bae4.myshopify.com/?_ab=0&_fd=0&_sc=1&key=a81b6b5f943c59c1f606d541c26a74cd8141080397475da0cce6efdab5744031&preview_theme_id=151377936667

password: aJKlme34

1 Like

Thank you for the information, but I dont see any products here to style.

I haven’t added any yet, I want the template to be ready when I import images, if possible. Also I would like the border across the website, for example

Oh Okay, But it would be difficult to add border on the product that dont have? Please provide a product so we can style it. Thanks!

For the submenu, try this.

From your Shopify admin dashboard, click on “Online Store” and then “Themes”.

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

In the “Assets” folder, click on “base.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

And Save.

ul.sub-menu {
    border: 1px solid black;
}

Result:

I hope it help.

Hi, thank you for your response. although, there is no base.css under assets. any tips?

1 Like

You can paste it on the app.css.

Where exactly do I paste it? before or after any line? I pasted it and nothing changed

Nevermind, figured it out thank you so much! Can I add borders to blogs as well? And other imagery throughout my homepage?

Paste at the bottom. Yes we can put borders, but it must be visible like the products.