Buy buttons are off in Fabric theme

Technical Q&A
, ,
1

Hi everyone,
I’m using the Fabric theme on my new webshop. I’m struggling with buy buttons, I can’t seem to figure out how to place them one under the other. The theme itself places the buttons weirdly. And even if I thick “always stack buttons” they stay the same.

Would really appreciate your help on how to sort this out. Thanks a lot!

Link to the preview: https://q49n3qtm43pnvdnt-65159627020.shopifypreview.com

Screenshots of the issue:

image
image728×654 21.2 KB

2

Hey @lucylucy9608

You have this code added somewhere in your theme which is causing that. Either it will be in your theme files or somewhere in the “Custom CSS” option.

@media screen and (max-width: 749px) {
    body:has(.header[transparent]) .content-for-layout > .shopify-section:first-child .button {
        margin-left: 40px !important;
    }
}

I suggest you to search this code within your theme files by using the “Search” button as shown in the screenshot below.

image
image458×413 7.71 KB

Search for it and remove the whole code which I mentioned above and that should sort out your problem.

Alternatively, you can also add this code below in your theme files.

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
<style>
body:has(.header[transparent]) .content-for-layout > .shopify-section:first-child .button {
    margin-left: unset !important;
}
</style>

RESULT:

image
image348×442 17.5 KB

Hope that helps! If it did, a Like and Marking it as Solution goes a long way and helps others find the fix faster too.

Best,
Moeed

3

@lucylucy9608 The issue is with the button margin, you have to remove that in order to fix this issue.

Go to your product page in theme customizer, then click on the main product section and scroll down to custom css.

Add the following and then click on Save.

body:has(.header[transparent]) .content-for-layout>.shopify-section:first-child .button {
margin-left: 0px !important;
}

4

it works, thank you so much!!

5

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

Cheers,
Moeed

6

hey @Moeed again, I noticed the code moves all first child buttons including the button on my HP, is there any way around it? I want my button on HP to stay as before, but the the code there is no margain on the left side.

Thanks again.

7

Hi again, I indeed just realized that this is my code in the CSS file:

@media screen and (min-width: 750px) {

body:has(.header[transparent]) .content-for-layout > .shopify-section:first-child .button {

margin-left: 50px !important;

}

}

@media screen and (max-width: 749px) {

body:has(.header[transparent]) .content-for-layout > .shopify-section:first-child .button {

margin-left: 40px !important;
}

}

However, I do need to move the button on the home page, while keeping the buy button well organized and neat.

Do you have any tips on how to solve this? Many thanks again, appreciate the help.

Lucy

8

hey @lucylucy9608, that rule targets the first-child button on every page, so removing it fixed the product page but broke the homepage one to.

just pin it to the homepage instead. drop this into the <body> tag in theme.liquid:

template-{{ request.page_type }}

then add your rule back with body.template-index in front:

@media screen and (min-width: 750px) {
  body.template-index:has(.header[transparent]) .content-for-layout > .shopify-section:first-child .button {
    margin-left: 50px !important;
  }
}
@media screen and (max-width: 749px) {
  body.template-index:has(.header[transparent]) .content-for-layout > .shopify-section:first-child .button {
    margin-left: 40px !important;
  }
}

now only the homepage gets the margin, product page stays clean.