A compilation of several custom development jobs done in various of our client's stores, in no particular order. These custom developments may have changed in the store from the time when we posted them here.
Swatches in product page
- These use flat colors or images.
- Developed directly in the theme, not using an app.
Store Locator Map
- Admin is able to add multiple stores through theme customizer
- Visitors can search for an address and will show the closest stores
- Includes a directions button in the store address
- Map embedded in the site for easy visibility
Collection Page Layout Change
- Copied layout from page shop.ledger.com to the client's store
- Image on the left
- Bullet points pulled from the product description
- Show reviews count
- Show price on the right
- View details button on the right
- Quick add to cart button
Product Sizes on Hover in Collection Page
- Sizes swatches on hover
- Clicking on the size will send to the product page with that size selected
Dropdown Selector Form in Specific Pages
- The dropdown selector is an easy way for visitors to pick the main city (dropdown #1) and then a store (dropdown 2).
- Option 2 is based on Option 1 picked on the first dropdown.
- Once both options are picked and visitor clicks on NEXT button, he will be redirected to a page where he can pick a date and time for an appointment in the selected store.
- Admin can edit all information through the theme customizer and navigation
Header Layout Change
- Logo on the left, search bar on the center of the page, secondary menu on right
- Main menu below the main header
- 5 level deep menu
- Responsive for desktop and mobile
Header Layout Change
- Mega menu open on hover with main image on the left
- When hovering over an inner link, image will change
- "Free US Shipping" text on right of menu
- Responsive for desktop and mobile
Set Date to 7 Days from Today
- There is regular text that must show a date 7 days from the current date automatically
- Done with JS, the text shows the correct date in the future automatically.
- Can be edited by the admin through the theme customizer
Circular Thumbnails with Pointing Hands in Product Page
- Applies on mobile only
- Circular thumbnails
- Pointing hand on selected thumbnail
Scroll to Top on Mobile
- Applies only on mobile version
- Will appear only when visitor gets to the product description
- Will take visitor back to the start of the product description
Custom Cart Page for Mobile
- 2 Secure Checkout buttons
- Reviews between the buttons
Don't Automatically Select Variants
- Variants are selected by default in a product page. The job was to disable this feature and make the buyer pick a choice for Color and Size.
Color Swatches in Collection Grids
- If product has swatches, show it in any Collection grid
Show Additional Information of Products
- The client needed to add "Intensity" levels to their products and show this information in the Collection Grids and Product pages
- With the help of "metafields" we were able to provide the client with control over additional information for each of his products.
- Whenever the client updates the information for the "Intensity" levels, the corresponding number will show in the Collection pages and Product pages.
Show Price per 100g
- A calculation was done to get the price per 100g based on the selling price and the weight of the product.
- If the product includes both a price and weight, the calculation will run successfully and will show the right price per 100g both in Collection pages and Product pages.
- The calculation is based on the regular price, not the sale price of the product.
Add to Cart in Collection Grid
- Add to Cart buttons were added to Collection pages to allow potential buyers to purchase products more easily.
Show VAT Prices on Product Pages
- If your government requires you to show prices with taxes included, but you want your international customers to pay less than the VAT-included price, you will need to show two prices in your shop. One price will be with taxes included for your local customers, and one price will be without taxes for your international customers.
- Once buyers get to the checkout, the correct price will be shown to them once they enter their contry of residence.
Disable Add to Cart Until Size is Selected
- Add to Cart button is disabled if Size is not selected.
- Once a Size is selected the Add to Cart button is enabled again.
Added Snippet Code for LayBuy & Afterpay
- Both snippets were added to product pages
- Further JS was done to change the text and style of each of the snippets
Swatches on Product Pages
- Swatches functionality was developed from scratch
- The main image on the left and the thumbnails should only show products from the color selected. If black was selected, then only show black products and hide the rest. If green was selected, only show green products and hide the rest
Limit Quantity of Products Available for Purchase
- The client has control to set the maximum purchase quantity in the Theme Customizer, as well as the Products to which this feature will apply.
- The client set the limit to 24 quantities.
- They have different available boxes to pick from so this quantity limit must also consider the variants.
- If "Box Size" selected is "3 Pitchers", then a buyer can only add 8 of these, making this a total of 24 in total.
- Similarly, if "Box Size selected is "2 Pitchers", then a buyer can only add 12, making it a total of 24.
- If "Box Size" is "1 Pitcher", the buyer can select up to 24.
- When the total quantity selected surpasses the total (24) a message will let the buyer know that there is a restriction in the total amount of individual items he can buy.