Artikel Slider Schriftgröße

Shopware 5 Themes & Design
1

Wie kann ich die Schriftgröße im Artikelslider ändern?

Die Produktbilder dafür größer - geht das?

2

Das geht leider nicht einfach im Backend. Dazu brauchst du nötige Kenntnisse im HTML / CSS (Less) Bereich. Ein Einstiegspunkt wäre die Entwickler-Dokumentation:

https://developers.shopware.com/designers-guide/

Ansonsten kannst du dies auch bei einer Shopware Partner-Agentur beauftragen, oder das Job Posting Forum nutzen.

Viele Grüße

3

Ok danke.

4 
/*
Product Slider
===================================================
######Shopware Product slider element
The Shopware product slider element displays a selection of articles the user chooses inside a slim slider element.

The product slider uses the product box component for displaying and sliding articles.

The slider has `is--vertical` and `is-horizontal` properties to set the layout of the element.

For initializing a product slider the outer `product-slider` wrapper has to have the attribute `data-product-slider="true"`.

```


    
    

    

        
            
        

    


```
*/

.product-slider {
    display: block;
	padding: 0;
    position: relative;
	top: 0; left: 0;
}

.product-slider--container {
    .clearfix();
	.user-select(none);
	.touch-callout(none);
	.tap-highlight-color(rgba(0, 0, 0, 0));
	display: block;
	width: 100%;
	height: 100%;
	font-size: 0; // Remove auto whitespace between inline elements
    position: relative;
	top: 0; left: 0;
	overflow: hidden;
	-webkit-overflow-scrolling: touch; // Enable momentum scrolling

	// Hide scrollbars in webkit browsers
	&::-webkit-scrollbar {
		width: 0;
		height: 0;
	}

	&.is--vertical {
		overflow-y: scroll;
		overflow-x: hidden;

		.product-slider--item {
			display: block;
            width: 100%;
		}
	}

	&.is--horizontal {
		overflow-y: hidden;
		overflow-x: scroll;
		white-space: nowrap;

		.product-slider--item {
            height: 100%;
			display: inline-block;
		}
	}

	.is--ie &,
	.is--firefox &,
	&.is--no-scroll {
		overflow-y: hidden;
		overflow-x: hidden;
	}
}

.product-slider--item {
    .unitize-padding(10, 10);
	.unitize(font-size, 12);
	.user-select(none);
	.touch-callout(none);
	.tap-highlight-color(rgba(0, 0, 0, 0));
    position: relative;
	top: 0;
    left: 0;
	overflow: hidden;
	text-align: center;
}

.product-slider--arrow {
    .unitize-width(30);
    .unitize-height(60);
	.unitize-margin(-30, 0, 0, 0);
    .unitize(line-height, 60);
    .unitize(font-size, 12);
    .border-radius();
    .user-select(none);
    .touch-callout(none);
    .tap-highlight-color(rgba(0, 0, 0, 0));
    background: rgba(255, 255, 255, 0.5);
    display: block;
    position: absolute;
    top: 50%;
    z-index: @zindex-product-slider;
    font-family: 'shopware';
    text-align: center;
    color: @btn-default-text-color;
    border: 1px solid @btn-default-border-color;
    cursor: pointer;

    &.arrow--prev {
        .border-radius-multi(0, 3px, 3px, 0);
        left: 0;

        &:before,
        &::before {
            content: "\e611";
        }
    }

    &.arrow--next {
        .border-radius-multi(3px, 0, 0, 3px);
        right: 0;

        &:before {
            content: "\e60f";
        }
    }

    &:hover {
        color: @btn-default-hover-text-color;
		border-color: @btn-default-hover-border-color;
        background: rgba(255, 255, 255, 0.8);
    }

	&.is--vertical {
		.unitize-width(60);
		.unitize-height(30);
		.unitize-margin(0, 0, 0, -30);
		.unitize(line-height, 30);
		.unitize(font-size, 6);
		left: 50%;
		top: auto;

		&.arrow--prev {
            .border-radius-multi(0, 0, 3px, 3px);
            top: 0;

			&:before,
			&::before {
				content: "\e610";
			}
		}

		&.arrow--next {
            bottom: 0;
            .border-radius-multi(3px, 3px, 0, 0);

			&:before {
				content: "\e612";
			}
		}
	}
}

@media screen and(min-width: @desktopViewportWidth) {

	.product-slider--container.is--horizontal,
	.product-slider--container.is--vertical {
		overflow: hidden;
	}
}

Soweit ich das jetzt herausgefunden habe, ändere ich das mit der product-slider.less

Habe diese angelegt und durch die all.less importiere ich sie.

So sieht sie jetzt aus.

Änderungen greifen leider nicht. Jemand eine Idee?