Shop Add-On Templates
The shop options and tutorials for adding a small shop to your Showit website!
sendowl
shopify lite
all Videos HERE
Shop overview
A breakdown of what is included in your new Shop add-on templates and options when creating your new shop.
Shop Overview
P.S. Make sure you and your products are protected! I use this exact contract (and others) on my shop & sites! Note: These are affiliate links but all are something I can stand behind and highly recommend to you :) You can use code: SAFFRONAVENUE10 to get 10% off the contract below too!
shop terms & conditions
Using wordpress Pages
sendowl tutorials
Shopify Tutorials
the product pages
collection & category page
homepage overview
shop options + carts
Jump To...
Click below to jump to the specific tutorials
Each template has a similar layout and flow, but can all be re-arranged, removed, or added to. I encourage you to make it your own and create a shop that reflects your website and visitor goals!
shop homepage overview
An overview of what is included on each of the Shop homepage templates.
Homepage Overview
NOTE
If using Shopify Lite you can use the 'Collections' buy-button embed code which will open a pop up for the product information. Within the video you'll see the 2 other options you have when creating collections and linking to products.
An overview of the Collections/Category page template and ways you can use it within your shop.
Collections or Categories
NOTE
product collections overview
If you plan to just use the Shopify product embed code, keep in mind that it's harder for Google to crawl for text, headings, links, etc. The buy-button code is much easier and more efficient to add products, but may not be as SEO friendly as using the Single Product page template and adding your own images, test, headings, etc.
A breakdown of your two different product page templates and how to use them in your shop.
Product Page Templates
SEO NOTE
product page templates continued
02
product page templates
01
When using Shopify Lite alongside Showit you are able to create a variety of 'buy-button' options that fit your needs. Below is a breakdown on each version & how to style them.
Shopify Embed Tutorials
If using the custom single product page template (full design control in showit) this video shows you how to add a simple Shopify "Buy-Button" to the page.
simple buy-button embed code
01.
adding a buy button
01
If wanting to embed the full product (image, text, title, button) from Shopify into Showit. You still need to create a separate 'page' for each product, but only have to paste in the embed code instead of customizing the contents for each.
single product embed code
02.
adding a full product code
02
If you want to make the single product embed code match your website fonts you can do so by editing the 'embed' code for each product.
customize & style single product embed code
03.
styling the product embed code
03
This code is used to add product collections (categories) to your pages. If clicked, the product will open in a pop-up to display the product details.
adding shopify collections
04.
adding collections
04
This code & tutorial is to show you how to customize and style the look of the Collection items. I have code to increase the product image size within the pop up as well as editing the fonts.
customizing & styling collection embed code
05.
styling the collections
05
code example here
instructions here
If you are customizing the code for your product/collection embeds you can easily copy/paste that code instead of manually adding it to each embed.
copy and pasting your code customizations
06.
copying the styling code into each
06
SendOwl is a 'cart' and a product hosting option that you can use to add simple 'Buy-Buttons' and hosted carts. Just another option instead of Shopify.
SendOwl Tutorials
If using the custom single product page template (full design control in showit) this video shows you how to add a simple SendOwl "Buy-Button" to the page. NOTE: you will need a 'buy button' image that you can make yourself or get below.
'add-to-cart' buy button
01.
adding a buy button
01
If using SendOwl you'll want to create either a 'cart' link OR a 'cart' icon that your customers can click to view what is in their cart. You can use a simple link or add an icon image provided below.
adding a 'cart icon' to your site
02.
adding a cart icon
02
If you want to be crazy like me and customize your checkout to look a bit more custom than what is provided, I created a tutorial and code for you to add to your account ;)
customizing your checkout templates
03.
customizing your checkout
03
You'll find free images and the code to use in your zip file under 'SENDOWL'
You'll find free images and the code to use in your zip file under 'SENDOWL'
You'll find the code to use in your zip file under 'SENDOWL'
How you can also use Wordpress pages to add your Shopify embed code for your products.
Using Wordpress Pages
If you want to separate your shop pages from your showit pages (to keep it clean on the backend) you can use your Wordpress pages to embed Shopify Single Product buy-button code. This is good if you also want to use Yoast SEO for each page.
using wp pages for products
01.
using wp pages for products
01
If you have Showit subscription tier 3 you have the option to upload custom plugins and use them to create more advanced product filtering on your wordpress product pages. (watch tutorial to see). NOTE: showit nor I cover any Wordpress related issues or support on these plugins.
advanced wordpress plugin filtering for product pages
02.
