Category: Tutorial

Making a cheap bookshelf using milk-crates

A couple weekends ago, my fiance and myself came up with the idea to make custom bookshelf using milk-crates. We didn’t actually have any milk crates, so we had to scour sites like Kijiji and Craigslist to find people in our area giving them away, or selling them cheaply. We also aquired some from a small corner store we visit frequently, first for free, then having to pay small amounts for them until we cleared them out!

Making this bookshelf will be pretty straightforward, and you don’t need many tools or additional items to make it. And, all you really need for this design is a total of 6 milk crates. However, this can change based on your design or what you plan on extending it to. 

First we had to figure out how wide the two milkcrates pushed together would be, so my fiance decided to use a small lighter to visualize the width before heading over to the home store. Not sure if this is the best method, but it seemed to work – lol!

So, let’s get down to business and start building this thing!

Here’s the list of stuff we had to procure.

  • Box of 1.5″ by 1/4″ stove bolts, with nuts. We got the box of 100 total nuts and bolts.
  • Box of 5/16″ fender washers (small hole, big disc)
  • Drill + drill bit (depending on bolt location)
  • Vice Grips, Wrench or (ugh!) Pliers to hold the bolt
  • 1 or 2 bottles of spray paint of your choosing. We picked Gold cause bling!

Now that you have parts procured and ready

So, now you’re going to want to lay out your shelf. Make sure to keep in mind that you may need to get it up, and down stairs or around tight corners. So, don’t make it too long, or, assemble it in it’s final resting place.

For our design, we chose to make a ‘staircase’ or ‘triangle’ out of the milk-crates, using 6 crates in total. This allows us to have it sitting in a triangle formation on the ground with shoe or other storage below, and 6 large spaces for books that will show up on an angle. You could also put it in a ‘staircase’ format up the wall, and have top shelves available for plants or other accessories.

You can do stepped shelves
Or, be fun like us and do a triangular shape !

So, once you have your design finalized (maybe you want to make an atari spaceship, or a rectangle, or whatever) lay out your milk crates in the design you want to get together.

Figure out where you want to put the bolts into the milk crates that will join them together securely, and easily. We chose to put 3 bolts per join, so in total we used this to secure ours (6 join spots):

  • 18 Bolts
  • 18 Nuts
  • 18 Washers

This is what we did to join ours together

First, we held them together and drilled a hole for the bolts.
Then, we tightened down with a screwdriver and vice-grips, or whatever they are called 🙂
Ended up looking like this, nice and tight!

What did it all cost?

  • Milk Crates – Free + $10
  • 2 Cans of spray paint  – $25.58
  • Fender Washers – $11.65 (50 qty) ($4.14 cost for the whole shelf)
  • Stove Bolts + Nuts – $15.61 (100 qty)  ($2.88 cost for this whole shelf)

Grand total of $42.60 with plenty of nuts/bolts/washers for more shelves!

 

 

SED lines to remove Bold customer pricing app from Shopify Theme

The Bold Customer Pricing app for Shopify is a little complex to remove.

You can follow the installation instructions in reverse for removal but you’ll probably also need these lines below to quickly find and replace the lines it has modified in your theme.

The other edits can’t really be automated with ease as each theme is different, but, these should remain the same.

If you’re on Mac, you’ll need to do this first in your terminal.

export LC_CTYPE=C 
export LANG=C

Then, go to the directory with your theme downloaded, probably using the themekit if you’re a regular developer, and execute these commands which will find and replace all instances of bold’s code.

find ./ -type f -exec sed -i -e 's/bold_price/product.price/g' {} \;
find ./ -type f -exec sed -i -e 's/bold_price_min/product.price_min/g' {} \;
find ./ -type f -exec sed -i -e 's/bold_price_max/product.price_max/g' {} \;
find ./ -type f -exec sed -i -e 's/bold_price_varies/product.price_varies/g' {} \;
find ./ -type f -exec sed -i -e 's/bold_compare_at_price/product.compare_at_price/g' {} \;
find ./ -type f -exec sed -i -e 's/bold_compare_at_price_min/product.compare_at_price_min/g' {} \;
find ./ -type f -exec sed -i -e 's/bold_compare_at_price_max/product.compare_at_price_max/g' {} \;
find ./ -type f -exec sed -i -e 's/bold_compare_at_price_varies/product.compare_at_price_varies/g' {} \;
find ./ -type f -exec sed -i -e 's/bold_selected_or_first_available_variant/product.selected_or_first_available_variant/g' {} \;
find ./ -type f -exec sed -i -e 's/bold_selected_or_first_available_variant/product.variants.first/g' {} \;
find ./ -type f -exec sed -i -e 's/bold_selected_or_first_available_variant/product.variants[0]/g' {} \;

Then just make sure you’ve done all the changes mentioned in their installation instructions (in reverse!) and you should be good to go.

