Help with a widget / embedded code

[Thevioletfox]

Hi everyone, I'm hoping someone can help me figure out why this widget isn't displaying correctly on my website.  When I'm in the editor, it looks correct (a long horizontal list of books with a scroll bar at the bottom.)  But when I publish it and look at the live site, it condenses to this little square box showing one book at a time.  

Here's what I see in the editor and what it should look like:

Here's the live version: 

And here's the code, if that helps:

<script
src="https://bookshop.org/widgets.js"
data-type="list"
data-list-slug="summer-beach-reads-1e551f88-2002-42ba-b4bc-9b6c345317b5"></script>

Any help is much appreciated!  Thank you!

[_Violet]

Hi @Thevioletfox - sorry to see that trouble has brought you to the Seller Community! 😥

Could you please share your website url so I can take a closer look?

I'll keep an eye out for your reply!

[Thevioletfox]

Hi @_Violet 

My website is https://thevioletfoxbookshop.square.site/

Thank you!

[_Violet]

Thank you, @Thevioletfox!

I'm going to consult with the Square Online team on this one to get the best answer for you. I'll reach back out to you here once I gather more info!

[Thevioletfox]

Wonderful! Thank you SO much for your help! 😄

[_Violet]

Thank you for your patience here, @Thevioletfox! Here is what the Square Online Support Team let me know:

"Since the Square Online site editor is a “what-you-see-is-what-you-get” type of software and no custom-coding is necessary to create a website with Square, we’re unable to assist with custom code of any kind. This means that we can guide you on where custom code can be used throughout the Square Online platform, but we’re unable to assist with the code itself.

With this in mind, using any code associated with your website must be done with the knowledge and understanding of how the code could affect your website and its function. All custom code you associate with your site is optional, and not necessary to make it work or appear online.

Should you need assistance with custom code associated with your site at any time, we recommend consulting a coding expert.
Also, we looked at the home page in both the editor and live site and that embed code section was just showing 1 book at a time in both.

The code might be having trouble interacting with responsive theme technology or it could be affected by screen/browser size.  The editor tools in the editor definitely make for a different size/aspect ratio vs. viewing the site live even in the same browser screen size.

Responsive themes optimize websites for viewing on all screen sizes, whereas non-responsive themes keep website dimensions static. This means that their responsiveness functions to adjust several aspects of a website (e.g. background images, text size, content placement, etc.) to make sure it still looks great regardless of the visitor’s screen size.

From an SEO perspective, Google ranks responsive websites higher in their search results because they tend to get more traffic.
Obviously keeping in mind that the SEO portion of the macro does not apply here specifically.

If it's a 3rd party widget provided by Square, we’re unable to provide assistance with apps you add to Square Online from the Square App Marketplace because they’re built by third-party developers. You can still get help directly from the developer by visiting the page for their app in the Square App Marketplace, and reviewing your support options in the Support section of their page."


I hope this information is helpful but please do let me know if you have any additional questions.