Hinweis: Während unsere beliebtesten Anleitungen ins Deutsche übersetzt wurden, sind einige Anleitungen nur auf Englisch verfügbar.

Styling the Classic Products Page

You can use the Site Styles panel to customize the way products appear on your site. This is a great way to match the design and presentation of your products to your site's brand.

Product styling options vary by template. Use this guide to explore what you can style in the Classic Products Page.

Unterstützte Templates

The Classic Product Page is available in in these template families:

  • Adirondack
  • Avenue
  • Aviator
  • Bedford
  • Five
  • Flatiron
  • Forte
  • Ishimoto
  • Momentum
  • Montauk
  • Native
  • Pacific
  • Wells
  • Wexley

Produkt-Seite vs. Produktdetailseiten

Bevor du deine Produkte gestaltest, solltest du verstehen, wie Squarespace sie auf allen Websites strukturiert. Produkte sind in zwei Teile unterteilt: Produkt-Seiten, auf denen eine durchsuchbare Produkt-Seite erstellt wird, und dann einzelne Produktdetail-Seiten. Diese Bereiche teilen einige Stil-Anpassungen und haben ihre eigenen Stiloptionen.

To learn more, visit Adding products to your store.

Die Produktseite gestalten

  1. Go to any Products Page on your site.
  2. Klicken Sie im Hauptmenü auf Design und anschließend auf Website-Stil.
  3. Verwende die Produkt-Anpassungen, um den Stil der Produkt-Seite anzupassen.
  4. For tweaks specific to individual product details pages, exit Site Styles, open a product, then re-enter Site Styles.

Tipps:

  • Click any area of the page in the preview to display only the style tweaks available for that area and hide the rest.
  • If you have multiple Products Pages, style changes will apply to all of them to create a consistent look.
  • Your template may support additional features, such as banner images or page headers, that affect how the Products Page looks.  

Produktseite

Layout

Visitors to your Products Page see all your products laid out in a grid. Style the grid with the Products Per Row tweak.

Produkt-Bilder

Verwende die folgenden Optimierungen, um die Anzeige von Produktbildern auf der Produkt-Seite zu gestalten.

  • Product Item Size - Set the shape of the image container. Choose from the following height:width ratios: 1:1, 3:2, 2:3, 4:3, 16:9
  • Product Image Auto Crop - Choose whether the image crops to fill the image container.
  • Product Background Color - This color displays behind images that aren't cropped to the container size.

Here's an example where the images aren't cropped, and the product background color is set to blue:

Product details

Der Preis und der Titel jedes Artikels können auf der Produkt-Seite angezeigt werden.

  • Product List Titles: Under, Overlay - Set the title and price to display under the image or on hover.
  • Product List Alignment: Center, Left - Align text when Product List Titles: Under is enabled.
  • Produktpreis anzeigen - Deaktiviere das Kontrollkästchen, um die Preise auf der Produkt-Seite auszublenden.
  • Product Overlay Color - Set the color of the on-hover overlay when Product List Titles: Overlay is selected. Adjust the slider to set transparency.

Kategorie-Navigation

Nachdem du Kategorien zu deinen Produkten hinzugefügt hast, können diese oben auf der Produkts-Site ein Navigationsmenü erstellen. Kunden können diese Links verwenden, um die gewünschten Produkte zu filtern.

Deaktiviere die Option Kategorienavigation anzeigen, um die Kategorienavigation auf Detail-Seiten und auf der Produkt-Seite auszublenden.

Style the category navigation with these tweaks. These tweaks aren't available in every template.

  • Category Nav Font 
  • Category Nav Color 
  • Kategorie-Navigation: Aktiv-Farbe

Related products

Related products display in a grid at the bottom of the page. You can use these tweaks to change their appearance:

  • Elemente pro Zeile
  • Abstand der Elemente
  • Bild: Seitenverhältnis
  • Details Alignment: Center, Left
  • Titel-Abstand der Elemente

Weitere Informationen finden Sie unter Ähnliche Produkte anzeigen.

Details page

Classic Products Pages include some tweaks for the details page view:

  • Show Product Nav - Hide or display a navigation link back to the Products Page.
  • Product Social Sharing - Add Share buttons
  • Product Gallery Size - Set the size of the product image container. Choose from the following height:width ratios: 1:1, 3:2, 2:3, 4:3, 16:9.
  • Product Gallery Auto Crop - Choose whether the product image crops to fill the image container. If not, the Product Background Color will display behind the image.

Du kannst auch die Kategorienavigation sowohl auf der Produktdetail-Seite als auch auf der Produkt-Seite anzeigen.

Layout

Visitors to a product's details page see:

  • The item's image on the left
  • Item details on the right
  • A browsable thumbnail navigation below the item image
  • Content from the Additional Info tab displays below
  • A Back To link in the top left that leads back to your Products Page
Note: For Forte and Momentum, the item image shows on the right, with the details on the left.

„Zum Warenkorb hinzufügen“-Button

Adjust the Add To Cart button with the tweaks in the Buttons section. This affects other buttons on your site, such as the Submit button in a Form Block.

  • Style: Default, Solid, Outline, Raised
  • Shape: Square, Rounded, Pill
  • Button: Farbe
  • Textfarbe
  • Schriftart

Schriftarten

The text on the Products Page follows the same style tweaks as the text on the rest of your site. For example, to change the item title font or color, adjust the Header or Heading 1 tweak. Tweak names vary by template.

Variant drop-down menus are an exception, as they use the same font on all Classic Products Pages. This font can't be changed in Site Styles. 

Mouseover-Effekte

To display product names and prices over a color overlay on hover:

  1. Go to your Products Page.
  2. Klicke im Hauptmenü auf Design und dann auf Website-Stile.
  3. Scroll down to the Products section.
  4. Set Product List Titles to Overlay.
  5. Use the Product Overlay Color tweak to set the color that displays over the image and behind the text.
  6. Choose whether to Show Product Price.

Denken Sie daran:

  • On mobile, titles and prices always display under the image. The overlay color doesn't display.
  • The overlay color always displays on hover in desktop view. To minimize the effect, select Product List Titles: Under.

classic-hover-effect.gif

Beispiele

Experiment with the style options listed above until you settle on a design you love. We've included a few examples below to help inspire you. Each template may have more style options, such as banners, that can change the page's appearance.

Hier ist ein Beispiel für die Produkt-Seite im Template Avenue. Sie beinhaltet:

  • Kategorie-Navigation
  • Prices and titles below the image
  • Three items per row

classic-grid-avenue.jpg

Here's a more minimalist styling on the same template. It includes:

  • Prices that show on hover
  • A blue overlay color
  • Five items per row
  • A taller aspect ratio
  • No category navigation

classic-grid-avenue-2.jpg

Here's an example of how the product details page could look:

classic-item-avenue.jpg

War dieser Beitrag hilfreich?
29 von 86 fanden dies hilfreich
Styling the Classic Products Page