Show all products as separate variants on the collection page of the Debut Theme
May 06, 2019 12:04
This site is a collection of guides for highly requested and searched features that you can do with Shopify, but there isn't a lot of documentation on. I love hearing comments and feedback on the current guides, how they can be made better, and what new ideas you would love to see.
I started learning to code while working at Shopify and I have been practicing a ton while working on a number of projects.
I plan to blog about HTML, CSS, JS, and Ruby on Rails. If there are any guides you would like to see, please reach out on the About page.
Happy Coding!
- Dylan Hunt
by: Dylan Hunt | Published: May 06, 2019 12:04
I have had a lot of comments for people looking to have this guide work specifically for the Debut theme, so I am going to try to be as specific as possible and hopefully this can help more people achieve this on their own.
If you have a product such as a swimwuit that has 10 colors, you may want to keep it as one product, but to make your collection page look more 'full', so here is how you can turn that one product into 10 different ones on the collection page, but have the product page stay the same as one product with many variants on the Debut theme.
1. Find the product-card-grid.liquid snippet and open it. This is the loop that is used to display all products in the collection.
2. Replace the product-grid-item with the code below.
3. Find the Collection-template.liquid section and remove the codes on line 158 and 160. These should start with li and /li respectively.
You should be all set now.
Comment below if you're struggling.
by: Dylan Hunt | Published: March 12, 2019 15:03
I have had a lot of comments for people looking to have this guide work specifically for the Minimal theme, so I am going to try to be as specific as possible and hopefully this can help more people achieve this on their own.
If you have a product such as a swimwuit that has 10 colors, you may want to keep it as one product, but to make your collection page look more 'full', so here is how you can turn that one product into 10 different ones on the collection page, but have the product page stay the same as one product with many variants on the Brooklyn theme.
1. Find the product-grid-item.liquid snippet and open it. This is the loop that is used to display all products in the collection.
2. Replace the product-grid-item with the code below.
You should be all set now.
Comment below if you're struggling.
by: Dylan Hunt | Published: March 07, 2019 13:54
I have had a lot of comments for people looking to have this guide work specifically for the brooklyn theme, so I am going to try to be as specific as possible and hopefully this can help more people achieve this on their own.
If you have a product such as a swimwuit that has 10 colors, you may want to keep it as one product, but to make your collection page look more 'full', so here is how you can turn that one product into 10 different ones on the collection page, but have the product page stay the same as one product with many variants on the Brooklyn theme.
1. Find the product-grid-item.liquid snippet and open it. This is the loop that is used to display all products in the collection.
2. Replace the product-grid-item with the code below.
You should be all set now.
Comment below if you're struggling.
by: Dylan Hunt | Published: December 17, 2018 15:00
One of the biggest issues I have seen with scripts is that it is really easy to give discounts based on line item value, but calculating the cart value, and applying logic based on that is causing a lot of people issues. Here is a REALLY easy way to solve for this and I will give two examples.
This will give the customer a discount of $5 if the cart is over $30.
This will give the customer a discount of $5 if the cart is over $50 OR will give them $10 off if the cart is over $100.
As always, let me know if there are any questions in the comments.
by: Dylan Hunt | Published: May 16, 2018 17:12
Alright, I see a lot of people asking for this and wanted to provide a guide to help anyone looking to do this. If you have a product such as a swimwuit that has 10 colors, you may want to keep it as one product, but to make your collection page look more 'full', so here is how you can turn that one product into 10 different ones on the collection page, but have the product page stay the same as one product with many variants.
You'll need to update your product loop to change the information to update to the right variant URL's and such, but that part above is the most complex. Comment below if you're struggling.
by: Dylan Hunt | Published: May 11, 2018 15:53
Alright, so this was something I searched for around the shopify universe and was not able to come up with a guide, so here we go.
We are going to start by adding a nice filter on the theme to filter by the sizes that are available between ALL products on the currently selected page. The guide below ASSUMES that the size is the 2nd option. if it is the first for you, change the 1 to a 0.
I am adding this code to the theme alongside the other filters, which is often in a snippet called filters, but might just be in your collection-template.liquid section.
Next we need to add the tags of each size (or color depending how you're doing this) to the products in the store. This is by far the most annoying part of making this happen on your store.
By adding the tags, we ensure that the right products ALL show up on the site when the filter by the size, which really acts as a tag filter with Shopify's URL filtering
Now its time to make sure that we ONLY show the products that are in stock. So we will do this by removing matching the variants available in that specific product, with the tag filter, and determine if it matches.
The code below will go in the area on your site that has the product grid item. Usually this is called product-grid.liquid and is a snippet, but it will be clear if you find the product for loop in the collection template.
With those two codes added you should be good to go in any theme to filter any collection by the size or color in stock.
May 06, 2019 12:04
March 12, 2019 15:03
March 07, 2019 13:54
December 17, 2018 15:00