Linking images of the team overview section with a site URL

I am using the "team section" to showcase our product offering, since we do not have an online shop. This seems to be the easiest way to do so.

https://www.keit.berlin/brote

Nevertheless, I would like to navigate to a subsite with more detail info, by clicking on the image. However, I don't seem to be able to link the image with a site url. Is there a simple solution to this?

22 minutes ago, Kolja said:

I am using the "team section" to showcase our product offering, since we do not have an online shop. Nevertheless, I would like to navigate to a subsite with more detail info, by clicking on the image.

I recommend using a Store page for the products, even if you do not plan to sell online.

This will provide you with a Product List Page for all products. Clicking on a product thumbnail will take users to a Product Detail Page where they can learn more.

You can hide the 'Add to Cart' buttons on your Store pages by adding this styling to the Custom CSS panel:

/* Hide Add to Cart buttons */
.tweak-products-add-to-cart-button .products.collection-content-wrapper .plp-grid-add-to-cart, .ProductItem .ProductItem-quantity-add-to-cart {
  display: none!important;
}

Did this help? Please give feedback by clicking an icon below  ⬇️

Nice idea. Thank you.

Two other questions. I added my on fonts. But in the product detail page, the Product name and the price is not applying the individual fonts. Do I need to solve this with code?

2) The arrows to move from one image to the next on the product detail page are way to big for my liking. Can I make them smaller somehow?

Hi @Kolja, Could you share the link to that specific page? That way, I can take a closer look and provide assistance with the font and arrow adjustments. Thanks.

Hello Spark,

thank you. here the info 

www.keit.berlin/shop-2

1) I would like to change the font types to my personal fonts (different applications in the text)

2) I would to change the font size in the text box

3) I would like to change the size of the image arrows left and right to be smaller

On 11/22/2024 at 5:08 PM, Kolja said:

Hello Spark,

thank you. here the info 

 

www.keit.berlin/shop-2

1) I would like to change the font types to my personal fonts (different applications in the text)

2) I would to change the font size in the text box

3) I would like to change the size of the image arrows left and right to be smaller

#1. You can use this to Custom CSS box

.grid-main-meta * {
    font-family: 'orpheus-pro' !important;
}

thank you Tuanphan,

that worked for the overview. But how can I change the font for the detailed page (Name and Price)?

How can I change the size of the font?

On 11/25/2024 at 11:39 PM, Kolja said:

thank you Tuanphan,

that worked for the overview. But how can I change the font for the detailed page (Name and Price)?

How can I change the size of the font?

 

 

Use this

h1.ProductItem-details-title, div.product-price {
    font-family: 'orpheus-pro' !important;
	font-size: 30px !important;
}