Create a Tabbed SmugMug Product Page - Mike Matenkosky

Create a Tabbed SmugMug Product Page

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. The Tutorial is below

Paper Prints

Prints on high quality paper

Lustre Paper

Lustre

Lustre is a premium finish on a heavier paper. It offers the vibrant colors of glossy with the fingerprint-resistant finish of matte. Printed on Kodak Supra Endura paper.

Glossy Paper

Glossy

Glossy is a shiny finish and prints appear brighter than Matte. Printed on Kodak paper.

Metallic Paper

Metallic

Rich, distinctive metallic look with a huge WOW! factor. Printed on Kodak Endura Professional Metallic paper.

Giclée Watercolor Paper

Giclée Watercolor

Giclée process printing on premium fine art paper with a subtle texture. Finished with a protective spray.

Wall Art

Gorgeous products ready to hang

Traditional Canvas

Traditional Canvas

The canvas is wrapped around a wooden frame with part of the photo visible on the sides of the frame.

Read More...

Stretched Canvas

Stretched Canvas

The canvas is stretched around a wooden frame and stapled on the edges leaving the full image visible on the front.

Read More...

Flat Mounted Canvas

Flat Mounted Canvas

The canvas is mounted onto rigid Gatorboard.

Read More...

ThinWraps

ThinWraps

Beautiful print with satin laminate neatly wrapped around sturdy, 3/16" Gatorboard.

Read More...

MetalPrints™

MetalPrints™

Dyes are infused directly into a specially-coated aluminum sheet to create a print with incredible luminescence, detail, and durability.

Read More...

Acrylic Metal

Acrylic Metal

A sleek and modern mounting option for a stunning metal print. The 1/4” acrylic face enhances and protects the underlying print and is mounted with four stainless steel posts.

Read More...

Wood Print

Wood Prints

Striking print with a warm and natural feel influenced by the color and texture of the certified sustainable maple wood.

Read More...

Keepsakes

Go beyond the wall with magnets, mugs, ornaments, and other customizable print items.

3 inch Round Wood Ornament

3” Round Wood Ornament

Add a little personality to your tree this year with a printab-le rounded wood ornament. Single-sided and shipped ready-to-hang, your photos might outshine the presents underneath.

Benelux Wood Ornament

Benelux Wood Ornament

Want your custom ornaments to be a little more ornate? Try the Benelux Wood Ornament customized with your photo and add a unique die-cut shape to your tree. Measures 4.3” wide. Recommended for landscape-oriented images only.

Benelux Metal Ornament

Benelux Metal Ornament

Want your custom ornaments to be a little more ornate? Try the Benelux Metal Ornament customized with your photo and add a unique die-cut shape to your tree. Measures 4.3” wide. Recommended for landscape-oriented images only.

4 inch Round Glitter Ornament

4” Round Glitter Ornament

Give your custom photo ornaments a chance to stand out amid the glow of the Christmas lights with the glamour of the Round Glitter Ornaments.

3 inch Round Metal Ornament

3” Round Metal Ornament

Add a little personality to your tree this year with a printable Rounded Metal Ornament. Single-sided, and shipped ready-to-hang, your photos might outshine the presents underneath.

4x6 Postcard

4” x 6” Postcard

Printed on heavy card stock with a glossy finish.

Photo Puzzle with Box

Photo Puzzle with Box

Large, glossy finish, 252-piece puzzle, measuring 10 inches by 14 inches. Comes in sturdy black box with the puzzle print on the top.

Mouse Pad

Mouse Pad

Large — 9.125 inches high by 7.75 inches wide — so your mouse has room to move. Made of non-slip neoprene with a fabric cover that won't let the mouse skip.

5x7 Photo Panel

5” x 7” Photo Panel

Your photo on a beautiful hardwood black panel with rounded edges and easel back for easy setup.

8x10 Photo Panel

8” x 10” Photo Panel

Your photo on a beautiful hardwood black panel with rounded edges and easel back for easy setup.

6x6 Ceramic Tile

6” x 6” Ceramic Tile

Measures 6 x 6 inches and has an extremely durable glossy finish and beveled edges.

Mahogany Desk Organizer

Mahogany Desk Organizer

Beautiful solid mahogany desk organizer with your photo on inlaid ceramic tile on the front. Three sections to hold your pens, pencils and other office items.

Keepsake Box

Keepsake Box

Your photo is printed on 4.25” x 4.25” tile and inlaid on a gorgeous oak box. It has a cherry finish and a velvety cream-colored interior.

11oz White Mug

11 oz White Mug

Durable, ceramic mug that is dishwasher-safe.

11oz White Mug

15 oz White Mug

Durable, ceramic mug that is dishwasher-safe.

11oz Black Mug

11 oz Black Mug

Durable, ceramic mug that is dishwasher-safe.

Coasters

Coasters

Set of 4 square durable coasters, hard and glossy surface with cork back.

Photo Luggage Tag

Photo Luggage Tag

Rectangular luggage tag made from exceptionally durable hard white plastic that doesn’t bend. There is a hole punched in it for the loop.

