Solved

How can I separate products into shaded squares on my product page?

Benjiji93
Tourist
8 1 0

how do I seperate the products on my product page into seperate shaded squares

Accepted Solutions (2)

PageFly-Oliver
Astronaut
840 175 155

This is an accepted solution.

Hi @Benjiji93 

 

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: Paste the below code at the bottom of the file -> Save

 

<style>
ul#product-grid li {
    border: solid;
}
</style>

 

 

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

Benjiji93
Tourist
8 1 0

This is an accepted solution.

Thank you so much

 

View solution in original post

Replies 12 (12)

Sweet_Savior_3
Shopify Partner
1040 82 93

Hello @Benjiji93 

 

Welcome to Shopify community.

 

Can you please elaborate more about your requirement ?

 

Thanks

Don't forget to like and accept the solution to help others store owners.
Looking for an expert for your store ? Hire Me
Have any queries ? Send Here
From Less To Further !!!
Benjiji93
Tourist
8 1 0

I creating a multi product store but Im having issues with the layout.I would like to separate each product with a dark square outline.

I would also like the squares to be the same sizes.

Sweet_Savior_3
Shopify Partner
1040 82 93

Okay. So do you want to link multiple products to one main product. When clicked on the swatch it should redirect to particular product page ?

If no please provide a screenshot of your requirement.

Don't forget to like and accept the solution to help others store owners.
Looking for an expert for your store ? Hire Me
Have any queries ? Send Here
From Less To Further !!!
Benjiji93
Tourist
8 1 0

No, I have 8 products listed on the product page, they  are all next to each other with a white backround. What I would like to do is to separate the products in individual squares or outline so it looks cleaner. 

Sweet_Savior_3
Shopify Partner
1040 82 93

Okay so you want to separate products to look when listed. Do you want to add unique color outline to each products or want to give unique backgrounds to each product grids ?

Don't forget to like and accept the solution to help others store owners.
Looking for an expert for your store ? Hire Me
Have any queries ? Send Here
From Less To Further !!!
Benjiji93
Tourist
8 1 0

I want to add a dark gray outline for each product. 

Sweet_Savior_3
Shopify Partner
1040 82 93

Please share your store url.

Don't forget to like and accept the solution to help others store owners.
Looking for an expert for your store ? Hire Me
Have any queries ? Send Here
From Less To Further !!!
Sweet_Savior_3
Shopify Partner
1040 82 93

Not the admin url. The store front end URL and if the store is password protected for customers do share the password too.

Don't forget to like and accept the solution to help others store owners.
Looking for an expert for your store ? Hire Me
Have any queries ? Send Here
From Less To Further !!!
Benjiji93
Tourist
8 1 0

PageFly-Oliver
Astronaut
840 175 155

This is an accepted solution.

Hi @Benjiji93 

 

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: Paste the below code at the bottom of the file -> Save

 

<style>
ul#product-grid li {
    border: solid;
}
</style>

 

 

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Benjiji93
Tourist
8 1 0

This is an accepted solution.

Thank you so much