Zac Clark Web Design
eCommerce Suite
Getting Started Guide


Sitemap

Homepage
Shop page
Product page
About page
Thank you, sold out, and 404 pages

The following identifies sections of each page and the HTML (or Javascript) that makes them up. Brackets are occasionally used to summarize areas in the HTML; in this case, <div> id and class values can be used to easily search for sections in the working HTML (using CTRL/CMD + F).
Some development experience is required to customize.


Shortcut Icon, Titles, Description, & Keywords

Shortcut Icon

<link rel="icon" type="image/png" href="resources/images/icon.png">
The icon should be saved in this path, in a square cropped .png format.

Titles, Descriptions, & Keywords

<title>[Page name] - Name Goes Here</title>
Icons and titles are located in the <head> of every page. There is no page name inserted into the Homepage title. “Name Goes Here” should be replaced with your name.

<meta name="description" content="Page description goes here.”>
<meta name="keywords" content=“Name,Products,Services”>
Description and keyword tags are located in the <head> of every page except for thank you, sold out, and 404 pages.
Placeholders are given appropriately. Keywords should be separated by commas.


Menu, Search Results, & Footer

Every page includes a menu, search recommendations and results (two lists of all products, hidden until a search is made), and a footer.

Menu Links

Links are set up as relative paths, where “New” and “Shop” links will bring you to the same Shop page by default. “About” will bring you to the About page. Links referenced throughout this guide may differ due to the nature of relative paths, (./path, ../path, ../../path,) but <div> contents are consistent across pages, which makes them easier to find. Here’s what they look like and how to customize them.

<a id="name" href="">Name Goes Here</a>
The empty quotation marks should contain your homepage link. “Name Goes Here” should be replaced with your name.

<a class="menulink" href="shop">New</a>
“shop” should contain your Shop (New) page link. (See Product Pages)

<a class="menulink" href="about">About</a>
“about” should contain your About page link.


Shop Links

<a href="shop">All</a><a href="shop">Featured</a><a href="shop">Sale</a>
“shop” should contain your different Shop page links.
Shop is visually broken down into three links that will bring you to the same Shop page by default. These three links can be customized to fit however you would like to organize your products. The “shop” folder containing the Shop page should be duplicated and renamed to suit those three pages appropriately. (See Product Pages)

Cart Link

<a href=""><img id="carticon" src="resources/images/cart.svg" alt="Cart icon"></a>
The empty quotation marks should contain a link to your preferred checkout method's view cart option.

Search Recommendations

<ul id="searchlist">
<li><a href="shop/product”>[Product name]</a></li>
[List items like the one above repeated]
</ul>
This list is made up of product recommendations; links that will bring you to the same product page by default, “shop/product”. (See Product Pages) These links should be added/deleted/changed appropriately.

Search Results

<ul id="searchresults">
[Product thumbnail list items]
</ul>
The search results section contains all products, hidden until a search is made. They are written in the same format as products on the Shop page, so see Product Thumbnails for further details.

Footer Information

<a href="">Name Goes Here</a>
The empty quotation marks should contain your homepage link. “Name Goes Here” should be replaced with your name.

<a href="tel:11234567890">+1 123 456 7890</a>
The phone number following “tel:” and inside of the tag should contain your phone number formatted as above.

<a href="mailto:emailaddress@gmail.com">emailaddress@gmail.com</a>
The email following “mailto:” and inside of the tag should contain your email address.

<a style="margin: 0 0 40px 0;" href="">1234 1st Street<br>
City, State 12345</a>
The empty quotation marks should contain a link showing your address (on Google Maps, for example). Inside of the tag should be your address, with a <br> tag at the line break.

<a href="">Facebook</a>
<a href="">Instagram</a>
<a href="">Twitter</a>
The empty quotation marks should contain Facebook, Instagram, and Twitter links (or whatever links you would like to share) respectively.


Product Thumbnails

Thumbnail Link & Image

<li><a href="../shop/product"><img src="../resources/images/placeholder.png" alt="Product image placeholder"><div class="productinfo">
[Name, product color options, price, and buy button]
</div></a></li>
Product thumbnail images should be saved in this img src path, in a square cropped .png format. Links should be replaced with relevant product page links. Placeholders are given for product information, which is expanded upon below.

Product Name

Example using “Alpha”:
<div class="producttitle">Alpha</div>
“Alpha”, or the product name given, should be replaced with your product name.

Product Color Options

<div class="productoption"><div></div><div></div><div></div></div>
Product colors can be customized by adding styles to each "<div></div>" within "productoption". Each can look like this: <div style=“background-color: #e0e0e0;”></div>, where “#e0e0e0” is your custom color.

Product Price

<div class="productprice">$10</div>
$10 should be replaced with your product price.


Shop Categories

Categories work by hiding or showing <div> elements based on Javascript triggered when the user changes the category dropdown menu. Here is what it all looks like:

Shop Category Dropdown Options

<h1 id="productlisttitle">Shop all</h1>
<select id="productcategory">
<option value='all'>All</option>
<option value='1'>A - D</option>
<option value='2'>E - H</option>
</select>
The list title and categories can be changed, but groupings and Javascript (shown below) must reflect these changes.

Shop Category Groupings