Photo Key Tag

Photo Key Tag

Made from extremely durable white plastic that does not bend. There is a hole punched in it for the fastener.

Small Refrigerator Magnet

Small Refrigerator Magnet

Magnets have rounded corners and a matte finish. They are flexible and strong enough not to slip. The small magnet measures 2.5 by 3.5 inches.

Large Refrigerator Magnet

Large Refrigerator Magnet

Magnets have rounded corners and a matte finish. They are flexible and strong enough not to slip. The large magnet measures 3.5 by 5 inches.

Ceramic Tile Mosaic

Ceramic Tile Mosaic

Decorate the most important room in your home with these six 4.25-inch ceramic tiles that make a mosaic.

Playing Cards

Playing Cards

52 pickup! Your photo on a high-quality poker deck. Jokers included.

3 inch Round Button

3” Round Button

Durable metal with a sturdy pin for fastening. 3 inches in diameter.

4 inch Round Button

4” Round Button

Durable metal with a sturdy pin for fastening. 4 inches in diameter.

Downloads

Download a Personal Photo License

Single Photo Licenses

We offer single photo licensing.

Read More...

Phone Cases

Give your phone personalized protection with a Slim or Tough Case

iPhone Tough - Front

iPhone Cases

Protect your phone with style.

Android Slim and Tough - Front

Android Cases

Protect your phone with style.

Finishing Options

Customize your prints

Framing Options

I now offer several a la carte framing, mounting and print options to ensure your finished print displays a perfect, polished presentation.

Photo Extras - Metal and Wood Frames

Frames

Choose from 16 different high quality wood and metal frames. They arrive ready to display with hardware attached and clear, shatterproof acrylic front.

Mats

Add a mat to give the photo a clean, professional finish. Available in three colors: Black, White and Off-White.

Mounting Options

Mounting Options - GatorFoam

Black Gatorfoam

Mount your prints on this rigid black foamboard to add durability and prevent warping and damage. Note: Gatorfoam is slightly thicker and lighter in weight than the Styrene backing.

Mounting Options - Styrene

Styrene

This super-smooth, compact 2mm styrene board cleanly backs your print, providing durability and protection against dents, bangs and warping. Available in two colors: Black or White.

Mounting Options - 3/4” Standout

Black Standout 3/4”

This feather-light, ready-to-hang option is a contemporary favorite! Prints are mounted on a block with thick black edges, letting your photo stand off the wall. Pre-drilled holes are included on the back for easy hanging.

Paper Textures and Finishes

Photo Extras - Textures

Textures

Matte is flat, so why not upgrade your paper? Choose from Pebble, Canvas or Linen surface textures to add subtle dimension to your finished print.

Protective Coating

Guard your masterpiece against scratches and other surface damage. Protective Coating is available in Lustre and Satin Laminate to give you peace of mind.

Ordering

Fusce quis quam enim. Praesent sit amet dui ligula. Ut ut fringilla elit, in condimentum arcu. Curabitur velit nulla, vehicula eget enim ac, efficitur consectetur purus. Sed sit amet mollis lorem. Morbi nisl nunc, dignissim a quam molestie, viverra auctor urna. Aliquam eleifend erat non ipsum aliquam posuere. Fusce vel magna eu diam feugiat aliquet vel eget sem. Duis eu diam metus. Etiam vel massa eget urna venenatis sagittis.

Nulla facilisi. Nunc fermentum in orci ut convallis. Sed in lacus blandit, pellentesque turpis sed, pulvinar tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque sapien felis, volutpat interdum hendrerit non, congue in ligula. Proin semper tempus nisl in condimentum. Cras volutpat dignissim finibus. Phasellus ac dignissim nulla, et facilisis dui. Cras consequat posuere porta.

Morbi malesuada fermentum aliquet. Ut tristique aliquet nulla vel aliquam. Integer consectetur tempus nisi, id maximus neque venenatis in. Donec tincidunt erat vel ultrices posuere. Fusce eleifend lorem nec posuere mattis. Morbi venenatis sapien eros, id sodales justo commodo quis. Vivamus venenatis euismod libero in commodo. Mauris turpis nunc, egestas a felis sit amet, condimentum finibus neque. Cras facilisis ex nunc, varius commodo quam vulputate at.

Nam fermentum lectus et aliquet tincidunt. Curabitur a tincidunt orci. Pellentesque sit amet posuere nunc. Praesent purus tellus, gravida ut mollis in, cursus a mauris. Vestibulum lacinia condimentum ante. Aliquam dapibus massa ac elit tincidunt pulvinar. Nam velit eros, pretium vel ipsum et, eleifend venenatis ante. Etiam facilisis diam ante, eget molestie neque molestie quis. Vivamus elit diam, pulvinar vel euismod vel, placerat semper nunc. Suspendisse id velit condimentum, imperdiet sapien id, pellentesque velit. Etiam tempus sollicitudin tortor vel viverra.

Tutorial

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.

Input and Label Selection Screen Print

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.

Powered by SmugMug Log In