TONIC + Shopify : Selling products from your pretty new website | TONIC SITE SHOP
Tonic Tips

TONIC + Shopify : Selling products from your pretty new website

At long last, we’ve added in a happy little shop page add-on to make all your e-commerce dreams come true. Gone are the days of ugly Paypal buttons or external cart pages. With this simple, easy to use add-on, we’ve made selling yo’ sh*t from your pretty new website a breeze using the foolproof buy button tools from Shopify Lite. Which means more cash in your pockets, and of course, more happy clients. Pop the champs, y’all!

So here’s how it all works, and how you can add a shop page to your TONIC site …

TONIC x Shopify: Shop Page Add On Page Tutorial

Step One: Install the Shop Add-On Page template into Showit

First up, you’ll need to install our handy Shop Add-On Page into your Showit Library. To do so, copy the sharekey from your download file to your clipboard, add new design to library, and paste the sharekey.

Then, to add the shop page to your existing site design, click the “+” button on page tab and select “add new page”, select the “Tonic Shop Add-On” template …

Select the “shop” page. Finally, click the “add” button. Boom. The page template is added to your site. Then follow the same steps for the shop “Product One” page template.

Step Two: Restyle Shop Template Pages

Now you’ll want to begin restyling the template to match the rest of your site. So while “applying my fonts and colors” is a great start and will get you pretty close, you may need to do a little manual re-styling depending on which template you have and how your style palette is configured. You’ll want to make sure you match the fonts, colors, treatments and etc to your existing pages so that it’s cohesive and consistent. We suggest making sure the first row of the index is just as you like it on both desktop and mobile before you duplicate. Make sure you style the product details page, too before you duplicate that and integration your content and set your index links.

Then, be sure to add in all your site menu, footer and other site canvases to the page as well. You’ll also want to be sure to add it to the various menus and link it accordingly.

Step Three: Integrate Content

Next, now that you got everything all prepped and ready, it’s time to add in your product images, product descriptions, and pricing info to the product details page and duplicate that page for each product you have. Then, you’ll want to build out the shop grid and ensure the buttons and images are linked the correlating product pages. We have three product per row set-up for you, so if you need more just duplicate that canvas and adjust the click action settings accordingly.

Step Four: Set up Shopify Lite

First things first: you’ll need to set up a Shopify Lite account here, add in your products (i.e. set prices, shipping details and etc.) and get everything in working order on the Shopify end of things.

Step Five: Add Shopify Buy Buttons

Finally, it’s time to add in the buy buttons. In Shopify, toggle over to sales channels, add a buy button sales channel, and then you’ll see that icon pop-up on your left-hand side. Click on buy buttons and then follow the prompts to set that up. You can stylize the buttons here if you wish, but since the options are a little limited and it would require lots of css code to customize it to match your site, we’ve found that it’s easiest to just bring the opacity down to 0% on the embed code layer and make pretty buttons inside of Showit instead. So just copy the code to your clipboard, and paste it into the already-set-up embed code layer in Showit which is on top of the buy button you see on the product page. Rinse and repeat for all products.

And there you have it, you’re now able to sell products from right inside your pretty website. Questions? Need help? Just let us know!

Do not delte - Ryan
Do not delte - Ryan

Leave a Comment

Previous Post:

Next Post:

Ready for More?

Ready for a little TONIC in your inbox? We send occasional, moderately witty emails with exclusive deals, design tips, recent blog favorites, cocktail recipes, and more.

Friends Don't Let Friends Get Boring Emails


Get on the VIP List

featured post

The Best Showit Templates for Coaches

Welcome to Summer, friends! Sadly, we can’t offer you a lawn chair or clink celebratory cheers over a summer cocktail in person. But we *can* give you our secrets to level-up your cookout… Read on for three of our all-time favorite recipes for your Summer festivities.

learn more

featured post

Why a Big-Name Designer Chose a TONIC Template Instead of Designing Her Website from Scratch

