Change background color on Buy Button Product

Store Design
,
1

Hi, I am using the Buy Button on this clients website and want to format how the collection displays on the page.

When creating the Buy button collection it seems you can change the color of the button, details & cart page but not the product display.

If you view the page https://vbdev.com.au/ssindustries/?view=article&id=325&catid=56 I would like a white background on each product with a 25px padding.

I am able to create the look using dev tools by adding the following CSS

.shopify-buy__product

{background-color: #ffffff; padding:25px;}

This issue is I cant find where to add it or where to modify it.

The attached file is what I am trying to acheive

Hope you can help

Thanks

Wayne

shopify_css.png
shopify_css.png1748×1368 207 KB

2

Hi @wayne_hines

You can attach this code within your buy button
3

Hi @wayne_hines , you can add the following code in theme editor using custom css:

.shopify-buy__product + .shopify-buy__product {
    margin-top: 0;
    background: #fff;
    padding: 25px;
}
4

Hi @Dan-From-Ryviu & @Abdosamer

Thank you for your quick replies. I had already tried that but have added it again and it does not make a difference.

Appreciate any other suggestions

Thanks

Wayne

Sample of code added


.shopify-buy__product + .shopify-buy__product {
margin-top: 0;
background: #fff;
padding: 25px;
}



/<![CDATA[/
(function () {
var scriptURL = ‘https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js’;

5

Hi, I remember it has option to customize when you create Buy Nows buttons.
Could you try to edit in that way?

6

Can you provide a screenshot of the theme editor when choose this section?

7

Hi, Thanks again but I cant see any option to customise during the creation of the button. I have gone back and created a brand new button and cant see any way to do it. Any clues

Thanks

Wayne

8

Thanks, here it is attached.

If there is another theme that has the option, please let me know. I can change themes as we are only using the Buy Button

Thanks Again!!!

shopify_css2.png
shopify_css2.png1771×1383 276 KB

9

Could you check is there any option to customize in Layout and Advanced settings?

10

I have looked in both areas and there is no options (have attached images). I also looked at 4 other sites taht I look after with different templates and they are all exactly the same.

Appreciate any other ideas

shopify_css3.png
shopify_css3.png351×1086 23.5 KB

shopify_css4.png
shopify_css4.png346×546 16.6 KB

11

So please try add the code I provide to header file of platform that you are using

12

Thanks Again..

I have added the css into the website (Joomla) and it will not show through the Shopify Injection. Not sure if Shopify will block any external override, I even tried making the code !important. It is in there now if you want to have a look.

Im think that the overide or altered code will need to come from Shopify.

Hope there is a solution.

1 Like
13

I hope so!