I would like to align this amazon button to the left, putting it under the other buttons. How can I do that?
To edit the layout of anything on your site, you’ll need to write some CSS code to change how it displays.
The general steps:
-
Use a web browser dev tools to identify the element and experiment with moving it around.
-
Duplicate your live theme, so you can test on a backup theme without affecting the live site.
-
Write the CSS rule in your theme code (do this in a custom CSS file, not your theme.css file)
-
Test your theme in preview mode, if it’s good then publish it
Here’s a guide to doing this safely: https://speedboostr.com/how-to-safely-edit-your-shopify-theme.
In your case, it looks like the extra button is set to show next to the buy it now button, but is overflowing so drops to its own line below.
To make those buttons show vertical instead of left to right (or, to make that button show under the buy it now), you could add this to your custom CSS file (reference that guide if you don’t have one):
purchase-details__buttons purchase-details__spb--true {
display: block;
}
You might need to add some space to the button, to do that you can identify the ID or class of the button (explained in that guide) and then add something like this:
.shopify-payment-button {
margin-top: 10px;
}
If you get stuck or prefer to have a developer handle it, feel free to reach out to my team of Shopify developers at speedboostr.com/contact.
1 Like
Hey @summershop .
Thanks for reaching out.
I appreciate the screenshot that you have added as that is very helpful. Could you let us know which theme you are using?
If you are unsure about which theme is live on your store, you can navigate to the Theme Editor and select the three dots that are located towards the top left of the page. I took a screenshot from my test store to show you the section I am referring to:
Looking forward to your response.
Hey @summershop .
Thanks for the quick response!
Did you attempt the change of coding above advised by @JoesIdeas ? If this change worked, you can mark their post as a solution to inform others that may view the thread.
Looking into this, I noticed that it is a third-party theme that was not developed by Shopify. With that being said, since we are unfamiliar with the style of coding that is being used within the theme, it would be best to reach out to the developers of the theme. They should be able to provide you with additional support and insight to making this change.
Let me know if you have any additional questions.
1 Like