<div class="productcategory1">
[Product thumbnails in "productcategory1” go here]
</div>
<div class="productcategory2">
[Product thumbnails in "productcategory2" go here]
</div>
Groupings can be changed by moving them to contain the correct product thumbnails.

Javascript (resources/script/categories.js)

$('#productcategory').change(function() {
if ($(this).val() === 'all') {
$(".productcategory1").removeClass('hide');
$(".productcategory2").removeClass('hide');
$("#productlisttitle").html("Shop all");
}
if ($(this).val() === '1') {
$(".productcategory1").removeClass('hide');
$(".productcategory2").addClass('hide');
$("#productlisttitle").html("Shop A - D");
}
if ($(this).val() === '2') {
$(".productcategory2").removeClass('hide');
$(".productcategory1").addClass('hide');
$("#productlisttitle").html("Shop E - H");
}
});
In this script, not only are id elements being changed to hide/show sections, but the title for the content is also changed depending on the category value. (“Shop all”, “Shop A - D”, and “Shop E - H”) These should be changed appropriately.


Product Pages

To create multiple product pages, duplicate the “product” folder containing the Product page and rename this folder appropriately. This creates Product pages that have different names (depending on the folder name) that can be edited separately using their containing index.html file.

Product Slideshow Images

<img class="swiper-slide" src="../../resources/images/placeholder.png" alt="Product image placeholder">
These slides can be added/deleted as needed, where src values are paths to appropriate product images.

Amount of Images Below Main Image

slidesPerView: 3,
Change 3 for more image previews below the main slideshow.

Product Details

<h1>Product Name</h1>
<h2>$10</h2>
<p>A description of the product goes here.</p>
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
<p class="subtext">Details about shipping.</p>
Product details should be edited to fit proper product information.

Product Options

<select id="productselect">
<option value='s'>Small</option>
<option value='m'>Medium</option>
<option value='l'>Large</option>
</select><br>
These options should be contained in a form with your “Add to cart” button to tell your preferred checkout method which product option your customers would like.

Product Add to Cart Button

<a href=""><img id="productaddtocart" src="../../resources/images/addtocart.png"></a>
The empty quotation marks should contain a link to your preferred checkout method's add to cart option, or act as a form submission telling your checkout method the selected option above.

Related Products

<div id="productrelatedtitle">Related products</div>
<ul id="productlist" style=" margin-bottom: 220px;">
[4 related product thumbnails]</ul>
The links currently given will bring you to the same product page by default, “shop/product”. (See Product Pages) These links, along with visual content, should be added/deleted/changed for Related products appropriately.


Other Page Elements

Homepage Banner HTML

<div class="banner">
<h1>Centered text about a product.</h1>
<a class="buybuttonlrg" href="shop/product">Buy</a>
<a class="learnmorebuttonlrg" href="shop/product">Learn more <img class="learnmorearrow" src="resources/images/learnmorearrow.svg" alt="Navigation arrow icon"></a>
</div>
The contents of the <h1> tag as well as the links for “Buy” and “Learn more” should be changed appropriately. To change the background image, see the CSS below.

Homepage Banner CSS
.banner {
[Other CSS]
background-image: url("../images/placeholder.png");
background-repeat: repeat;
[Other CSS]
}
To change the background image of the banner, this placeholder image path (following background-image) found in the main stylesheet (resources/stylesheets/style.css) should be changed.

Homepage Latest Products

<h1 id="productpreviewtitle">Shop our latest products</h1>
<ul id="productlist">
[Four latest product thumbnails]
</ul>
The contents of the <h1> tag and containing thumbnails should be changed appropriately. (See Product Thumbnails)

Homepage Featured Product

<div class="featuredproduct">
<img class="featuredimg" src="resources/images/placeholder.png" alt="Product image placeholder">
<span class="featuredtext">
<h2>Product Name</h2>
A brief description about this product.
<a class="buybuttonlrg" href="shop/product">Buy</a>
<a class="learnmorebuttonlrg" href="shop/product">Learn more <img class="learnmorearrow" src="resources/images/learnmorearrow.svg" alt="Navigation arrow icon"></a>
</div>
The image src for “featuredimg” should be changed to your featured product’s image. The content of the <h2> tag, the description below it, and the links should be changed appropriately.

Homepage Introduction

<div class="introblock">
<div class="introtext">
<h2>This is an introduction to us.</h2>
Learn more about us in this paragraph. Learn more about us in this paragraph. Learn more about us in this paragraph.
<a class="aboutbutton" href="about">More about us</a>
</div>
<img class="introimg" src="resources/images/placeholderw.png" alt="Product image placeholder (White)">
</div>
The contents of the <h2> tag, the text below it, and the following link should be changed to provide an introduction.

About Content

<h1 id="mission">Our mission statement goes here.</h1>
<img id="aboutimg" src="../resources/images/placeholder.png" alt="About image placeholder">
<p>[Paragraph 1]</p>
<p>[Paragraph 2]</p>
<div id="centertext">
<a class="infobuttonlrg" href="../shop">View all products</a>
</div>
The content of the <h1> tag should contain your mission statement, the src for “aboutimg” should be a high quality photo that represents you, and the <p> tags should contain paragraphs about you. The “View all products” button can be customized as you like.

Thank you, Sold out, & 404 Content

These pages can be found in directories thankyou, soldout, and 404.html.

<div id="centertext"><h1>[Heading]</h1> [Message]<br>
<a class="infobuttonlrg" href=“./“>[Navigation]</a></div>
Thank you, sold out, and 404 pages are all formatted like the HTML shown above, where heading, message, and navigation placeholders should be edited appropriately.
Links to the Thank you and Sold out pages should be given to your preferred checkout method to tell them where you would like customers to be forwarded to after they make a purchase or if they need to be told a product is now sold out.