Layout problems

Hi,

I am developing a website for an artist, she wants a Shopify buy button below her artworks in the gallery page. I am trying to achieve this result but I have problems with the layout. I have also tried to place the button HTML code inside a DIV without success.
I have attached two screenshots to better explain my problem.

Thanks for your help.

Hey guys,

is there someone who can help me?

Thanks.

Hi @espositodnl86, to me it looks you’re having an issue with the html code(s) from Shopify and not Blocs. Your call to action produces multiple buttons or none if I understand correctly. I would suggest to post the same on the Shopify forum. Please upload your page to have a look.
Edit: this might help you: Creating a Buy Button · Shopify Help Center

Im no expert in this - but is there a way to design the layout in Shopify with all information, costs etc and then embed this whole script into the Blocs page?

A bit like how Ecwid is done? There is just one area of edit then and stops it from being messy, you client will have full control over everything and your blocs page will reflect this.

@eldar did a great demo of Ecwid on this link and im sure Shopify has the same type of method?

Thats as much as I can help i’m afraid, i’m a simple builder! but the as @Jerry has said above this could be a Shopify issue.

Good luck.

That’s strange. I’m also currently working on a Blocs site using Shopify Buy button however I do not have the same issue.

My issue (and how I got here) is I’m looking to centre the Buy Button within the column. For some reason it’s not working for me. It appears to me you have this working, perhaps you could elaborate on this? I tried the centre layout when outputting the button from Shopify however this doesn’t seem to fix it either. I must be missing something simple (I hope).

Hi @RPH4, just wrap the code widget into a div container and centre. This should fix your issue.

I’m not sure if I should create a separate topic for the issue of centred Shopify Buy Buttons. I created a test and outputted 3 buy buttons from Shopify (a left aligned, a centred, and a right aligned). I placed them all in their own DIVs and switched it to centre. However, as you can see by the screenshot, none of them are displaying correctly. Anyone solved this?

This is killing me!

UPDATE:
For those who have the same issue as I had, you simply need to add (without the quotes):
<“center”>
Button code
<"/center">

Not sure why that wasn’t included when you output a centre-aligned button but there you have it. I hope it helps someone.

1 Like