Change background color on Buy Button Product

[wayne_hines]

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

 

[Dan-From-Ryviu]

Hi @wayne_hines 

You can attach this code within your buy button 

<style>
.shopify-buy__product { background-color: #ffffff; padding:25px; }
</style>

[Abdosamer]

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;
}

[wayne_hines]

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 

<style>
.shopify-buy__product + .shopify-buy__product {
margin-top: 0;
background: #fff;
padding: 25px;
}
</style>
<div id='collection-component-1699932266088'></div>
<script type="text/javascript">
/*<![CDATA[*/
(function () {
var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';

[Dan-From-Ryviu]

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

[wayne_hines]

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

[Abdosamer]

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

[wayne_hines]

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!!!

 

[Dan-From-Ryviu]

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

[wayne_hines]

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

  

[Dan-From-Ryviu]

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

[wayne_hines]

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.

[Dan-From-Ryviu]

I hope so!