This repo contains partials and instructions for several common features added to Shopfiy e-commerce websites.
Currently Shopify's built-in blog does not have a way to handle adding a "category" filter to blog posts. This section of snippets/documentation provides the illusion of WordPress-like category structure using Shopify's native tags.
Built with Shopify's native Navigation, this mega menu contains the bare bones for a standard site navigation and header, along with DOM for including custom images per sub-link title.
Built with Shopify's Script Editor app, this custom line item script checks the value of the items in the cart and implements a percentage discount based on that value. One version requires a discount code and the other does not.
Built to work with Shopify's new Sections for Homepages, this same setup can be modified to fit other theme requirements.
Built with Shopify's Script Editor app, this custom shipping script looks for a specific shipping service and updates its cost to $0. One version requires a discount code and the other does not.
Currently Shopify does not include a way to sort products to display New products first and Sold Out products last on the collection page. This snippet will ONLY work for collections that contain 50 or fewer products. This is due to a Shopify built-in hard limit to avoid over-taxing its databases. See this forum thread for more information.
This liquid snippet can be included on any page and will display a modal if a user's IP location is one of those identified. For this example, the country codes are for Taiwan, Hong Kong, and China. This snippet requires an account with ipstack.com in order to get an access key. See ipstack.com for a complete set of documentation.
For collection pages a design may call for using a Load More button to ajax the next page of products onto the existing page, rather than using the traditional pagination provided by Shopify. This snippet and accompanying script implement this behavior.
For collection pages a design may call for using adminable ad spots. This snippet describes how a single spot can be inserted; however, in most cases, clients will want two or more spots.
Built to work with Shopify's new Sections for Homepages, this custom section will display up a selection of featured products.
Rather than using a third-party app, add swatches to products via these code changes. See this documentation for more information.
Built to work with Shopify's new Sections for Homepages, this snippet can be adjusted to display a number of blocks of data. Duplicate the section and adjust it as needed.
For the collections page, this snippet will add a second image to be used on image hover. See this documentation for more information.
For the collections page, this snippet will add filtering behavior based on product tags. See this documentation for more information.
For the collections page, this snippet will add sorting behavior. See this documentation for more information.
This snippet adds social sharing links to each blog article for Facebook, Twitter, Pinterest, a generic link, and to send an email. See this documentation for more information.
This script provides an example of a slider that initializes at mobile resolutions only. See this documentation for more information.
Because the new Sections only work for the Homepage, this snippet allows for metafield-adminable content on other pages, such as blog articles or collection list pages.
Because the new Sections only work for the Homepage, this snippet allows for metafield-adminable content on other pages, such as product pages, when the content is variable.
Because the new Sections only work for the Homepage, this snippet allows for a metafield-adminable section to display toggleable items as a FAQs example.
This snippet was built to display a secondary nav that appears at a certain position, disappears at a certain position, and highlights available sections while scrolling or on click. See this documentation for more information.
Built for use on the Homepage, this adminable section displays a selection of images in a slider at mobile resolutions. See this documentation for more information.
Add a back-to-top button on each page to enable users to return to the top of page wherever they are on any given page.
Add a section to each product page to display a random group of related products. See this documentation for more information.