Build Your Own Business Website header image

Lesson 6 – Customize Shopp Templates Pt 2

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

In this sixth lesson of our Build an Online Store Using Shopp we continue to show how to customize Shopp Templates. We begin by customizing the category view of products. Then we show how to add customer inputs to products and customize the product view. We finish the lesson by showing how to add conditional customer inputs to products.

Customize the Category View – Watch the Video

  • 2 views – grid & list

    • javascript adds either grid or list to div id shopp
    • show this
    • shopp default css has 2 style sets
  • Style the buttons

    • details link container
    • typical button
    • hover condition
    • link version
  • Stye the Grid View

    • Frame
    • Product Name
    • details link
  • Style the List View

    • Frame
    • Product Thumbnail
    • Product Name
    • details link

Add Customer Input to products – Watch the Video

  • Add the template tag to the Product template

    • product tag
    • input property
    • options
  • Add some directions

Customize the Product View – Watch the Video

  • Apply Thesis Universal Input Fixes

    • input type = text
    • select
  • Change product name

    • change to h1 tag
    • Add styling
  • Product description

    • eliminate “big”
    • add text style
  • Add to cart button

    • apply to other button style
    • adjust to reflect condition

Conditionally Add Customer Input to products – Watch the Video

  • Create an array of products that will get inscriptions
  • Retrieve data using a Shopp template tag
  • Compare the product ID
  • Conditionally display the input

Question and Answer Session – Watch the Video

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 Comments… add one
0 comments… add one