Tutorial: Create a Tabbed SmugMug Product Page

Hikin' Mike

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

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

Hikin' Mike

@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

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

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

@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

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;}