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).
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
Customize Payment Option Graphics in Footer

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

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

Step 3 - Look under the Other Template Files
for the file referenced below
How to quickly find and edit Bigcommerce template files

Step 4 - Open CraftedSettings.html
- 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

Customize Search Placeholder Text

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

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

Step 3 - Look under the Other Template Files
for the file referenced below
How to quickly find and edit Bigcommerce template files

Step 4 - Open CraftedSettings.html
- Locate the javascript variable titled
craftedSearchPlaceholder
- 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

Customize Profile "Meet the Designer" Text

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

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

Step 3 - Look under the Other Template Files
for the file referenced below
How to quickly find and edit Bigcommerce template files

Step 4 - Open CraftedSettings.html
- Locate the javascript variable titled
craftedMeetDesigner
- 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

Customize Newsletter Sign Up Headline and Button Text

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

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

Step 3 - Look under the Other Template Files
for the file referenced below
How to quickly find and edit Bigcommerce template files

Step 4 - Open CraftedSettings.html
- Locate the javascript variable titled
craftedNewsletterSubmit
- Edit the text between the double quotes
"Sign Me Up"
- Locate the javascript variable titled
craftedNewsletterHeadline
- 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

Turn on Pop Up Advertisement

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

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

Step 3 - Look under the Other Template Files
for the file referenced below
How to quickly find and edit Bigcommerce template files

Step 4 - Open CraftedSettings.html
- Create an image banner ad sized
800px X 450px
with the namepopup.jpg
- Upload the image to your Bigcommerce Image Manager
- Locate the javascript variable titled
craftedPopUpLink
- Replace the text in the double quotes with the page URL you would like the banner to link to
- Locate the javascript variables titled
craftedPopUpNoShowBodyClass1-3
- 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.
- Locate the javascript variable titled
craftedShowPopUp
- 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

In order to test the pop up functionality you may need to remove cookies from your browser. Edit this cookie chrome extension
Customize Header Unique Selling Proposition Boxes

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

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

Step 3 - Look under the Other Template Files
for the file referenced below
How to quickly find and edit Bigcommerce template files

Step 4 - Open CraftedUSP.html
- Determine the top two characteristics of your store or brand that makes you unique. It may be your shipping policy, or your unique materials.
- Write short titles and description text to fit (2-3 words)
- Find new icon appropriate for your text
- Replace
with your new icon
- 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

Customize Profile Box

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

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

Step 3 - Look under the Other Template Files
for the file referenced below
How to quickly find and edit Bigcommerce template files

Step 4 - Open CraftedProfile.html
- Add an image into the Image manager with the name
headshot.jpg
and dimensions of100px X 100px
to replace the placeholder image - Replace
Hi, I’m Melissa.
with your first name - 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

Add Homepage Carousel Banners

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

Step 2 - Click on the Carousel & Social Media
tab
- 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 use980px X 450px
. Heading
Add a short and catchy headingText
Short description text if neededButton Text
Add your call to action link.Button Text with a price
($20.00) Add a price in parenthesis and the button will automatically change to a price tag.Link
Add your destination page
Final Step - Click Save
Add Small Homepage Image 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.
Banner Name
Give your banner a nameBanner Content
Click in the textarea and write a short title and select all the text and change it to aHeading 1
- Hit enter on your keyboard to move to a new line
- Write your call to action link text
- Select the text and click on the hyperlink button to point to the destination page
- Hit enter on your keyboard to move to a new line
- Click on the
insert/edit image
button and either upload or select from an existing image sized to250px X 160px
Show on Page
Select Home PageDate Range
Specify how long you want the banner to appear. In our case we this to show all the time.Visible
Activate or deactivate the bannerLocation
SelectTop of Page
Example

Final Step - Click Save
Add Small Category Image 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.
Banner Name
Give your banner a nameBanner Content
Click in the textarea and write a short title and select all the text and change it to aHeading 1
- Hit enter on your keyboard to move to a new line
- Write your call to action link text
- Select the text and click on the hyperlink button to point to the destination page
- Hit enter on your keyboard to move to a new line
- Click on the
insert/edit image
button and either upload or select from an existing image sized to250px X 160px
Show on Page
Select Category, Brand, or Search PageDate Range
Specify how long you want the banner to appear. In our case we this to show all the time.Visible
Activate or deactivate the bannerLocation
SelectTop of Page
Final Step - Click Save
Add Footer Image 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
Banner Name
Give your banner a nameBanner Content
Click in the textarea- Next, Click on the
insert/edit image
button and either upload or select from an existing image sized to600px X 200px
- Select the image and click on the hyperlink button to point to the destination page
- Hit enter on your keyboard to move to a new line
- Repeat the exact same process
- You should now have two image banner ads stacked
Show on Page
Select Category, Brand, or Search - It will appear in teDate Range
Specify how long you want the banner to appear. In our case we this to show all the time.Visible
Activate or deactivate the bannerLocation
SelectBottom of Page
Final Step - Click Save
Add Product Overview Bullet Points Under Add to Cart Button

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
- Add a bullet list of features at the very top of your product description
- When finished click on the
HTML
button in the top right corner of the editor - Change
<ul>
to<ul class="featuresList">
- 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
Change Have a Question? box in sidebar

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

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

Step 3 - Look under the Other Template Files
for the file referenced below
How to quickly find and edit Bigcommerce template files

Use Ctrl F or Command F to quickly locate template files in the list.
Click it
Step 4 - Look in the top left corner in sidebar for heading Files Used by this template
for the file referenced below
Click it
Step 4 - Open CraftedProfile.html
- 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

Remove the negative space on pages

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

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.
