BUY BUTTON in a table??

Shopify Partner
1 0 0

I'd love for three buy buttons to appear in a row along the bottom of a blog post... so they appear side-by-side on desktop and stacked on mobile.

Any tips on embedding buy buttons like this, possibly in a table format?

0 Likes

The Shopify buy button uses <div> tag, which by default occupies the entire width forcing the other element to start at the next line. To make them display side by side, you will need to add some CSS to them.

For A Few Products

Add style="display: inline-flex;" to your buy button like this: 

<div id="product-component-******" style="display: inline-flex;"></div>
<script type="text/javascript">......</script>

You will need to add this to all buy buttons you wish to align side by side, adding to just 1 buy button may prevent it from working properly.

 

For ALL Products On Your Blog Post

Add this line of codes at the top of your blog template by going Shopify Admin -> Online Store -> Theme -> Edit Code -> Template -> article.liquid (or similar)

<head> <!-- There MUST NOT be any code above the <head> section or it may not work. -->
<style>
div { 
    display: inline-flex; /* This makes the <div> to display only the width needed for the content you can also uses class or id to specify the <div> element as this changes ALL <div> element to inline. */
}
/* This is an example for using id */
#id { 
    display: inline-flex;
}
/*This is an example for using class */
.class { 
    display: inline-flex;
}
/* End of Examples */
</style>
</head>

 

Explanation:

Since the buy button uses <div> tag, <div> tag is a block level tag in html. A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can). By default is using 

div {
    display: block;
}

so all you have to do is change the block to inline-flex which tells the <div> not to take out the entire width but instead, just enough width to display the content.

Like me if I'm Awesome :D
Accept as Solution if I solved your problem
Email: anthonykung@hailiga.org
Beaver from Oregon State University
0 Likes
New Member
1 0 0

I know this thread is over a year old. The css is not working in my Wordpress page. Can you help with this?

0 Likes