If you have ever wanted a page that displays all of your products on one page for your visitors, this tutorial is for you! This is a Responsive Tabbed and Accordion SmugMug Product Page. Desktops will show the tabs, but smaller monitors switch to an accordion style content.
First thing is to download the Tabbed SmugMug Product Page. Once you’ve downloaded the files, you’ll see a folder called ‘images’. I originally had you upload those images to your website, but decided to include the image links. That means those images are stored within my SmugMug site. You can upload those images to your site so they will be yours.
Copy the tabbed-smugmug-product-page.css file and paste that to your Theme’s Custom CSS section only. Do NOT put this anywhere else.
Create seven (7) Pages, not Folders or Galleries. Copy/paste the HTML files you downloaded to the separate Pages you just created by using HTML/CSS blocks.
You’ll need to go back and edit the tabbed-smugmug-product-page.html file by changing the 8 ‘Read More...’ links in the “Wall Art” and “Download” section to point to your newly created Pages.
As you can see, I added two tabs not included on SmugMug’s product list, the Print Sizes and the Ordering. If you don’t want a tab, you can delete the HTML and CSS as shown in gray below. Conversely, if you need/want to add more, you’ll need to add more code.
If you’re going to use the Price Size tab, you’ll also need to edit that as I only offer specific sizes.
As always, if you need help, feel free to contact me or post your question on the D-grin forum.