Tutorial: Create a Tabbed SmugMug Product Page
Hikin' Mike
Registered Users Posts: 5,467 Major grins
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'.
- Mike
Images in the Backcountry
My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
Images in the Backcountry
My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
Tagged:
0
Comments
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.
Images in the Backcountry
My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
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
Images in the Backcountry
My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
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 notcheckbox
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...
Images in the Backcountry
My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
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;}
Images in the Backcountry
My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk