Crafted Bigcommerce Theme Documentation

Update: DIY Style Patch

Download and add these files to your store folder via WEBDAV to correct common style issues (carousel autoplay, sale tag on random products).

crafted-theme-v1-patch-03 – default-download

Hello.

Thank you for taking a look at my ecommerce website template Crafted™. This online store theme was created to help you sell more of your handmade or boutique products. Ideal for smaller stores with a handful of product categories but can be easily adapted for larger stores.

See how other Bigcommerce stores are using the theme.

Includes friendly theme support

I've been so happy with the Crafted theme I purchased but was even happier with the level of after support I received when I emailed to ask a couple of questions to customize it to my store/products. Jacob got back to me almost straight away and then helped me fix up my few things so I could get my store up and running quickly! I'm very glad I chose this theme, it has exceeded my expectations. THANKYOU

Owner, Yummy Mummy Food Company

Jacob, You are so helpful! Thank you so much!!! This is the best customer service I have ever received with theme implementation!!

Owner, Southern Magnolia Mineral Cosmetics

Customization Tutorial Navigation

Required Theme Customizations
Optional Theme Customizations

Download Creative Assets? Common Questions / Known IssuesTheme Support

Customize Payment Option Graphics in Footer

Crafted-currency

Step 1 - Log into the Bigcommerce Control Panel and click the Design link in the top right

control-panel-design

Step 2 - Click on the Edit HTML/CSS icon in the current theme panel

control-panel-edit-html

Step 3 - Look under the Other Template Files for the file referenced below

How to quickly find and edit Bigcommerce template files
  1. "Other Template Files" side panel
  2. Panels
  3. CraftedPaymentOptions.html
html-edit-panel

Step 4 - Open CraftedSettings.html

Directions
  • To "show" a payment option: add the word "hide" between the quotes in the class attribute in the image tag below
  • To "hide" a payment option: add the word "hide" between the quotes in the class attribute in the image tag below
  • To "change order" cut and paste <img alt="" /> tag into the order you would like them to appear
  • To include a missing payment option: create a new payment card graphic 73px x 45px
Example
<p class="paymentLogos">
<!-- This will be hidden because it has a class name "hide"--> 
<img class="hide" src="%%GLOBAL_TPL_PATH%%/images/crafted-ccards/money.png" alt="money" /> 
<!-- This will be visible because the class "hide" has been removed --> 
<img src="%%GLOBAL_TPL_PATH%%/images/crafted-ccards/credit.png" alt="credit" />
</p>

Final Step - Click Save then Close & Refresh

html-edit-actions
Top of Page | Leave a Comment

Customize Search Placeholder Text

Crafted-search-placeholder

Step 1 - Log into the Bigcommerce Control Panel and click the Design link in the top right

control-panel-design

Step 2 - Click on the Edit HTML/CSS icon in the current theme panel

control-panel-edit-html

Step 3 - Look under the Other Template Files for the file referenced below

How to quickly find and edit Bigcommerce template files
  1. "Other Template Files" side panel
  2. Panels
  3. CraftedSettings.html
html-edit-panel

Step 4 - Open CraftedSettings.html

Directions
  1. Locate the javascript variable titled craftedSearchPlaceholder
  2. Edit the text between the double quotes "handmade jewelry"
Example
craftedSearchPlaceholder = "YOUR TEXT HERE"; //2-3 words max

Final Step - Click Save then Close & Refresh

html-edit-actions
Top of Page | Leave a Comment

Customize Profile "Meet the Designer" Text

Crafted-profile-box Depending on what products you sell, you may want to be more specific with your title. For example, you could change it to "Meet the Artist" or "Meet the Crafter"

Step 1 - Log into the Bigcommerce Control Panel and click the Design link in the top right

control-panel-design

Step 2 - Click on the Edit HTML/CSS icon in the current theme panel

control-panel-edit-html

Step 3 - Look under the Other Template Files for the file referenced below

How to quickly find and edit Bigcommerce template files
  1. "Other Template Files" side panel
  2. Panels
  3. CraftedSettings.html
html-edit-panel

Step 4 - Open CraftedSettings.html

Directions
  1. Locate the javascript variable titled craftedMeetDesigner
  2. Edit the text between the double quotes "Meet the designer"
Example
craftedMeetDesigner = "Meet the designer"; // 1 word max

Final Step - Click Save then Close & Refresh

html-edit-actions
Top of Page | Leave a Comment

Customize Newsletter Sign Up Headline and Button Text

Crafted-newsletter-signup

You may want to encourage email sign-ups by offering a 10% Off coupon code. You can can also change the form submit button to fit your offer.

Step 1 - Log into the Bigcommerce Control Panel and click the Design link in the top right

control-panel-design

Step 2 - Click on the Edit HTML/CSS icon in the current theme panel

control-panel-edit-html

Step 3 - Look under the Other Template Files for the file referenced below

How to quickly find and edit Bigcommerce template files
  1. "Other Template Files" side panel
  2. Panels
  3. CraftedSettings.html
html-edit-panel

Step 4 - Open CraftedSettings.html

Directions
  1. Locate the javascript variable titled craftedNewsletterSubmit
  2. Edit the text between the double quotes "Sign Me Up"
  3. Locate the javascript variable titled craftedNewsletterHeadline
  4. Edit the text between the double quotes "Sign up for our newsletter"
Example
craftedNewsletterSubmit = "Get Coupon"; 
craftedNewsletterHeadline = "Sign Up & Save 10% Off Your First Order";

Final Step - Click Save then Close & Refresh

html-edit-actions
Top of Page | Leave a Comment

Turn on Pop Up Advertisement

crafted-pop-up You may have an offer or announcement you want your store visitors to see. You can turn on a pop up message that is shown once to every viewer.

Step 1 - Log into the Bigcommerce Control Panel and click the Design link in the top right

control-panel-design

Step 2 - Click on the Edit HTML/CSS icon in the current theme panel

control-panel-edit-html

Step 3 - Look under the Other Template Files for the file referenced below

How to quickly find and edit Bigcommerce template files
  1. "Other Template Files" side panel
  2. Panels
  3. CraftedSettings.html
html-edit-panel

Step 4 - Open CraftedSettings.html

Directions
  1. Create an image banner ad sized 800px X 450px with the name popup.jpg
  2. Upload the image to your Bigcommerce Image Manager
  3. Locate the javascript variable titled craftedPopUpLink
  4. Replace the text in the double quotes with the page URL you would like the banner to link to
  5. Locate the javascript variables titled craftedPopUpNoShowBodyClass1-3
  6. These hide the pop up ad from showing on pages you don't want to distract visitors because they are in the buying funnel. You can override this default setting by removing the class names you would like the ad to appear.
  7. Locate the javascript variable titled craftedShowPopUp
  8. Change the value false true
Example
// Change false to true to turn on a sitewide popup advertisiment
craftedShowPopUp = false;
// By default it is not shown on product pages or checkout
craftedPopUpNoShowBodyClass1 = "productPage";
craftedPopUpNoShowBodyClass2 = "cart";
craftedPopUpNoShowBodyClass3 = "checkout";
// Specify an advertisement image in your Image Manager
craftedPopUpIMG = "/product_images/uploaded_images/popup.jpg";
// Specify a page URL you would like to link to
craftedPopUpLink = "/sale/";

Final Step - Click Save then Close & Refresh

html-edit-actions

In order to test the pop up functionality you may need to remove cookies from your browser. Edit this cookie chrome extension

Top of Page | Leave a Comment

Customize Header Unique Selling Proposition Boxes

Crafted-usp

Step 1 - Log into the Bigcommerce Control Panel and click the Design link in the top right

control-panel-design

Step 2 - Click on the Edit HTML/CSS icon in the current theme panel

control-panel-edit-html

Step 3 - Look under the Other Template Files for the file referenced below

How to quickly find and edit Bigcommerce template files
  1. "Other Template Files" side panel
  2. Panels
  3. CraftedUSP.html
html-edit-panel

Step 4 - Open CraftedUSP.html

Directions
  1. Determine the top two characteristics of your store or brand that makes you unique. It may be your shipping policy, or your unique materials.
  2. Write short titles and description text to fit (2-3 words)
  3. Find new icon appropriate for your text
  4. Replace with your new icon
  5. Replace the href Customer Support with your new destination URL
Example
<ul class="usp">
	<li><span class="title">Free Shipping</span> <span class="desc">On Orders $99+</span> <a href="/shipping-returns/">Shipping & Returns</a></li>
</ul>

Final Step - Click Save then Close & Refresh

html-edit-actions
Top of Page | Leave a Comment

Customize Profile Box

Crafted-profile-box

Step 1 - Log into the Bigcommerce Control Panel and click the Design link in the top right

control-panel-design

Step 2 - Click on the Edit HTML/CSS icon in the current theme panel

control-panel-edit-html

Step 3 - Look under the Other Template Files for the file referenced below

How to quickly find and edit Bigcommerce template files
  1. "Other Template Files" side panel
  2. Panels
  3. CraftedProfile.html
html-edit-panel

Step 4 - Open CraftedProfile.html

Directions
  1. Add an image into the Image manager with the name headshot.jpg and dimensions of 100px X 100px to replace the placeholder image
  2. Replace Hi, I’m Melissa. with your first name
  3. Replace the text after your new name with your new description
Example
<!-- .profile -->
<div class="profile">
<div class="picture"><!-- Add an image into the Image manager with the name headshot to replace this image --> <img class="gravatar" src="/product_images/uploaded_images/headshot.jpg" alt="" /></div>
<div class="bio"><span class="title">Meet the Designer</span> <span class="desc"><b>Hi, I’m [Name].</b> [Description text].
<a class="about" href="[DestinationLink]">[LinkText]</a></span></div>
<!-- .bio --> %%Panel.SocialLinks%%</div>

Final Step - Click Save then Close & Refresh

html-edit-actions
Top of Page | Leave a Comment

Add Homepage Carousel Banners

Crafted-home-banner

Step 1 - Log into the Bigcommerce Control Panel and click the Design link in the top right

control-panel-design

Step 2 - Click on the Carousel & Social Media tab

Directions
  1. Add an image into the Image manager with the dimensions of 800px X 520px. You can find a PSD in your theme assets folder. If you are store does not have a side profile box for best results use 980px X 450px.
  2. Heading Add a short and catchy heading
  3. Text Short description text if needed
  4. Button Text Add your call to action link.
  5. Button Text with a price ($20.00) Add a price in parenthesis and the button will automatically change to a price tag.
  6. Link Add your destination page

Final Step - Click Save

Top of Page | Leave a Comment

Add Small Homepage Image Banner

Crafted-home-tile

Step 1 - Log into the Bigcommerce Control Panel and click the Marketing tab dropdown and select View Banners

Step 2 - Click on the Create a Banner button

It is important to follow the instructions below in order because there is code that works behind the scenes to create the banner.

Directions
  1. Banner Name Give your banner a name
  2. Banner Content Click in the textarea and write a short title and select all the text and change it to a Heading 1
  3. Hit enter on your keyboard to move to a new line
  4. Write your call to action link text
  5. Select the text and click on the hyperlink button to point to the destination page
  6. Hit enter on your keyboard to move to a new line
  7. Click on the insert/edit image button and either upload or select from an existing image sized to 250px X 160px
  8. Show on Page Select Home Page
  9. Date Range Specify how long you want the banner to appear. In our case we this to show all the time.
  10. Visible Activate or deactivate the banner
  11. Location Select Top of Page
Example
tile banner example

Final Step - Click Save

Top of Page | Leave a Comment

Add Small Category Image Banner

crafted-category-banner

Step 1 - Log into the Bigcommerce Control Panel and click the Marketing tab dropdown and select View Banners

Step 2 - Click on the Create a Banner button

It is important to follow the instructions below in order because there is code that works behind the scenes to create the banner.

