Shopify is a popular e-commerce platform for online stores and retail point-of-sale systems. This step-by-step guide explains how to embed the Walls.io widget on pages built with Shopify.
1. Sign up at Walls.io & set up your social wall
To get started, sign up for a Walls.io trial. Setting up your social wall is fairly easy - connect your social media accounts and start adding sources – f.e. hashtags around your brand and products, or your owned social media accounts. For further information, check out our tutorial or watch the video below!
2. Copy the JavaScript or Iframe embed code from your wall
In your Walls.io account, go to "Embed & Display" and copy the JavaScript or Iframe embed code as marked in the screenshot below (it's sufficient to click on the code to copy it to your clipboard):
For most use cases we recommend sticking with our "Fluid" default layout – if you prefer another layout, or want to pick a different color scheme or language, please have a look at the advanced settings before you copy the embed code:
Most options should be pretty self-explanatory, but we've more information available here.
3. Add your social wall to your Shopify page
Click "Add section" and select "Custom content":
Then remove all unnecessary blocks and add a new content block "Custom HTML":
Finally, paste the embed code from step 2 into the custom HTML block (for the best result, we recommend spanning the whole width of the container):
4. Done!
That's all there is! You can save the changes and check the live page to see if everything is to your expectations!
More tips & tricks:
The Walls.io widget is fully responsive – which means it will automatically adapt to the size of the section you are embedding it to. You can override this by setting fixed width, height, rows, and columns when generating the embed code (we recommend going with the default for maximum layout compatibility).
The Walls.io widget is both available as JavaScript- and Iframe code. The JavaScript code offers superior flexibility and performance, which is why it's our recommendation for embedding to Shopify pages.
Try out our different layouts! Walls.io offers a variety of diverse layouts to display your wall. Continue to read here for more details!
Use the "Inject Load More Button" option when generating the embed code to add a button that allows visitors to load additional posts.
In case you have further questions, don't hesitate to contact the support team via the chat or support@walls.io!