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.

**If you’ve purchased one of our newest sites (Moscow Mule, Rosé Royale or Cosmopolitan). Skip ahead to minute 9:00 in the video and Step Three below since your shop page comes pre-installed and pre-styled.

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 template is added to your site.

Step Two: Restyle Shop Template

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 canvas first, too.

Then, be sure to add in all your site menu, footer and other site canvases to the page as well and link it in the various places.

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 canvas and duplicate that canvas view for each product you have. Then, you’ll want to build out the product thumbnail grid and ensure the buttons and images open the correlating canvas view. We have three product per row set-up for you, so if you need more just duplicate that canvas and adjust the canvas view 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. 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!

P.S. If you’d rather use the, Buy Buttons with full product details, you can opt to use those instead. Either works, but we just find our shop profiles to be prettier. Oh, and you can even embed entire product collections straight onto the page and forego our little custom set up if you like how that functions better or need a less manual set-up because you have more than a dozen or so products. There are a few tricks we’ve learned if you go that route, so just let us know if you have any questions or trouble with it, and we’ll share our ways. 

 

Previous Post:

Next Post:

Ready for More?

03

01

02

04

05

MEET THE NEW SITES

Our most affordable sites ever, served neat and simple, straight up, but still totally #tonicapproved. 

Now on Tap

The tonic neat collection is here

FEATURED POST

Everyone's favorite macaroni and cheese lover on the biggest light bulb moments in her brand, the essentials in her carry-on, and her best advice for a designing website that's unmistakably "you."

Jenna Kutcher is Not Going with The Flow

BEHIND THE BAR:

05

04

03

01

02

FEATURED POST

Need a shot of Shopify for your SHOWIT site? Here’s e-commerce with a TONIC twist. Grab our fully styled, embed-ready a la carte shop add-on, modify to fit your design, and plug and play your way to the prettiest sales platform around.

Shopify + Tonic: A Shop Page Add-on Just for You.

03

01

BEHIND THE BAR:

02

04

05

FEATURED POST

Creating connection points, narrowing your scope, and all the inspiration you need to make it your own.

Top Shelf About Section

03

02

01

FIVE STEPS TO A 

04

05

FEATURED POST

One of our favorite summer to fall cocktails and the perfect playlist to sip by. Just in time for your weekend...

The Paper Plane

03

02

01

SIPS AND SOUNDS

04

05

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 Email

THE NEWSLETTER

Get on the VIP List