So, you’ve joined ShopStyle and you’re ready to add those cool Shop the Post widgets to your posts. Or add your own “Shop My Kitchen” page to your blog so your readers can find all your favorite kitchen gadgets and you can hopefully make some money when they click and shop.
However, you’re not sure how to add your widgets to your Blogger.com blog. This tutorial is here to help walk you through how to add a ShopStyle widget to Blogger.
Now, let’s do this!
How to Add a ShopStyle Widget to Blogger
I’ve included both a video tutorial and step-by-step written directions with pictures to help out. Some people love video tutorials! (I actually don’t, but that’s ok!). And some people like detailed written directions in print. So, we have directions for everyone.
The Video Directions
The Written Directions
#1: Create a ShopStyle Widget
For the purposes of this tutorial, I’m going to assume you’ve signed up for ShopStyle Collective, created a widget and have copied the embed code for your widget.
See this tutorial if you need help with these steps: How to Create a Shop Style Widget for Your Blog
Make sure you have a copy of your widget code ready to go for Step 2.
#2: Add a Widget to a Post in Blogger
This is probably the most common use of this widget and very simple to do.
This is an example of what we’ll be adding to a post:
To add a title to your widget, add it in the Compose tab as you would normally add a heading. Then paste the code below this title.
- Login to your Blogger Dashboard.
- Go to the Posts page.
- Click on the link of the post to edit.
- Click on the HTML tab at the top of the post editor page. If you try and paste your code into the Compose tab, it won’t work. You’ll just have a jumble of code in your post body.
- To add the widget to the bottom of your post, just scroll down to the bottom of the code, add a new line and press [Control + P] or [Command + P] to paste your copied code into your post.
- To add the widget in the midst of a post, find the location where you want to add the widget. Add a new line by hitting the [Return] or [Enter] key. Paste your code onto the new line.
- Now click the Update or Publish button to save your changes.
That’s all there is!
#3: Add a Widget to a Page in Blogger
I like to create a widget with about 20 products and set it to multiple rows and columns to create a page widget.
We’re going to be adding a widget like this to my page:
- On your Blogger Dashboard, go to the Pages page.
- Click on the page to add your widget to. Or create a new page.
- Make sure you are in HTML mode. Click on the HTML button at the top left of the page editor.
- Find the location where you want to add your widget. Make sure to add it to a new line.
- Paste your embed code.
- Click the Update or Publish button to save your changes when done composing your page.
You will now have a lovely page with a product grid.
#4 – Add a Widget to Your Sidebar or other widget area
Rather than adding a widget to just your posts or pages, you may want to add a widget to your sidebar to feature some of your favorites. This is a great way to use a ShopStyle widget.
I like to create a grid with a couple rows and a couple columns like this:
- On the Blogger Dashboard, go to the Layout page.
- Locate your sidebar widget area or other widget area. Your Layout page will likely not look the same as mine. It depends on your specific theme. See your theme documents for more help with widget areas.
- Click on the Add a gadget link for that widget area.
- Then paste your embed code into the Content area.
- Click the Save button to save your new widget.
- Move and arrange your widget as desired in the widget area. Don’t forget to click Save arrangement to make placement arrangements stick.
Explore the various widget areas on your blog and different ShopStyle widget layouts to discover what works best for your blog.
Sum It Up
There you have it. 3 different ways to add ShopStyle widgets to Blogger! Happy blogging!