Product Variants on Homepage Dawn 15

Shopify Discussion
1

Hi all, I am wanting to show variants on my homepage, or a quick add button or on hover to show the variants.

But am having some issues, another website of mine I did easy with Dawn theme but version 15 doesn’t seem to allow me to.

Anyone found a solution for this.

2

Hello Jadereecee1997,

As per my understanding, you want multiple images on hero ( banner ) image and hover image on product meaning someone hover on product it show different image. Correct me if I am wrong.

  1. Hero image: If you want to use multiple images on banner section, you should use other free themes like Refresh (https://themes.shopify.com/themes/refresh/styles/default/preview) where you can add N number of banner images. Best practice is to keep 2 - 3 image max, no more.

  2. Hover effect on Product section/ Product image: Normally every theme provide hover effect facility so when you keep your mouse cursor on product image, it show different image plus you can add following tag as well in these free theme “Sale”, “Sold Out”, “New” etc.

3

@jadereece1997 You need to include a snippet that loops through the product variants and displays them as options on the homepage.

{% for variant in product.variants %}
  
  
{% endfor %}
4

Hey Sorry, I am more needing like variant pills to add to cart from home without clicking in, or quick add options. So you don’t have to enter the product to add to cart.

5

Hey Sorry, I need variant pills to add to the cart from home without clicking in, or quick add options. So you don’t have to enter the product to add to cart.

6

Hello Jadereecee1997,

For variant pill please follow below steps:

  1. From your Shopify admin, go to Online Store > Themes
  2. Find the theme that you want to edit, and then click Customize.
  3. Click the Theme settings gear icon.
  4. Click Variant pills.
  5. Optional: Use the range slider to change the appearance of your variant pill Border.
  6. Optional: Use the range slider to change the variant pill Shadow. Setting the shadow Opacity to 0% removes the shadow.
  7. Click Save.