Meet Emmy - a skilled designer, inspiring educator, and imaginative creative whose talent and passion have led her to dream clients and brands. She’s passionate about “bringing visual life to the art of storytelling,” and this vision has truly come to life in her design work. And her work is STUNNING.

learn more

featured posts

She Almost Walked Away From Her Company. How a TONIC Template Turned Burnout Into Reignited Passion.

Elena is the brains (and beauty) behind Modern Market, a marketplace for creative entrepreneurs, providing content and resources that are ready to go for brands, so they can easily personalize it to their passion, purpose, and style and start connecting with their ideal clients right away. 

learn more

So, you need a website. Your current choices are: a ) a boring, big box template that does nothing to showcase your particular brand of awesome, and that you’d need to be some sort of code wizard to change, or b ) plunking down your life savings and your firstborn to hire a designer and a cranky developer, who will spend months and months of precious time cranking out something arguably “custom” you may or may not love in the end.

We’ve redefined the website template. And not only what it can be, but how it can look, what it can do, and what it can do for your brand.


Right? Nope. Enter option c ) Tonic Site Shop. Throw out everything you know about templates: these are cocktail-inspired, completely customizable websites designed for the kind of people that give a damn. Simply select your “cocktail,” download, customize anything −ANYTHING− you want, go live, grab the champagne and wait for the compliments ( and clients ) to roll in. They’re designer-made, and tailored just for you. Your old website is already jealous. 

What's Your Brand Cocktail?


take the quiz! (it only takes 60 seconds)

Find out the secret ingredients in your shaker, and what sets you apart from everyone else on the (top) shelf... Plus, get our specific strategies to ensure your ideal clients pick you off the menu every time.

what's your brand cocktail?

“If you know your website isn't as good as it SHOULD be and you're riding the struggle bus trying to figure out how everyone else seems to have gorgeous websites, buy a TONIC site. It's time you look just as good (if not better) than others in your industry and stand out in a way that's unique to you.”


- Jenna Kutcher

“If I could go back in time, I would purchase a Tonic site much earlier in my career. The high end feel of the template site combined with Jen and Jeff's creative direction and advice, instantly brought my work and brand to the next level. It allowed me to increase my prices and reach my dream client!”


- Annamarie Akins

“The creative geniuses behind Tonic Site Shop are the only people we trusted to help us build our brand, and you can trust their sites to build yours, too. 


 - Amy & Jordan Demos

“To think that something like this exists purely from the heart of helping small businesses fly and have access to this level of branding that was once reserved for only the most established and top of the top of the market…I just think this is going to change everything.”


- Mary Marantz

“If there is ONE thing in your business worth investing in (even more than your camera and lenses) it is your brand. TONIC is the only resource I recommend if you want to get it done right.” 


 - Ben Hartley

“Tonic is the PERFECT resource for anyone needing a quick and simple way to get an incredible, flawlessly designed website.”


- Hope Taylor

“Being able to create a creative, editorial, and professional website with TONIC has taken our brand to higher levels - more inquiries and bookings with our ideal clients! Cheers, indeed!”


 - Luke & Cat Neumeyer

“TONIC revolutionized my business, I never wanted to send people to my site before, then Jeff & Jen re-mixed my online presence, and wow, THEY ARE GOOD. They got to the core of my brand and built a hand-crafted site around it. Wouldn't want to work with anyone else."


- Joel Allegretto

“The idea that someone could take a gallery of their 50 best images, pair it with one of these incredible designs and have a brand and virtual storefront that will start going to WORK for them and allow them to hit the ground running by the weekend is mind-blowing. It’s game-changing.”


- Mary Marantz

“TONIC not only gave me a gorgeous, sleek (easy to use!) design that elevates my brand, but also regularly introduces me to new cocktails I've yet to try. Win, win!”


 - Abby Grace

Tired of boring, complicated SEO tutorials? So are we.3 Days to Better SEO

Hey friend, are you ready to actually understand what SEO is? We're not into complicating SEO. That's why we’ve made it our goal to break down SEO in an easily digestible 3 part series (with some extra bonuses) that’s sure to get you found online.