diff --git a/assets/component-video-with-text.css b/assets/component-video-with-text.css new file mode 100644 index 00000000000..3aae03e66c4 --- /dev/null +++ b/assets/component-video-with-text.css @@ -0,0 +1,374 @@ +.video-with-text .grid { + margin-bottom: 0; +} + +.video-with-text .grid__item { + position: relative; +} + +@media screen and (min-width: 750px) { + .video-with-text__grid--reverse { + flex-direction: row-reverse; + } +} + +.video-with-text__media { + min-height: 100%; + overflow: visible; +} + +.video-with-text__media--small { + height: 19.4rem; +} + +.video-with-text__media--medium { + height: 29.6rem; +} + +.video-with-text__media--large { + height: 43.5rem; +} + +@media screen and (min-width: 750px) { + .video-with-text__media--small { + height: 31.4rem; + } + + .video-with-text__media--medium { + height: 46rem; + } + + .video-with-text__media--large { + height: 69.5rem; + } +} + +.video-with-text__media--placeholder { + position: relative; + overflow: hidden; +} + +.video-with-text__media--placeholder:after { + content: ''; + position: absolute; + background: rgba(var(--color-foreground), 0.04); +} + +.video-with-text__media--placeholder.video-with-text__media--adapt { + height: 20rem; +} + +@media screen and (min-width: 750px) { + .video-with-text__media--placeholder.video-with-text__media--adapt { + height: 30rem; + } +} + +.video-with-text__media--placeholder>svg { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + width: 100%; + height: 100%; + fill: currentColor; +} + +.video-with-text__media--placeholder:is(.animate--ambient, .animate--zoom-in)>.svg-wrapper { + top: 0; + left: 0; + transform: translate(0); +} + +.video-with-text__content { + align-items: flex-start; + display: flex; + flex-direction: column; + height: 100%; + justify-content: center; + align-self: center; + padding: 4rem calc(4rem / var(--font-body-scale)) 5rem; + position: relative; + z-index: 1; +} + +.video-with-text .grid__item::after { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -1; +} + +.video-with-text:not(.video-with-text--overlap) .video-with-text__media-item:after { + border-radius: var(--media-radius); + box-shadow: var(--media-shadow-horizontal-offset) var(--media-shadow-vertical-offset) var(--media-shadow-blur-radius) rgba(var(--color-shadow), var(--media-shadow-opacity)); +} + +.video-with-text:not(.video-with-text--overlap) .video-with-text__text-item:after { + border-radius: var(--text-boxes-radius); + box-shadow: var(--text-boxes-shadow-horizontal-offset) var(--text-boxes-shadow-vertical-offset) var(--text-boxes-shadow-blur-radius) rgba(var(--color-shadow), var(--text-boxes-shadow-opacity)); +} + +.video-with-text .video-with-text__media-item>* { + border-radius: var(--media-radius); + overflow: hidden; + box-shadow: var(--media-shadow-horizontal-offset) var(--media-shadow-vertical-offset) var(--media-shadow-blur-radius) rgba(var(--color-shadow), var(--media-shadow-opacity)); +} + +.video-with-text .global-media-settings { + overflow: hidden !important; + border: none; +} + +.video-with-text .video-with-text__text-item>* { + border-radius: var(--text-boxes-radius); + overflow: hidden; + box-shadow: var(--text-boxes-shadow-horizontal-offset) var(--text-boxes-shadow-vertical-offset) var(--text-boxes-shadow-blur-radius) rgba(var(--color-shadow), var(--text-boxes-shadow-opacity)); +} + +.video-with-text:not(.video-with-text--overlap) .video-with-text__media-item>*, +.video-with-text:not(.video-with-text--overlap) .video-with-text__text-item>* { + box-shadow: none; +} + +@media screen and (max-width: 749px) { + + .video-with-text.collapse-corners:not(.video-with-text--overlap) .video-with-text__media-item:after, + .video-with-text.collapse-corners:not(.video-with-text--overlap) .grid__item .video-with-text__media, + .video-with-text.collapse-corners:not(.video-with-text--overlap) .video-with-text__media img, + .video-with-text.collapse-corners:not(.video-with-text--overlap) .video-with-text__media .placeholder-svg { + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + } + + .video-with-text.collapse-corners:not(.video-with-text--overlap) .video-with-text__text-item:after, + .video-with-text.collapse-corners:not(.video-with-text--overlap) .grid__item .video-with-text__content { + border-top-left-radius: 0; + border-top-right-radius: 0; + } + + .video-with-text.collapse-borders:not(.video-with-text--overlap) .video-with-text__content { + border-top: 0; + } +} + +.video-with-text__content--mobile-right>* { + align-self: flex-end; + text-align: right; +} + +.video-with-text__content--mobile-center>* { + align-self: center; + text-align: center; +} + +.video-with-text--overlap .video-with-text__content { + width: 90%; + margin: -3rem auto 0; +} + +@media screen and (min-width: 750px) { + .video-with-text__grid--reverse .video-with-text__content { + margin-left: auto; + } + + .video-with-text__content--bottom { + justify-content: flex-end; + align-self: flex-end; + } + + .video-with-text__content--top { + justify-content: flex-start; + align-self: flex-start; + } + + .video-with-text__content--desktop-right>* { + align-self: flex-end; + text-align: right; + } + + .video-with-text__content--desktop-left>* { + align-self: flex-start; + text-align: left; + } + + .video-with-text__content--desktop-center>* { + align-self: center; + text-align: center; + } + + .video-with-text--overlap .video-with-text__text-item { + display: flex; + padding: 3rem 0; + } + + .video-with-text--overlap .video-with-text__content { + height: auto; + width: calc(100% + 4rem); + min-width: calc(100% + 4rem); + margin-top: 0; + margin-left: -4rem; + } + + .video-with-text--overlap .video-with-text__grid--reverse .video-with-text__content { + margin-left: 0; + margin-right: -4rem; + } + + .video-with-text--overlap .video-with-text__grid--reverse .video-with-text__text-item { + justify-content: flex-end; + } + + .video-with-text--overlap .video-with-text__media-item--top { + align-self: flex-start; + } + + .video-with-text--overlap .video-with-text__media-item--middle { + align-self: center; + } + + .video-with-text--overlap .video-with-text__media-item--bottom { + align-self: flex-end; + } + + .video-with-text__media-item--small, + .video-with-text__media-item--large+.video-with-text__text-item { + flex-grow: 0; + } + + .video-with-text.collapse-corners:not(.video-with-text--overlap) .grid:not(.video-with-text__grid--reverse) .video-with-text__media-item:after, + .video-with-text.collapse-corners:not(.video-with-text--overlap) .grid:not(.video-with-text__grid--reverse) .video-with-text__media, + .video-with-text.collapse-corners:not(.video-with-text--overlap) .grid:not(.video-with-text__grid--reverse) .video-with-text__media img, + .video-with-text.collapse-corners:not(.video-with-text--overlap) .grid:not(.video-with-text__grid--reverse) .video-with-text__media .placeholder-svg, + .video-with-text.collapse-corners:not(.video-with-text--overlap) .video-with-text__grid--reverse .video-with-text__text-item:after, + .video-with-text.collapse-corners:not(.video-with-text--overlap) .video-with-text__grid--reverse .video-with-text__content, + .video-with-text.collapse-corners:not(.video-with-text--overlap) .video-with-text__grid--reverse .video-with-text__content:after { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .video-with-text.collapse-corners:not(.video-with-text--overlap) .grid:not(.video-with-text__grid--reverse) .video-with-text__text-item:after, + .video-with-text.collapse-corners:not(.video-with-text--overlap) .grid:not(.video-with-text__grid--reverse) .video-with-text__content, + .video-with-text.collapse-corners:not(.video-with-text--overlap) .grid:not(.video-with-text__grid--reverse) .video-with-text__content:after, + .video-with-text.collapse-corners:not(.video-with-text--overlap) .video-with-text__grid--reverse .video-with-text__media-item:after, + .video-with-text.collapse-corners:not(.video-with-text--overlap) .video-with-text__grid--reverse .video-with-text__media, + .video-with-text.collapse-corners:not(.video-with-text--overlap) .video-with-text__grid--reverse .video-with-text__media img, + .video-with-text.collapse-corners:not(.video-with-text--overlap) .video-with-text__grid--reverse .video-with-text__media .placeholder-svg { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .video-with-text.collapse-borders:not(.video-with-text--overlap) .grid:not(.video-with-text__grid--reverse) .video-with-text__content { + border-left: 0; + } + + .video-with-text.collapse-borders:not(.video-with-text--overlap) .video-with-text__grid--reverse .video-with-text__content { + border-right: 0; + } +} + +.video-with-text:not(.collapse-corners, .video-with-text--overlap) .video-with-text__media-item { + z-index: 2; +} + +/* Needed for gradient continuity with or without animation so that transparent PNG images come up as we would expect */ +.video-with-text.video-with-text--overlap .backround-transparent, +.video-with-text:not(.video-with-text--overlap) .background-transparent { + background: transparent; +} + +/* Needed for gradient continuity with or without animation, the transform scopes the gradient to its container which happens already when animation are turned on */ +.video-with-text .gradient { + transform: perspective(0); +} + +.video-with-text__content { + border-radius: var(--text-boxes-radius); + box-shadow: var(--text-boxes-shadow-horizontal-offset) var(--text-boxes-shadow-vertical-offset) var(--text-boxes-shadow-blur-radius) rgba(var(--color-shadow), var(--text-boxes-shadow-opacity)); + word-break: break-word; +} + +@media screen and (min-width: 990px) { + .video-with-text__content { + padding: 6rem 7rem 7rem; + } +} + +.video-with-text__content>*+* { + margin-top: 2rem; +} + +.video-with-text__content>.video-with-text__text:empty~a { + margin-top: 2rem; +} + +.video-with-text__content> :first-child:is(.video-with-text__heading), +.video-with-text__text--caption+.video-with-text__heading, +.video-with-text__text--caption:first-child { + margin-top: 0; +} + +.video-with-text__content :last-child:is(.video-with-text__heading), +.video-with-text__text--caption { + margin-bottom: 0; +} + +.video-with-text__content .button+.video-with-text__text { + margin-top: 2rem; +} + +.video-with-text__content .video-with-text__text+.button { + margin-top: 3rem; +} + +.video-with-text__heading { + margin-bottom: 0; +} + +.video-with-text__text p { + margin-top: 0; + margin-bottom: 1rem; +} + +@media screen and (max-width: 749px) { + .collapse-padding .video-with-text__grid .video-with-text__content { + padding-left: 0; + padding-right: 0; + } +} + +@media screen and (min-width: 750px) { + .collapse-padding .video-with-text__grid:not(.video-with-text__grid--reverse) .video-with-text__content:not(.video-with-text__content--desktop-center) { + padding-right: 0; + } + + .collapse-padding .video-with-text__grid--reverse .video-with-text__content:not(.video-with-text__content--desktop-center) { + padding-left: 0; + } +} + +/* check for flexbox gap in older Safari versions */ +@supports not (inset: 10px) { + .video-with-text .grid { + margin-left: 0; + } +} + +/* + Multirow + note: consider removing from this stylesheet if multirow-specific styles increase signficantly +*/ +.multirow__inner { + display: flex; + flex-direction: column; + row-gap: var(--grid-mobile-vertical-spacing); +} + +@media screen and (min-width: 750px) { + .multirow__inner { + row-gap: var(--grid-desktop-vertical-spacing); + } +} \ No newline at end of file diff --git a/locales/en.default.schema.json b/locales/en.default.schema.json index c85c09836e7..4622bfe5077 100644 --- a/locales/en.default.schema.json +++ b/locales/en.default.schema.json @@ -1513,6 +1513,180 @@ "name": "Image with text" } }, + "video-with-text": { + "name": "Video with text", + "settings": { + "video": { + "label": "Video" + }, + "enable_video_looping": { + "label": "Play video on loop" + }, + "description": { + "label": "Video alt text", + "info": "Describe the video for customers using screen readers. [Learn more](https://help.shopify.com/manual/online-store/themes/theme-structure/theme-features#video)" + }, + "cover_image": { + "label": "Cover image" + }, + "video_url": { + "label": "URL", + "info": "Use a YouTube or Vimeo URL" + }, + "height": { + "options__1": { + "label": "Adapt to video" + }, + "options__2": { + "label": "Small" + }, + "options__3": { + "label": "Medium" + }, + "options__4": { + "label": "Large" + }, + "label": "Video height" + }, + "desktop_video_width": { + "options__1": { + "label": "Small" + }, + "options__2": { + "label": "Medium" + }, + "options__3": { + "label": "Large" + }, + "label": "Desktop video width", + "info": "Video is automatically optimized for mobile." + }, + "layout": { + "options__1": { + "label": "Video first" + }, + "options__2": { + "label": "Video second" + }, + "label": "Desktop video placement", + "info": "Video first is the default mobile layout." + }, + "desktop_content_alignment": { + "options__1": { + "label": "Left" + }, + "options__2": { + "label": "Center" + }, + "options__3": { + "label": "Right" + }, + "label": "Desktop content alignment" + }, + "desktop_content_position": { + "options__1": { + "label": "Top" + }, + "options__2": { + "label": "Middle" + }, + "options__3": { + "label": "Bottom" + }, + "label": "Desktop content position" + }, + "mobile_content_alignment": { + "options__1": { + "label": "Left" + }, + "options__2": { + "label": "Center" + }, + "options__3": { + "label": "Right" + }, + "label": "Mobile content alignment" + } + }, + "blocks": { + "heading": { + "name": "Heading", + "settings": { + "heading": { + "label": "Heading", + "default": "Video with text" + } + } + }, + "caption": { + "name": "Caption", + "settings": { + "text": { + "label": "Text", + "default": "Add a tagline" + }, + "text_style": { + "label": "Text style", + "options__1": { + "label": "Subtitle" + }, + "options__2": { + "label": "Uppercase" + } + }, + "caption_size": { + "label": "Text size", + "options__1": { + "label": "Small" + }, + "options__2": { + "label": "Medium" + }, + "options__3": { + "label": "Large" + } + } + } + }, + "text": { + "name": "Text", + "settings": { + "text": { + "label": "Content", + "default": "
Pair text with an video to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.
" + }, + "text_style": { + "label": "Text style", + "options__1": { + "label": "Body" + }, + "options__2": { + "label": "Subtitle" + } + } + } + }, + "button": { + "name": "Button", + "settings": { + "button_label": { + "label": "Button label", + "info": "Leave the label blank to hide the button.", + "default": "Button label" + }, + "button_link": { + "label": "Button link" + }, + "outline_button": { + "label": "Use outline button style" + } + } + } + }, + "presets": { + "name": "Video with text" + } + }, "multirow": { "name": "Multirow", "settings": { diff --git a/sections/product-slider.liquid b/sections/product-slider.liquid new file mode 100644 index 00000000000..fbcac90681f --- /dev/null +++ b/sections/product-slider.liquid @@ -0,0 +1,223 @@ +{%- style -%} + .product-slider__ctr { + position: relative; + z-index: 12; + display: flex; + justify-content: end; + } + + .product-slider__arrow { + background: #fff; + border: none; + display: inline-flex; + width: 50px; + height: 50px; + justify-content: center; + align-items: center; + border: 1px solid rgba(0, 0, 0, 0.25); + border-radius: 50%; + top: 50%; + z-index: 12; + cursor: pointer; + outline: none !important; + } + .product-slider__arrow .icon-font { + display: inline-flex; + } + .product-slider__arrow.product-slider-prev { + transform: translateY(-50%); + margin-right: 15px; + } + .product-slider__arrow.product-slider-next { + transform: translateY(-50%); + } + .swiper { + width: 100%; + height: 100%; + padding-block: 2.5rem; + } + .swiper-slide { + font-size: 18px; + display: flex; + flex-direction: column; + border-radius: 8px; + border: 1px solid; + text-decoration: none; + } + .swiper-slide .product__title { + padding: 10px; + } + .swiper-slide p { + margin: 0; + padding: 0 10px 10px; + } + .swiper-slide img { + display: block; + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 8px 8px 0 0; + } + .swiper-slide:hover { + box-shadow: 0 3px 10px rgba(0,0,0,0.3); + } + .swiper-pagination { + position: relative; + top: 0; + bottom: 0; + margin-top: 50px; + } + .swiper-pagination .swiper-pagination-bullet { + width: 13px; + height: 10px; + display: inline-block; + opacity: 0.2; + margin: 0 5px; + border-radius: 20px; + transition: opacity 0.5s, background-color 0.5s, width 0.5s; + transition-delay: 0.5s, 0.5s, 0s; + } + .swiper-pagination .swiper-pagination-bullet-active { + opacity: 1; + width: 100px; + transition-delay: 0s; + } + @media screen and (max-width: 576px) { + .swiper-pagination .swiper-pagination-bullet-active { + width: 70px; + } + } +{%- endstyle -%} + +{{ block.settings.description }}
+ + {% endfor %} +