Tutorial: Create a Tabbed SmugMug Product Page

Hikin' Mike · October 30, 2018

Hot off the press: https://gallery.imagesinthebackcountry.com/Smugmug-customization/Create-a-Tabbed-SmugMug-Product-Page

EDIT: After using it, it was decided that I need to revise some of the features, It is now responsive. Desktops will show the tabs, but smaller monitors switch to an accordion style content. I added a "Finishing Options" tab recently. If you downloaded the files, there is an updated version.

Current version: 'v3.3'.

txt2nite · October 31, 2018

Thanks for this mike, I think this is really important for anyone selling, so glad you have this tutorial here

Hikin' Mike · November 1, 2018

@txt2nite said:
Thanks for this mike, I think this is really important for anyone selling, so glad you have this tutorial here

Thanks!

I've made some minor changes.See changes on the top of this thread.

Hikin' Mike · November 2, 2018

FWIW, I re-coded this. It is now 100% responsive. Check it out: https://gallery.imagesinthebackcountry.com/Smugmug-customization/Create-a-Tabbed-SmugMug-Product-Page

tomnovy · November 14, 2018

Hey Mike - this part is not working for me in Firefox { tested on your site } https://drive.google.com/a/smugmug.com/file/d/1Eq0HAAKPYZIykJQgPeaAtDjr3HPQ4G8c/view?usp=drivesdk When I click on it - nothing happens - or is that intended ?

Hikin' Mike · November 14, 2018

@tomnovy said:
Hey Mike - this part is not working for me in Firefox { tested on your site } https://drive.google.com/a/smugmug.com/file/d/1Eq0HAAKPYZIykJQgPeaAtDjr3HPQ4G8c/view?usp=drivesdk When I click on it - nothing happens - or is that intended ?

That is normal (for now). It uses radio buttons and not checkbox for mobile (accordion), like your site. Looking at my 'Purchase' page on my site, I use WordPress and it does toggle, but it uses JS. I'm going to see if I can make that work using some media queries.

I'll let you know...

Hikin' Mike · November 14, 2018

For now I added some CSS to change the cursor and bold the text for the checked/open page:

.tabs input[type="radio"]:checked + label:hover {cursor: default;}

.tabs input:checked + label {color: #555;}

Tutorial: Create a Tabbed SmugMug Product Page

Current version: 'v3.3'.

Comments