Directions
  1. Banner Name Give your banner a name
  2. Banner Content Click in the textarea and write a short title and select all the text and change it to a Heading 1
  3. Hit enter on your keyboard to move to a new line
  4. Write your call to action link text
  5. Select the text and click on the hyperlink button to point to the destination page
  6. Hit enter on your keyboard to move to a new line
  7. Click on the insert/edit image button and either upload or select from an existing image sized to 250px X 160px
  8. Show on Page Select Category, Brand, or Search Page
  9. Date Range Specify how long you want the banner to appear. In our case we this to show all the time.
  10. Visible Activate or deactivate the banner
  11. Location Select Top of Page

Final Step - Click Save

Top of Page | Leave a Comment

Add Footer Image Banners

Crafted-footer-banners

Step 1 - Log into the Bigcommerce Control Panel and click the Marketing tab dropdown and select View Banners

Step 2 - Click on the Create a Banner button

Directions
  1. Banner Name Give your banner a name
  2. Banner Content Click in the textarea
  3. Next, Click on the insert/edit image button and either upload or select from an existing image sized to 600px X 200px
  4. Select the image and click on the hyperlink button to point to the destination page
  5. Hit enter on your keyboard to move to a new line
  6. Repeat the exact same process
  7. You should now have two image banner ads stacked
  8. Show on Page Select Category, Brand, or Search - It will appear in te
  9. Date Range Specify how long you want the banner to appear. In our case we this to show all the time.
  10. Visible Activate or deactivate the banner
  11. Location Select Bottom of Page

Final Step - Click Save

Top of Page | Leave a Comment

Add Product Overview Bullet Points Under Add to Cart Button

crafted-bullet-points

Step 1 - Log into the Bigcommerce Control Panel and click on the Products

Step 2 - Either edit an existing product or add a new product

Directions
  1. Add a bullet list of features at the very top of your product description
  2. When finished click on the HTML button in the top right corner of the editor Bigcommerce HTML edit screen
  3. Change <ul> to <ul class="featuresList">Bigcommerce HTML edit screen
  4. Click Update
Example
	<ul class="featuresList">
		<li>Feature and its benefit</li>
		<li>Feature and its benefit</li>
		<li>Feature and its benefit</li>
	</ul>

Final Step - Click Save

Top of Page | Leave a Comment

Change Have a Question? box in sidebar

have a question box

Step 1 - Log into the Bigcommerce Control Panel and click the Design link in the top right

control-panel-design

Step 2 - Click on the Edit HTML/CSS icon in the current theme panel

control-panel-edit-html

Step 3 - Look under the Other Template Files for the file referenced below

How to quickly find and edit Bigcommerce template files
html-edit-panel

Use Ctrl F or Command F to quickly locate template files in the list.

  1. "Other Template Files" side panel
  2. Layouts
  3. Category.html

Click it

Step 4 - Look in the top left corner in sidebar for heading Files Used by this template for the file referenced below

  1. Side panel
  2. "Panels in Template"
  3. CraftedSideContact.html

Click it

Step 4 - Open CraftedProfile.html

Directions
  1. Replace <li> Phone number code </li> with <li> Email code </li>
Example


<div class="sideContact">
    <h3>Have a question?</h3>
     <ul style="display:%%GLOBAL_HidePurchasingOptions%%">
         <li class="js-drawermenu-store-phone-container">
             <i class="fa fa-envelope"></i> <a href="mailto:youremail@domain.com?subject=feedback">Email Us/a>
         </li>
        <li style="%%GLOBAL_LiveChatCodeEnabled%%" class="HeaderLiveChat">
             %%GLOBAL_LiveChatCode%%
         </li>
   </ul>
</div><!-- .sideContact -->​

Final Step - Click Save then Close & Refresh

html-edit-actions
Top of Page | Leave a Comment

Remove the negative space on pages

Bigcommerce page open space

Step 1 - Log into the Bigcommerce Control Panel and click the Web Pages under the Web Content Dropdown menu

Bigcommerce select web pages

Step 2 - Click on the Page Name you would like to edit

Step 3 - Scroll to the bottom of the page to the Advanced Options section and select _pageOneCol.html in the Template Layout File Dropdown

Note: If this option is not available please contact support to add this template file to your store.

Bigcommerce select one column page template

Final Step - Click Save & Exit or Save and Keep Editing

Top of Page | Leave a Comment