Changes that I made to the Simple Theme

I made some changes to the Simple Theme, mostly to find my way around the themes system that Shopify use.

The following changes were made:

theme.liquid

• Loaded Google fonts
• Commented out loading of the logo. This is because in the header page, once I had chosen a logo I could only replace it with another logo, i.e. I could not disable it altogether.
• Inserted text as logo. Used Google Fonts for this text.
• Used jQuery to make logo size dependent on device, e.g. desktop, tablet or phone. Also  changed the logo size when the orientation of a mobile device is changed, e.g. user switches from portrait to landscape or vice versa.
  I know that I should have used the media queries (@media) for this but I wanted to make sure that jQuery worked with the theme.

page.mysnippets.liquid

This is a new file that I created to play around with some liquid code. I accomplished the following:

•  Looped through all products and displayed such details product title, tags, price, whether product was on sale or not and what collections the product belong to. I also showed the variants and the current inventory levels of the first variant.
• Looped through tags collection and outputted the number of times that each tags was used.
• Looped through the cart collection and displayed details for each item in the cart. If you add an item to the cart it will dynamically show in the snippets page.
• Looped through all products and displayed an image for each product, outputted the 'sale' badge where the item is on sale. I used the sales badge--sale class to accomplish this (I found references to this in the system liquid files).

page.FAQs.liquid

This is a new file that I created and made the following changes:

• I inserted a number of questions with dummy answers.
• I inserted a jQuery Accordion to open/close answers to FAQs.

theme.scss.liquid

• Changed the colour of the #SiteNav to white and the font-size: 110%
• Changed the padding-left to move menu items away from the container.
• Changed the .logo_text : Cookie Cursive; with color: green;, font-size: 80px; and padding: 20px;. This is the company logo that is used for the site. Note that the font-size is changed for smaller devices (see changes under theme.liquid).
• Used Media Queries (@media) to stop showing the company address at max-width: 749px. (Using Firefox Responsive Design View I saw that this is the point where the theme switches from standard to mobile view.) This saved valuable space on the smaller devices.

General

• Changed the language settings to get rid of the Powered by Shopify among other things.
• Downloaded and installed the Reviews app.
• Inserted a video on a separate page.
• Wrote an About me page.
• Wrote a number of blogs on the Blogs page.