How to display only product images on Dawn theme home page?

Store Design
1

I am trying to show only the product pictures on home page in the featured collection section. Currently it also displays price and product name. I would like only the square picture to be displayed.

2

@12388 - this will need custom css for this part, can you please share your website link?

3

Hii @12388

Welcome to the Shopify community!
Thanks for your good question.

kindly share your store URL, so that
I will check out the issue and provide a solution.

4

Hi @12388 ,

Please share your store URL and if your store is password protected then please provide password too.

So that we can help you.

Thank you.

5

@AvadaCommerce @premadestores @suyash1
Www.Shmoodie.com

pw: shmood4l

thank you for your help.

6

@12388 - add this css to the end of your base.css file and check

#shopify-section-template--15366688211140__featured_products .card--standard .card__content .card__information {
    display: none;
    visibility: hidden;
}

suyash1_0-1645450702997.png
suyash1_0-1645450702997.png1366×768 155 KB

7

Hi @12388 ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css->paste below code at the bottom of the file:
#shopify-section-template--15366688211140__featured_products .card--standard .card__inner:before {
    padding-bottom: 100%;
}
#shopify-section-template--15366688211140__featured_products .card--standard .card__inner img {
    object-fit: contain;
}

#shopify-section-template--15366688211140__featured_products .card--standard .card__content {
    display: none !important;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

8

That did remove the price and description, but now when I click the picture it doesn’t take me to the product. Is it possible to make it so when I hover over the image it shows the price and description, or at least when I click the image it takes me to the product page.

9

@AvadaCommerce @suyash1

That did remove the price and description, but now when I click the picture it doesn’t take me to the product. Is it possible to make it so when I hover over the image it shows the price and description, or at least when I click the image it takes me to the product page.

10

Hi @12388 ,

If you want show price and description, you need to remove my previous css:

#shopify-section-template--15366688211140__featured_products .card--standard .card__content {
    display: none !important;
}

Thanks

11

@AVADA

No I want only the picture to show on the homepage, but I still want the link to the actual product page to work. When I used your code, the price and description went away like I wanted but I was no longer able to click the picture to go to the products actaul page.

12

Hi @12388 ,

YOu try below code:

.card--standard>.card__content .card__information .full-unstyled-link {
    font-size: 0 !important;
}

.card-information {
    display: none !Important;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

1 Like