Simple Theme, add border around all images that show a product/collection

Solved
New Member
10 0 0

Hi, as per the title, I am looking to add a 1px black border around all images that could show a product image.

This means images appearing in the homepage section (collection list, featured collection), catalog which lists all products, individual product pages. Thanks in advance!

 

I did a search and tried the following but was not able to achieve the above.

 

‘product-grid-item.liquid’

 

<div class="supports-js" style="border: 1px solid; border-color: #000; max-width: {{ 600 | times: product.featured_image.aspect_ratio | round }}px; margin: 0 auto;">

The above worked for individual products but did not enclose images properly, left a small white space at the bottom, perhaps a padding setting needs to be changed.

 

Theme.scss.liquid

body.template-collection .product .product__image {
  border: 1px solid; border-color: #000;
}

The above worked better as there was no small whitespace at the bottom. But still did not work for Collection List, Featured Collection.

 

 

Many thanks in advance for assistance.

 

 

 

 

0 Likes

Success.

Hello,
Please remove parent class from your current code i,e
use this

.product .product__image {
  border: 1px solid #000 !important; 
}
Want to modify or custom changes on store hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Content Writer | Digital Marketing | SEO Expert | Site Optimization | Web Design | Web Development
1 Like
New Member
6 0 0

Hi There, 

Hope you are doing great!

 

i have seen your post for "Simple Theme, add border around all images that show a product/collection", 

 

i am having 5+ years of working experience, 

 

and i am interested in this job as i have the desired working experience and successfully done so many projects, 

 

Sample Work:

 

http://vintageled.com.au/

http://isurplus.com.au/

http://www.oregonscientificshop.eu/

 

Rates for the service:

 

Hourly Costing: $14/hr.

Monthly Costing: $2250/month (194 hours)

 

Contact Details: Can you please add me on skype for ease of communication I only use skype for business communication: cis.ron

Waiting for the reply.

 

Our clients always appreciate our Services, and we are confident we will have a long term, successful business relationships with you!!

 

Regards, 

Ron Walker 

Skype id : cis.ron

0 Likes
Highlighted
New Member
10 0 0

Hi Pallavi,

 

.product .product__image {
  border: 1px solid #000 !important; 
}

Your solution above works well, and applies to all product listings (where price is shown below the image).

However, how do i also add a border to say images displayed by a Collection List on the homepage? Many thanks.

0 Likes

Please share your site link

Want to modify or custom changes on store hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Content Writer | Digital Marketing | SEO Expert | Site Optimization | Web Design | Web Development
0 Likes

Success.

Shopify Expert
72 9 9

hi

 

Style 1:

Code :

<style>
.product {
    border: 1px solid #000;
}
</style>

Add style code above of closing </head> tag in theme.lquid.

Output :

Untitled-1.jpg

-------------------------------------------------------------------------------------------------------------------------------------------------------------

Style 2:

Code :

<style>
.product img {
    border: 1px solid #000;
}
</style>

Add style code above of closing </head> tag in theme.lquid.

Output :

Untitled-1.jpg

 

---------------------------------------------------------------------------------------------------------------------------------------------------------------------

Style 3:

Code :

<style>
.product img {
    border: 1px solid #000;
    border-bottom: none;
}
.product  .product__image-wrapper {
    margin-bottom: -1px;
}
.product  .product__title.text-center {
    border: 1px solid #000;
    border-top: none;
    border-bottom: none;
    padding-top: 10px;
}
.product  .product__prices.text-center {
    border: 1px solid #000;
    border-top: none;
}
</style>

Add style code above of closing </head> tag in theme.lquid.

Output 

Untitled-1.jpg

 

As of now you face any problem please feel free to contact .

thank you 

SilverClouding Team

0 Likes