So, you’re ready to make some money with your blog and you want to create a ShopStyle widget to add to your blog. Awesome!
ShopStyle Collective is a great affiliate/ad network for new bloggers. Unlike some other affiliate and ad networks, ShopStyle doesn’t have requirements like traffic limits, follower limits, etc.
ShopStyle allows you to create some really cool widgets to add to your blog, sidebar or right in your posts. You can use their system to create those awesome Shop the Post widgets. Or even a Shop My Closet or Shop My Kitchen page.
ShopStyle has teamed up with some amazing brands and retailers in fashion, accessories, beauty and home decor. You can promote these products and make money when your visitors click on the ads and when they buy. ShopStyle is a great starter network for bloggers.
RELATED POST: Shop the Post Widgets for Bloggers
NOTE: We focus on Blogger.com tips and tutorials here but this tutorial was intended for any blogger to use no matter what platform. So, while this tutorial doesn’t include directions on actually adding the widget to your blog, just creating the widget. However, I do include links to posts that show you how to add the widget on WordPress, Blogger and Squarespace at the end.
How to Create a ShopStyle Widget
I love to include different forms of content in my posts because some people learn best with visual methods like videos while others prefer written directions. So, check out the video below or the written step-by-step directions a bit further down!
The Video Directions
The Written Directions
We’re going to start from the very beginning by creating a new ShopStyle Collective account. So, let’s go:
Step 1: Create a ShopStyle Collective Account
- Click here to visit the ShopStyle Collective website.
- You can signup for your account right from this page. Enter your email address, a password and choose a Username to get started.
- Then click on the Sign Up button. (If you already have an account, just go ahead and log in.)
- On the next page, enter your country, currency, website address and a promo code if you have one.
- Check out their terms then click the Accept button to move on.
- You may now connect your Social Media accounts including Instagram, YouTube and Pinterest. This is a great way to extend your Affiliate Marketing efforts to your social media accounts.
- Now you’ll be on the main ShopStyle Dashboard and ready to create a widget.
Step 2: Create a Shop Style Widget & Add Products
ShopStyle actually allows you to create a variety of widgets to add to your blog like the traditional carousel widget, a Look, a plain text link and a collection.
Today we’re going to create a Shop the Post style widget to go in your post or page. Later tutorials will attack the other options.
This type of widget can also be placed in a sidebar or other widget area.
- Make sure you’re logged in to your ShopStyle Collective Dashboard.
- Click on the Product widget box under Create a new: section.
- Time to Add Products.
- ShopStyle has a variety of ways to find a product. You can search by keyword. Or use the toolbar on the left to search by Retailer, Brand, Category, Price Range, Color and Sales & Deals.
- Once you find a product you want to add to your widget, hover over the product image.
- Click the Add to widget button.
- You will now see this item in the box at the left side of the window.
- Keep adding products until you have all you want added to the widget.
- Click the Next button at top right when you’re done adding new products.
Step 3: Widget Display Settings
- You will now be in the Build Items screen. This is where you will set your widget display options.
- You can Name Your Widget. Helpful if connected to a specific post. The default is a date and time (not so helpful when you have lots of widgets).
- Next you’ll choose what elements your widget displays under Display. You can display: brand, retailer, price, sales price, and caption. You can also choose to only show the information when someone hovers over the product image. This is great for a very minimal, streamlined look.
- Next your going to set your widget Width x Height. This is where it’s handy to know your content area width on your blog. As a general rule, a width of 680px to 740px will generally be a good size if you don’t know your specific width. The height will be automatically determined by your width setting. I wouldn’t adjust this. Just adjust the width.
- Next set Rows and Columns. Rows are how many horizontal lines you want in the widget. Multiple rows are great for displaying in a page or sidebar. Single rows look good in your posts. Columns determine the number of images displayed before scrolling the carousel is required. (Keep in mind that columns will automatically adjust on mobile screens for best appearance). If you adjust the column number, you will need to go back and adjust the widget Width.
- Finally, set your Image Size. This will also affect the Width and Height of your widget so you may need to go back and adjust.
- Your widget display options are now set. The Preview on the right will show you what your widget will look like.
- Now, click the Publish button at the top.
Step 4: Grab Your Widget Code
- You will now be on the Publish Items page.
- At the top is an embed code that you can add to a widget or directly to a page on your blog. Below is the plain text links code that can also be useful.
- We’re going to grab the embed code.
- Click the Copy embed code button. This copies the code to your clipboard so you can paste it to your site. Please do not try and copy and highlight the embed code. This can lead to all sorts of issues in your posts if you grab too much of the page code.
- You can paste this code right into your blog or you can paste the copy into a plain text editor file using a program like NotePad or TextEdit. DON’T use Word or iPage, etc.
- Click the Save button to save your widget. This is handy when you want to update the widget to swap out Sold Out Items.
- Once you click Save, your widget will now appear in your ShopStyle dashboard under the Widgets page if you need to edit or recover it. The Sold Out Products tab on this page is where you can find widgets that need to be updated to remove Sold Out items.
But What Exactly Do I Do with the Embed Code?
This post is intended as a general tutorial that can be used by bloggers on any blogging platform, so we haven’t added directions for Blogger, WordPress, etc. But below are links to posts that will walk you through adding a widget to your specific blog platform.
If you’re a Blogger user, check out this tutorial I put together: How to Add a ShopStyle Widget to Your Blogger Blog. I cover different ways to embed the widget into your blog.
For Squarespace users, you’re going to want to use and Embed block. Follow these directions to do that. Just paste your embed code.
Sum it Up
There you have it, both video and written directions on how to create a Shop the Post widget using ShopStyle Collective. Happy blogging!