Hope this helps someone else too!

Howto add the Slick Slider to Shopify on the Home Page.

So, you’re probably here because you want to implement the slick slider on your Shopify site without using an expensive app, or, enabling it sitewide.

This quick tutorial will get you started with enabling the slick slider on your theme, on just one page (in this case, the home page). We’re only going to load the libraries required, if required, which will keep the other pages nice and fast.

First I would create a backup of your Shopify theme, and then work on it. This way you have a backup should you fuck things up.

** Note – this slider is setup for 150×80 size images. You’re pretty much for sure going to have to edit the CSS anyway, but at the bare minimum you’ll have to change those dimensions if you want different image sizes. We’re using this as a vendor/brand slider so this size is perfect.

  1. First you’re going to want to go here, and download the latest copy of the Slick library.

    http://kenwheeler.github.io/slick/

  2. Now extract the files somewhere.
  3. Now login to your Shopify Store.
  4. Go to Online Store -> Themes -> Edit HTML/CSS
  5. Now you will want to scroll down to Assets.
  6. Click Upload Asset and find your extract files, and upload these one at a time.
    slick.min.js
    slick.css
    slick-theme.css 
    fonts/slick.woff
    fonts/slick.ttf
    fonts/slick.svg
    fonts/slick.eot
  7. Modify slick-theme.css and change the font path (remove ./font/)
    src: url('./fonts/slick.eot');

    Now becomes

    src: url('./slick.eot');
  8. Open up theme.liquid and in the header section (between <head> and </head>) paste the following code
    {% if template == 'index' %}
    {% if settings.home_vendor_carousel_enable %} 
    {{ 'slick.css' | asset_url | stylesheet_tag }}
    {{ 'slick-theme.css' | asset_url | stylesheet_tag }}
    {% endif %}
    {% endif %}
  9. Now scroll down to the bottom, and right before the closing body (</body>) paste the following code
    {% if template == 'index' %}
    {% if settings.home_vendor_carousel_enable %} 
    <!-- <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> -->
    {{ 'slick.min.js' | asset_url | script_tag }}
     <script type="text/javascript">
     $(document).ready(function() {
     $('.autoplay').slick({
     dots: false,
     infinite: true,
     speed: 500,
     slidesToShow: 5,
     slidesToScroll: 1,
     autoplay: true,
     autoplaySpeed: 2000,
     arrows: false,
     variableWidth: true
     });
     });
     </script>
    {% endif %}
    {% endif %}

    ** NOTE – we have the jquery, and jquery migrate library commented out because our theme already has it. If yours does not, you will need to uncomment the two two lines.

  10. Now, scroll up to where you want your slider and paste this code
    {% if settings.home_vendor_carousel_enable %}
    <center><h2>{{ settings.home_vendor_carousel_title }}</h2></center>
    <div class="slider-container">
     <div class="slider autoplay slider-custom">
     {% for i in (1..12) %}
     {% capture vendor %}home_vendor_enable_{{i}}{% endcapture %}
     {% capture vendor_name %}home_vendor_name_{{i}}{% endcapture %}
     {% capture vendor_logo %}vendor_logo_{{i}}.png{% endcapture %}
     {% if settings[vendor] %}
     <div>
     <a href="{{ settings[vendor_name] }}" title="{{ settings[vendor_name] }}">
     {{ vendor_logo | asset_url | img_tag: settings[vendor_name], "replace-2x img-responsive" }}
     </a>
     </div>
     {% endif %}
     {% endfor %}
     </div>
    </div> 
     <hr>
    {% endif %}
  11. Then paste this to the bottom of slick-theme.css, and edit anything you need to.
    .slider-container {
    position: relative;
    margin-top: 10px;
    left: 0;
    height: 100%;
    width:100%;
    }
    
    .slider-custom {
     width: 850px;
     margin-left: auto;
     margin-right: auto;
     display: block;
     height: 80px;
    }
    
    .slick-slide {
     width: 170px;
     padding-left: 10px;
     padding-right: 10px;
    }
  12. Now for the final change. Go back to your shopify admin interface, then to online store -> themes -> customize theme
  13. Scroll down to the config section
  14. Open up your copy of ‘settings_schema.json’
  15. Look for somewhere that makes sense (for us, we chose on the ‘home page’ section) and paste in the following keys / values
    {
     "type": "header",
     "content": "Vendor Logo Carousel"
     },
     {
     "type": "text",
     "id": "home_vendor_carousel_title",
     "label": "Vendor Carousel Title"
     },
     {
     "type": "checkbox",
     "id": "home_vendor_carousel_enable",
     "label": "Enable Vendor Carousel"
     },
     {
     "type": "checkbox",
     "id": "home_vendor_enable_1",
     "label": "Enable Vendor 1"
     },
     {
     "type": "text",
     "id": "home_vendor_name_1",
     "label": "Vendor link 1"
     },
     {
     "type": "image",
     "id": "vendor_logo_1.png",
     "label": "Icon",
     "max-width": 1000,
     "max-height": 563
     },
     {
     "type": "checkbox",
     "id": "home_vendor_enable_2",
     "label": "Enable Vendor 2"
     },
     {
     "type": "text",
     "id": "home_vendor_name_2",
     "label": "Vendor link 2"
     },
     {
     "type": "image",
     "id": "vendor_logo_2.png",
     "label": "Icon",
     "max-width": 1000,
     "max-height": 563
     },
     {
     "type": "checkbox",
     "id": "home_vendor_enable_3",
     "label": "Enable Vendor 3"
     },
     {
     "type": "text",
     "id": "home_vendor_name_3",
     "label": "Vendor link 3"
     },
     {
     "type": "image",
     "id": "vendor_logo_3.png",
     "label": "Icon",
     "max-width": 1000,
     "max-height": 563
     },
     {
     "type": "checkbox",
     "id": "home_vendor_enable_4",
     "label": "Enable Vendor 4"
     },
     {
     "type": "text",
     "id": "home_vendor_name_4",
     "label": "Vendor link 4"
     },
     {
     "type": "image",
     "id": "vendor_logo_4.png",
     "label": "Icon",
     "max-width": 1000,
     "max-height": 563
     },
     {
     "type": "checkbox",
     "id": "home_vendor_enable_5",
     "label": "Enable Vendor 5"
     },
     {
     "type": "text",
     "id": "home_vendor_name_5",
     "label": "Vendor link 5"
     },
     {
     "type": "image",
     "id": "vendor_logo_5.png",
     "label": "Icon",
     "max-width": 1000,
     "max-height": 563
     },
     {
     "type": "checkbox",
     "id": "home_vendor_enable_6",
     "label": "Enable Vendor 6"
     },
     {
     "type": "text",
     "id": "home_vendor_name_6",
     "label": "Vendor link 6"
     },
     {
     "type": "image",
     "id": "vendor_logo_6.png",
     "label": "Icon",
     "max-width": 1000,
     "max-height": 563
     },
     {
     "type": "checkbox",
     "id": "home_vendor_enable_7",
     "label": "Enable Vendor 7"
     },
     {
     "type": "text",
     "id": "home_vendor_name_7",
     "label": "Vendor link 7"
     },
     {
     "type": "image",
     "id": "vendor_logo_7.png",
     "label": "Icon",
     "max-width": 1000,
     "max-height": 563
     },
     {
     "type": "checkbox",
     "id": "home_vendor_enable_8",
     "label": "Enable Vendor 8"
     },
     {
     "type": "text",
     "id": "home_vendor_name_8",
     "label": "Vendor link 8"
     },
     {
     "type": "image",
     "id": "vendor_logo_8.png",
     "label": "Icon",
     "max-width": 1000,
     "max-height": 563
     },
     {
     "type": "checkbox",
     "id": "home_vendor_enable_9",
     "label": "Enable Vendor 9"
     },
     {
     "type": "text",
     "id": "home_vendor_name_9",
     "label": "Vendor link 9"
     },
     {
     "type": "image",
     "id": "vendor_logo_9.png",
     "label": "Icon",
     "max-width": 1000,
     "max-height": 563
     },
     {
     "type": "checkbox",
     "id": "home_vendor_enable_10",
     "label": "Enable Vendor 10"
     },
     {
     "type": "text",
     "id": "home_vendor_name_10",
     "label": "Vendor link 10"
     },
     {
     "type": "image",
     "id": "vendor_logo_10.png",
     "label": "Icon",
     "max-width": 1000,
     "max-height": 563
     },
     {
     "type": "checkbox",
     "id": "home_vendor_enable_11",
     "label": "Enable Vendor 11"
     },
     {
     "type": "text",
     "id": "home_vendor_name_11",
     "label": "Vendor link 11"
     },
     {
     "type": "image",
     "id": "vendor_logo_11.png",
     "label": "Icon",
     "max-width": 1000,
     "max-height": 563
     },
     {
     "type": "checkbox",
     "id": "home_vendor_enable_12",
     "label": "Enable Vendor 12"
     },
     {
     "type": "text",
     "id": "home_vendor_name_12",
     "label": "Vendor link 12"
     },
     {
     "type": "image",
     "id": "vendor_logo_12.png",
     "label": "Icon",
     "max-width": 1000,
     "max-height": 563
     }
  16. Now save the file.
  17. Now open your customize theme (online store -> themes -> customize theme) and go to where you setup the vendor slider.
  18. Add your images to the slider and the title / etc.
  19. Click save
  20. If you did everything right, you should see the slider now, probably needing some CSS work to position it properly.

Hope this helps someone else looking to add a custom slider to their shopify theme, while not adding it sitewide.