From b19972d60012604eba1d6dac4ece65f89a8e82fe Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Fri, 24 Mar 2023 07:46:41 -0400 Subject: [PATCH] [Product Cards] Add image masks (#2302) * Initial commit * Add more transforms, improve blob shape. * Add lots of blob shapes. * Fix filtering. * Remove image filters. * Remove filter code. * Fix circle shape. * Animate circle hovers. * Add additional hovers. * Animate all the blobs. * Fix standalone image with text blob. * Stop applying scale hover for cards when blobby. * Cleanup, add arch style. * Animate the arch. * Move svg renders out of theme.liquid. * Use all masks in all places. Tidy up. * Ensure svg is hidden from view. * Fix name of circle shape. * Add warning about shadow and border. * Fine-tune the blob shapes. * Tidy up the shapes used. * Respect prefers-reduced-motion * Fix typo. * Match circle animation to the image zoom. * Alphabetize options. * Remove border clipping for image banner shapes. * Round blob coordinates down to three decimal places.. * Remove Image with Text hovers. * Rewrite the helper text to be more positive. Co-authored-by: melissaperreault * Add settings for Search & Product Collection * Add settings for related products. * Remove label about border and shadow. * Remove unused settings schema entry. * Blobs > Blob * Remove borders from shapes. * Remove unnecessary specificity from card shape rules. * Use consistent card hover selectors. * Remove unnecessary rules. * Use a shared class approach for applying shapes. * Remove unnecessary rule. These styles aren't currently applied to the collage section at all. * Remove extra space. * Use a generic image_shape schema to avoid duplication. * Reinstate the grow-on-hover for blob product cards. * Fix background color for text-only cards. * Use "Round" instead of "Oval" and "Circle" * Fix Image with Text labels. * Try fixing the circle clipping. * Try fixing interactions with global container settings. * Refector last commit, fix tiny bugs. * Cleanup * Remove image with text effects from this PR. * Move mask-blobs into a CSS file. * Fix card--shape class conditional. * Fix the image_shape description. Co-authored-by: Lucas Lacerda <37168033+LucasLacerdaUX@users.noreply.github.com> * Use a unique id naming convention for the Arch shape svg. * Update 20 translation files * Get shape shadows working. * Add warning about borders not working. * Update 17 translation files * Update 3 translation files --------- Co-authored-by: melissaperreault Co-authored-by: Lucas Lacerda <37168033+LucasLacerdaUX@users.noreply.github.com> Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> --- assets/base.css | 40 ++++++++++ assets/component-card.css | 84 ++++++++++++++++++++ assets/mask-blobs.css | 8 ++ locales/cs.schema.json | 28 +++++++ locales/da.schema.json | 28 +++++++ locales/de.schema.json | 28 +++++++ locales/en.default.schema.json | 28 +++++++ locales/es.schema.json | 28 +++++++ locales/fi.schema.json | 28 +++++++ locales/fr.schema.json | 28 +++++++ locales/it.schema.json | 28 +++++++ locales/ja.schema.json | 28 +++++++ locales/ko.schema.json | 28 +++++++ locales/nb.schema.json | 28 +++++++ locales/nl.schema.json | 28 +++++++ locales/pl.schema.json | 28 +++++++ locales/pt-BR.schema.json | 28 +++++++ locales/pt-PT.schema.json | 28 +++++++ locales/sv.schema.json | 28 +++++++ locales/th.schema.json | 28 +++++++ locales/tr.schema.json | 28 +++++++ locales/vi.schema.json | 28 +++++++ locales/zh-CN.schema.json | 28 +++++++ locales/zh-TW.schema.json | 28 +++++++ sections/featured-collection.liquid | 50 ++++++++++++ sections/main-collection-product-grid.liquid | 49 ++++++++++++ sections/main-search.liquid | 49 ++++++++++++ sections/related-products.liquid | 49 ++++++++++++ snippets/card-product.liquid | 4 +- snippets/mask-arch.liquid | 5 ++ 30 files changed, 925 insertions(+), 1 deletion(-) create mode 100644 assets/mask-blobs.css create mode 100644 snippets/mask-arch.liquid diff --git a/assets/base.css b/assets/base.css index 597c0eb483c..5bad97c3b7f 100644 --- a/assets/base.css +++ b/assets/base.css @@ -3135,6 +3135,46 @@ details-disclosure > details { margin: -0.5rem 0 -0.5rem 0; } +/* Image mask global styles */ + +.shape--mask { + display: block; + height: 0; + width: 0; +} + +.shape--arch { + clip-path: url("#Shape-Arch"); +} + +.shape--blob { + clip-path: polygon(var(--shape--blob-1)); +} + +.shape--chevronleft { + clip-path: polygon(100% 0%, 85% 50%, 100% 100%, 15% 100%, 0% 50%, 15% 0%); +} + +.shape--chevronright { + clip-path: polygon(85% 0%, 100% 50%, 85% 100%, 0% 100%, 15% 50%, 0% 0%); +} + +.shape--circle { + clip-path: circle(closest-side); +} + +.shape--diamond { + clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); +} + +.shape--parallelogram { + clip-path: polygon(15% 0, 100% 0%, 85% 100%, 0% 100%); +} + +.shape--round { + clip-path: ellipse(45% 45% at 50% 50%); +} + /* Ambient animation */ @media (prefers-reduced-motion: no-preference) { diff --git a/assets/component-card.css b/assets/component-card.css index 1e837d7c97f..4c9157002da 100644 --- a/assets/component-card.css +++ b/assets/component-card.css @@ -362,3 +362,87 @@ .card-article-info { margin-top: 1rem; } + +/* Card Shapes */ + +.card--shape .card__content { + padding-top: 0; +} + +.card--shape.card--standard:not(.card--text) .card__inner { + border: 0; /* Border is not currently compatible with image shapes for standard cards. */ + background-color: transparent; + filter: drop-shadow(var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius) rgba(var(--color-shadow),var(--shadow-opacity))); +} + +.card--shape.card--standard:not(.card--text) .card__inner:after { + display: none; +} + +.grid__item:nth-child(2n) .shape--blob { + clip-path: polygon(var(--shape--blob-2)); +} + +.grid__item:nth-child(3n) .shape--blob { + clip-path: polygon(var(--shape--blob-3)); +} + +.grid__item:nth-child(4n) .shape--blob { + clip-path: polygon(var(--shape--blob-4)); +} + +.grid__item:nth-child(5n) .shape--blob { + clip-path: polygon(var(--shape--blob-5)); +} + +.grid__item:nth-child(7n) .shape--blob { + clip-path: polygon(var(--shape--blob-6)); +} + +.grid__item:nth-child(8n) .shape--blob { + clip-path: polygon(var(--shape--blob-1)); +} + +/* Card Shape Hover Rules */ + +@media (prefers-reduced-motion: no-preference) { + .product-card-wrapper .shape--round { + transition: clip-path var(--duration-long) ease; + } + + .product-card-wrapper:hover .shape--round { + clip-path: ellipse(47% 47% at 50% 50%); + } + + .product-card-wrapper .shape--blob { + transition: clip-path var(--duration-long) ease-in-out; + } + + .product-card-wrapper:hover .shape--blob { + clip-path: polygon(var(--shape--blob-5)); + } + + .grid__item:nth-child(2n) .product-card-wrapper:hover .shape--blob { + clip-path: polygon(var(--shape--blob-6)); + } + + .grid__item:nth-child(3n) .product-card-wrapper:hover .shape--blob { + clip-path: polygon(var(--shape--blob-1)); + } + + .grid__item:nth-child(4n) .product-card-wrapper:hover .shape--blob { + clip-path: polygon(var(--shape--blob-2)); + } + + .grid__item:nth-child(5n) .product-card-wrapper:hover .shape--blob { + clip-path: polygon(var(--shape--blob-3)); + } + + .grid__item:nth-child(7n) .product-card-wrapper:hover .shape--blob { + clip-path: polygon(var(--shape--blob-4)); + } + + .grid__item:nth-child(8n) .product-card-wrapper:hover .shape--blob { + clip-path: polygon(var(--shape--blob-5)); + } +} diff --git a/assets/mask-blobs.css b/assets/mask-blobs.css new file mode 100644 index 00000000000..a1f576523c5 --- /dev/null +++ b/assets/mask-blobs.css @@ -0,0 +1,8 @@ +:root { + --shape--blob-1: 97.686% 33.617%, 98.392% 36.152%, 98.960% 38.721%, 99.398% 41.315%, 99.712% 43.928%, 99.909% 46.552%, 99.995% 49.182%, 99.974% 51.813%, 99.852% 54.441%, 99.630% 57.063%, 99.311% 59.675%, 98.897% 62.274%, 98.389% 64.856%, 97.787% 67.417%, 97.091% 69.955%, 96.299% 72.464%, 95.411% 74.941%, 94.422% 77.379%, 93.329% 79.773%, 92.127% 82.114%, 90.812% 84.393%, 89.377% 86.598%, 87.813% 88.714%, 86.114% 90.723%, 84.272% 92.600%, 82.279% 94.317%, 80.125% 95.828%, 77.832% 97.117%, 75.423% 98.172%, 72.920% 98.983%, 70.352% 99.552%, 67.743% 99.887%, 65.115% 100.000%, 62.485% 99.907%, 59.869% 99.627%, 57.277% 99.176%, 54.717% 98.571%, 52.193% 97.825%, 49.711% 96.954%, 47.271% 95.967%, 44.877% 94.876%, 42.529% 93.689%, 40.227% 92.414%, 37.972% 91.058%, 35.764% 89.626%, 33.604% 88.123%, 31.491% 86.555%, 29.426% 84.924%, 27.410% 83.234%, 25.441% 81.487%, 23.522% 79.687%, 21.651% 77.836%, 19.832% 75.935%, 18.064% 73.986%, 16.350% 71.990%, 14.691% 69.947%, 13.090% 67.859%, 11.549% 65.726%, 10.073% 63.547%, 8.665% 61.324%, 7.331% 59.056%, 6.076% 56.744%, 4.907% 54.386%, 3.832% 51.984%, 2.861% 49.539%, 2.006% 47.050%, 1.280% 44.521%, 0.699% 41.955%, 0.280% 39.358%, 0.044% 36.738%, 0.014% 34.107%, 0.212% 31.484%, 0.660% 28.892%, 1.371% 26.359%, 2.338% 23.913%, 3.540% 21.574%, 4.951% 19.354%, 6.546% 17.261%, 8.300% 15.300%, 10.191% 13.471%, 12.199% 11.771%, 14.307% 10.197%, 16.502% 8.746%, 18.771% 7.414%, 21.104% 6.198%, 23.493% 5.094%, 25.930% 4.101%, 28.408% 3.217%, 30.922% 2.439%, 33.466% 1.768%, 36.036% 1.203%, 38.627% 0.744%, 41.235% 0.394%, 43.855% 0.152%, 46.483% 0.023%, 49.114% 0.008%, 51.744% 0.103%, 54.366% 0.315%, 56.977% 0.648%, 59.569% 1.100%, 62.137% 1.672%, 64.676% 2.363%, 67.179% 3.173%, 69.642% 4.101%, 72.056% 5.147%, 74.416% 6.310%, 76.715% 7.590%, 78.946% 8.985%, 81.102% 10.494%, 83.174% 12.115%, 85.156% 13.846%, 87.039% 15.684%, 88.815% 17.625%, 90.477% 19.664%, 92.017% 21.797%, 93.429% 24.017%, 94.707% 26.318%, 95.844% 28.690%, 96.838% 31.126%, 97.686% 33.617%; + --shape--blob-2: 85.349% 11.712%, 87.382% 13.587%, 89.228% 15.647%, 90.886% 17.862%, 92.359% 20.204%, 93.657% 22.647%, 94.795% 25.169%, 95.786% 27.752%, 96.645% 30.382%, 97.387% 33.048%, 98.025% 35.740%, 98.564% 38.454%, 99.007% 41.186%, 99.358% 43.931%, 99.622% 46.685%, 99.808% 49.446%, 99.926% 52.210%, 99.986% 54.977%, 99.999% 57.744%, 99.975% 60.511%, 99.923% 63.278%, 99.821% 66.043%, 99.671% 68.806%, 99.453% 71.565%, 99.145% 74.314%, 98.724% 77.049%, 98.164% 79.759%, 97.433% 82.427%, 96.495% 85.030%, 95.311% 87.529%, 93.841% 89.872%, 92.062% 91.988%, 89.972% 93.796%, 87.635% 95.273%, 85.135% 96.456%, 82.532% 97.393%, 79.864% 98.127%, 77.156% 98.695%, 74.424% 99.129%, 71.676% 99.452%, 68.918% 99.685%, 66.156% 99.844%, 63.390% 99.942%, 60.624% 99.990%, 57.856% 99.999%, 55.089% 99.978%, 52.323% 99.929%, 49.557% 99.847%, 46.792% 99.723%, 44.031% 99.549%, 41.273% 99.317%, 38.522% 99.017%, 35.781% 98.639%, 33.054% 98.170%, 30.347% 97.599%, 27.667% 96.911%, 25.024% 96.091%, 22.432% 95.123%, 19.907% 93.994%, 17.466% 92.690%, 15.126% 91.216%, 12.902% 89.569%, 10.808% 87.761%, 8.854% 85.803%, 7.053% 83.703%, 5.418% 81.471%, 3.962% 79.119%, 2.702% 76.656%, 1.656% 74.095%, 0.846% 71.450%, 0.294% 68.740%, 0.024% 65.987%, 0.050% 63.221%, 0.343% 60.471%, 0.858% 57.752%, 1.548% 55.073%, 2.370% 52.431%, 3.283% 49.819%, 4.253% 47.227%, 5.249% 44.646%, 6.244% 42.063%, 7.211% 39.471%, 8.124% 36.858%, 8.958% 34.220%, 9.711% 31.558%, 10.409% 28.880%, 11.083% 26.196%, 11.760% 23.513%, 12.474% 20.839%, 13.259% 18.186%, 14.156% 15.569%, 15.214% 13.012%, 16.485% 10.556%, 18.028% 8.261%, 19.883% 6.211%, 22.041% 4.484%, 24.440% 3.110%, 26.998% 2.057%, 29.651% 1.275%, 32.360% 0.714%, 35.101% 0.337%, 37.859% 0.110%, 40.624% 0.009%, 43.391% 0.016%, 46.156% 0.113%, 48.918% 0.289%, 51.674% 0.533%, 54.425% 0.837%, 57.166% 1.215%, 59.898% 1.654%, 62.618% 2.163%, 65.322% 2.750%, 68.006% 3.424%, 70.662% 4.197%, 73.284% 5.081%, 75.860% 6.091%, 78.376% 7.242%, 80.813% 8.551%, 83.148% 10.036%, 85.349% 11.712%; + --shape--blob-3: 78.621% 12.736%, 80.746% 14.354%, 82.710% 16.163%, 84.520% 18.127%, 86.187% 20.215%, 87.721% 22.401%, 89.134% 24.668%, 90.437% 27.000%, 91.639% 29.386%, 92.748% 31.816%, 93.770% 34.284%, 94.714% 36.783%, 95.583% 39.309%, 96.382% 41.858%, 97.112% 44.428%, 97.770% 47.017%, 98.353% 49.624%, 98.858% 52.248%, 99.279% 54.886%, 99.611% 57.536%, 99.847% 60.197%, 99.977% 62.865%, 99.991% 65.537%, 99.879% 68.205%, 99.626% 70.865%, 99.217% 73.504%, 98.635% 76.111%, 97.863% 78.668%, 96.879% 81.151%, 95.683% 83.538%, 94.291% 85.818%, 92.717% 87.976%, 90.974% 89.999%, 89.075% 91.878%, 87.033% 93.599%, 84.860% 95.151%, 82.567% 96.520%, 80.167% 97.692%, 77.673% 98.647%, 75.100% 99.364%, 72.469% 99.819%, 69.805% 99.997%, 67.136% 99.893%, 64.491% 99.529%, 61.884% 98.946%, 59.324% 98.186%, 56.807% 97.290%, 54.329% 96.293%, 51.880% 95.225%, 49.451% 94.114%, 47.030% 92.984%, 44.607% 91.858%, 42.173% 90.757%, 39.719% 89.701%, 37.245% 88.695%, 34.756% 87.723%, 32.263% 86.763%, 29.775% 85.790%, 27.301% 84.782%, 24.852% 83.715%, 22.441% 82.564%, 20.085% 81.306%, 17.802% 79.919%, 15.615% 78.386%, 13.549% 76.694%, 11.627% 74.839%, 9.875% 72.824%, 8.296% 70.669%, 6.878% 68.406%, 5.612% 66.054%, 4.489% 63.630%, 3.502% 61.148%, 2.645% 58.618%, 1.914% 56.049%, 1.304% 53.448%, 0.812% 50.823%, 0.437% 48.178%, 0.177% 45.519%, 0.033% 42.852%, 0.004% 40.181%, 0.091% 37.511%, 0.299% 34.847%, 0.634% 32.197%, 1.088% 29.565%, 1.657% 26.955%, 2.344% 24.374%, 3.150% 21.827%, 4.078% 19.322%, 5.133% 16.868%, 6.321% 14.475%, 7.651% 12.159%, 9.134% 9.937%, 10.780% 7.835%, 12.604% 5.883%, 14.615% 4.127%, 16.820% 2.622%, 19.214% 1.442%, 21.758% 0.633%, 24.387% 0.168%, 27.052% 0.002%, 29.721% 0.082%, 32.378% 0.357%, 35.016% 0.781%, 37.632% 1.318%, 40.231% 1.936%, 42.817% 2.607%, 45.396% 3.304%, 47.975% 4.002%, 50.561% 4.673%, 53.163% 5.278%, 55.778% 5.822%, 58.401% 6.329%, 61.027% 6.821%, 63.650% 7.326%, 66.264% 7.878%, 68.858% 8.515%, 71.418% 9.281%, 73.919% 10.217%, 76.332% 11.362%, 78.621% 12.736%; + --shape--blob-4: 80.628% 3.397%, 82.907% 4.713%, 85.051% 6.239%, 87.055% 7.945%, 88.916% 9.806%, 90.636% 11.799%, 92.213% 13.907%, 93.650% 16.112%, 94.946% 18.403%, 96.102% 20.768%, 97.115% 23.198%, 97.983% 25.683%, 98.702% 28.215%, 99.256% 30.788%, 99.652% 33.390%, 99.898% 36.011%, 99.998% 38.642%, 99.953% 41.274%, 99.765% 43.899%, 99.436% 46.511%, 98.966% 49.101%, 98.355% 51.662%, 97.602% 54.184%, 96.703% 56.658%, 95.658% 59.074%, 94.459% 61.417%, 93.104% 63.674%, 91.610% 65.841%, 89.994% 67.919%, 88.274% 69.912%, 86.469% 71.828%, 84.595% 73.677%, 82.668% 75.471%, 80.701% 77.221%, 78.709% 78.941%, 76.701% 80.644%, 74.690% 82.343%, 72.683% 84.048%, 70.680% 85.756%, 68.669% 87.455%, 66.637% 89.129%, 64.575% 90.765%, 62.468% 92.344%, 60.307% 93.847%, 58.080% 95.251%, 55.778% 96.528%, 53.396% 97.648%, 50.934% 98.576%, 48.398% 99.281%, 45.809% 99.751%, 43.186% 99.976%, 40.555% 99.967%, 37.933% 99.738%, 35.337% 99.303%, 32.781% 98.675%, 30.276% 97.865%, 27.834% 96.884%, 25.462% 95.741%, 23.171% 94.446%, 20.969% 93.004%, 18.866% 91.420%, 16.874% 89.700%, 14.991% 87.861%, 13.220% 85.913%, 11.560% 83.870%, 10.011% 81.742%, 8.574% 79.537%, 7.246% 77.263%, 6.029% 74.929%, 4.921% 72.541%, 3.923% 70.106%, 3.034% 67.628%, 2.256% 65.113%, 1.587% 62.566%, 1.033% 59.993%, 0.595% 57.397%, 0.275% 54.784%, 0.076% 52.159%, 0.001% 49.528%, 0.052% 46.896%, 0.236% 44.270%, 0.556% 41.657%, 1.019% 39.066%, 1.631% 36.506%, 2.398% 33.988%, 3.328% 31.525%, 4.412% 29.127%, 5.654% 26.806%, 7.044% 24.570%, 8.571% 22.426%, 10.224% 20.378%, 11.993% 18.429%, 13.868% 16.581%, 15.840% 14.837%, 17.900% 13.198%, 20.041% 11.666%, 22.255% 10.243%, 24.540% 8.937%, 26.891% 7.752%, 29.296% 6.680%, 31.746% 5.718%, 34.235% 4.860%, 36.755% 4.099%, 39.300% 3.427%, 41.865% 2.833%, 44.444% 2.306%, 47.035% 1.836%, 49.633% 1.412%, 52.237% 1.025%, 54.847% 0.677%, 57.463% 0.383%, 60.086% 0.162%, 62.715% 0.029%, 65.348% 0.006%, 67.978% 0.112%, 70.597% 0.372%, 73.193% 0.808%, 75.747% 1.446%, 78.234% 2.304%, 80.628% 3.397%; + --shape--blob-5: 80.452% 2.197%, 82.761% 3.507%, 84.885% 5.101%, 86.818% 6.922%, 88.568% 8.920%, 90.147% 11.056%, 91.569% 13.300%, 92.848% 15.628%, 93.997% 18.023%, 95.026% 20.472%, 95.944% 22.966%, 96.759% 25.494%, 97.476% 28.053%, 98.100% 30.635%, 98.634% 33.238%, 99.082% 35.856%, 99.444% 38.489%, 99.714% 41.132%, 99.893% 43.782%, 99.986% 46.438%, 99.992% 49.094%, 99.909% 51.750%, 99.736% 54.401%, 99.472% 57.045%, 99.113% 59.677%, 98.656% 62.294%, 98.098% 64.892%, 97.435% 67.465%, 96.663% 70.007%, 95.776% 72.511%, 94.769% 74.969%, 93.636% 77.373%, 92.372% 79.709%, 90.970% 81.966%, 89.423% 84.125%, 87.728% 86.170%, 85.898% 88.095%, 83.943% 89.894%, 81.873% 91.560%, 79.701% 93.088%, 77.435% 94.475%, 75.087% 95.718%, 72.666% 96.811%, 70.182% 97.753%, 67.645% 98.540%, 65.063% 99.165%, 62.446% 99.622%, 59.804% 99.904%, 57.150% 100.000%, 54.495% 99.900%, 51.855% 99.607%, 49.242% 99.128%, 46.668% 98.471%, 44.142% 97.651%, 41.669% 96.680%, 39.254% 95.572%, 36.900% 94.342%, 34.605% 93.002%, 32.370% 91.566%, 30.193% 90.044%, 28.067% 88.450%, 25.999% 86.782%, 23.993% 85.040%, 22.054% 83.224%, 20.182% 81.338%, 18.380% 79.387%, 16.644% 77.375%, 14.972% 75.310%, 13.360% 73.198%, 11.802% 71.046%, 10.288% 68.863%, 8.816% 66.651%, 7.404% 64.400%, 6.063% 62.107%, 4.809% 59.765%, 3.656% 57.371%, 2.624% 54.923%, 1.730% 52.421%, 0.998% 49.868%, 0.451% 47.268%, 0.112% 44.634%, 0.000% 41.980%, 0.117% 39.327%, 0.446% 36.691%, 0.976% 34.088%, 1.696% 31.531%, 2.600% 29.033%, 3.682% 26.607%, 4.941% 24.268%, 6.375% 22.032%, 7.986% 19.921%, 9.775% 17.957%, 11.743% 16.173%, 13.876% 14.591%, 16.156% 13.229%, 18.548% 12.073%, 21.017% 11.094%, 23.538% 10.255%, 26.091% 9.521%, 28.664% 8.858%, 31.248% 8.240%, 33.837% 7.642%, 36.426% 7.045%, 39.011% 6.431%, 41.589% 5.787%, 44.157% 5.109%, 46.720% 4.407%, 49.281% 3.701%, 51.846% 3.006%, 54.418% 2.339%, 57.001% 1.717%, 59.598% 1.157%, 62.212% 0.680%, 64.842% 0.309%, 67.488% 0.072%, 70.144% 0.002%, 72.797% 0.137%, 75.424% 0.521%, 77.992% 1.197%, 80.452% 2.197%; + --shape--blob-6: 71.914% 1.829%, 74.287% 2.884%, 76.559% 4.144%, 78.723% 5.581%, 80.777% 7.171%, 82.721% 8.894%, 84.557% 10.733%, 86.284% 12.673%, 87.906% 14.703%, 89.423% 16.812%, 90.838% 18.991%, 92.151% 21.233%, 93.364% 23.531%, 94.477% 25.878%, 95.492% 28.270%, 96.406% 30.702%, 97.222% 33.169%, 97.938% 35.666%, 98.555% 38.190%, 99.069% 40.737%, 99.476% 43.303%, 99.771% 45.884%, 99.948% 48.476%, 99.999% 51.073%, 99.914% 53.670%, 99.680% 56.257%, 99.287% 58.825%, 98.717% 61.360%, 97.957% 63.844%, 96.984% 66.252%, 95.807% 68.567%, 94.448% 70.781%, 92.930% 72.889%, 91.273% 74.890%, 89.499% 76.788%, 87.625% 78.587%, 85.668% 80.296%, 83.642% 81.923%, 81.560% 83.477%, 79.431% 84.967%, 77.266% 86.402%, 75.071% 87.793%, 72.854% 89.148%, 70.624% 90.481%, 68.375% 91.783%, 66.103% 93.044%, 63.803% 94.253%, 61.470% 95.396%, 59.100% 96.459%, 56.688% 97.425%, 54.232% 98.272%, 51.732% 98.978%, 49.190% 99.518%, 46.616% 99.866%, 44.022% 99.999%, 41.427% 99.904%, 38.848% 99.589%, 36.304% 99.067%, 33.806% 98.353%, 31.365% 97.465%, 28.988% 96.417%, 26.680% 95.223%, 24.446% 93.897%, 22.289% 92.450%, 20.209% 90.892%, 18.210% 89.233%, 16.286% 87.487%, 14.442% 85.656%, 12.685% 83.743%, 11.018% 81.750%, 9.446% 79.682%, 7.974% 77.541%, 6.608% 75.331%, 5.354% 73.056%, 4.218% 70.719%, 3.208% 68.325%, 2.331% 65.880%, 1.594% 63.389%, 0.996% 60.861%, 0.535% 58.304%, 0.216% 55.726%, 0.039% 53.134%, 0.005% 50.536%, 0.119% 47.941%, 0.385% 45.356%, 0.814% 42.794%, 1.416% 40.267%, 2.207% 37.793%, 3.204% 35.394%, 4.427% 33.103%, 5.887% 30.956%, 7.572% 28.979%, 9.454% 27.190%, 11.490% 25.576%, 13.637% 24.114%, 15.862% 22.773%, 18.137% 21.517%, 20.438% 20.310%, 22.744% 19.113%, 25.034% 17.885%, 27.285% 16.589%, 29.485% 15.207%, 31.628% 13.738%, 33.730% 12.210%, 35.812% 10.656%, 37.898% 9.106%, 40.011% 7.595%, 42.174% 6.156%, 44.403% 4.820%, 46.707% 3.621%, 49.090% 2.587%, 51.535% 1.709%, 54.034% 0.998%, 56.576% 0.466%, 59.152% 0.129%, 61.746% 0.001%, 64.342% 0.097%, 66.918% 0.430%, 69.450% 1.007%, 71.914% 1.829%; +} diff --git a/locales/cs.schema.json b/locales/cs.schema.json index 62468ac5b46..073203a3d66 100644 --- a/locales/cs.schema.json +++ b/locales/cs.schema.json @@ -434,6 +434,34 @@ "label": "Extra velká" } }, + "image_shape": { + "options__1": { + "label": "Výchozí" + }, + "options__2": { + "label": "Oblouk" + }, + "options__3": { + "label": "Blob" + }, + "options__4": { + "label": "Dvojitá šipka vlevo" + }, + "options__5": { + "label": "Dvojitá šipka vpravo" + }, + "options__6": { + "label": "Kosočtverec" + }, + "options__7": { + "label": "Rovnoběžník" + }, + "options__8": { + "label": "Kruh" + }, + "label": "Tvar obrázku", + "info": "Karty ve standardním stylu nemají ohraničení v případě, že je tvar obrázku aktivní." + }, "animation": { "content": "Animace", "image_behavior": { diff --git a/locales/da.schema.json b/locales/da.schema.json index 189b6e9d052..4f776f833f3 100644 --- a/locales/da.schema.json +++ b/locales/da.schema.json @@ -434,6 +434,34 @@ "label": "Ekstra stor" } }, + "image_shape": { + "options__1": { + "label": "Standard" + }, + "options__2": { + "label": "Bue" + }, + "options__3": { + "label": "Blob" + }, + "options__4": { + "label": "Venstre chevron" + }, + "options__5": { + "label": "Højre chevron" + }, + "options__6": { + "label": "Diamant" + }, + "options__7": { + "label": "Parallelogram" + }, + "options__8": { + "label": "Rund" + }, + "label": "Billedform", + "info": "Kort i standardstil har ingen kanter, når en billedform er aktiv." + }, "animation": { "content": "Animationer", "image_behavior": { diff --git a/locales/de.schema.json b/locales/de.schema.json index d3a23173d13..b2ba0e696a9 100644 --- a/locales/de.schema.json +++ b/locales/de.schema.json @@ -434,6 +434,34 @@ "label": "Extra groß" } }, + "image_shape": { + "options__1": { + "label": "Standard" + }, + "options__2": { + "label": "Bogen" + }, + "options__3": { + "label": "Klecks" + }, + "options__4": { + "label": "Chevron nach links" + }, + "options__5": { + "label": "Chevron nach rechts" + }, + "options__6": { + "label": "Diamant" + }, + "options__7": { + "label": "Parallelogramm" + }, + "options__8": { + "label": "Rund" + }, + "label": "Bildform", + "info": "Karten mit Standarddesign haben keinen Rahmen, wenn eine Bildform aktiv ist." + }, "animation": { "content": "Animationen", "image_behavior": { diff --git a/locales/en.default.schema.json b/locales/en.default.schema.json index af7b1c56d54..3c994924937 100644 --- a/locales/en.default.schema.json +++ b/locales/en.default.schema.json @@ -445,6 +445,34 @@ "options__4": { "label": "Extra large" } + }, + "image_shape": { + "options__1": { + "label": "Default" + }, + "options__2": { + "label": "Arch" + }, + "options__3": { + "label": "Blob" + }, + "options__4": { + "label": "Chevron left" + }, + "options__5": { + "label": "Chevron right" + }, + "options__6": { + "label": "Diamond" + }, + "options__7": { + "label": "Parallelogram" + }, + "options__8": { + "label": "Round" + }, + "label": "Image shape", + "info": "Standard-styled cards have no borders when an image shape is active." } }, "announcement-bar": { diff --git a/locales/es.schema.json b/locales/es.schema.json index cb8394568b3..d24636e67ef 100644 --- a/locales/es.schema.json +++ b/locales/es.schema.json @@ -434,6 +434,34 @@ "label": "Extra grande" } }, + "image_shape": { + "options__1": { + "label": "Predeterminado" + }, + "options__2": { + "label": "Arco" + }, + "options__3": { + "label": "Gota" + }, + "options__4": { + "label": "Comillas angulares izquierda" + }, + "options__5": { + "label": "Comillas angulares derecha" + }, + "options__6": { + "label": "Diamante" + }, + "options__7": { + "label": "Paralelogramo" + }, + "options__8": { + "label": "Redonda" + }, + "label": "Forma de la imagen", + "info": "Las tarjetas de estilo estándar no tienen bordes cuando la forma de una imagen está activa." + }, "animation": { "content": "Animaciones", "image_behavior": { diff --git a/locales/fi.schema.json b/locales/fi.schema.json index 4c8659d9596..2233ff748f3 100644 --- a/locales/fi.schema.json +++ b/locales/fi.schema.json @@ -434,6 +434,34 @@ "label": "Erittäin suuri" } }, + "image_shape": { + "options__1": { + "label": "Oletus" + }, + "options__2": { + "label": "Kaari" + }, + "options__3": { + "label": "Möykky" + }, + "options__4": { + "label": "V-merkki vasemmalle" + }, + "options__5": { + "label": "V-merkki oikealle" + }, + "options__6": { + "label": "Timantti" + }, + "options__7": { + "label": "Suunnikas" + }, + "options__8": { + "label": "Pyörylä" + }, + "label": "Kuvan muoto", + "info": "Vakiomallisissa korteissa ei ole reunuksia, kun kuvan muoto on aktiivinen." + }, "animation": { "content": "Animaatiot", "image_behavior": { diff --git a/locales/fr.schema.json b/locales/fr.schema.json index 9e920f18233..e9f08759fc4 100644 --- a/locales/fr.schema.json +++ b/locales/fr.schema.json @@ -434,6 +434,34 @@ "label": "Très grand" } }, + "image_shape": { + "options__1": { + "label": "Forme par défaut" + }, + "options__2": { + "label": "Arche" + }, + "options__3": { + "label": "Indistincte" + }, + "options__4": { + "label": "Chevron gauche" + }, + "options__5": { + "label": "Chevron droite" + }, + "options__6": { + "label": "Losange" + }, + "options__7": { + "label": "Parallélogramme" + }, + "options__8": { + "label": "Cercle" + }, + "label": "Forme d’image", + "info": "Les cartes de style standard n’ont pas de bordures lorsqu’une forme d’image est active." + }, "animation": { "content": "Animations", "image_behavior": { diff --git a/locales/it.schema.json b/locales/it.schema.json index 10d8f4220d3..dc8344307ee 100644 --- a/locales/it.schema.json +++ b/locales/it.schema.json @@ -434,6 +434,34 @@ "label": "Extra large" } }, + "image_shape": { + "options__1": { + "label": "Predefinito" + }, + "options__2": { + "label": "Arco" + }, + "options__3": { + "label": "Goccia" + }, + "options__4": { + "label": "Parentesi ad angolo a sinistra" + }, + "options__5": { + "label": "Parentesi ad angolo a destra" + }, + "options__6": { + "label": "Diamante" + }, + "options__7": { + "label": "Parallelogramma" + }, + "options__8": { + "label": "Cerchio" + }, + "label": "Forma immagine", + "info": "Le schede con stile Standard e una Forma immagine selezionata non hanno bordi." + }, "animation": { "content": "Animazioni", "image_behavior": { diff --git a/locales/ja.schema.json b/locales/ja.schema.json index 37bfbe02161..5921278b5d8 100644 --- a/locales/ja.schema.json +++ b/locales/ja.schema.json @@ -434,6 +434,34 @@ "label": "特大" } }, + "image_shape": { + "options__1": { + "label": "デフォルト" + }, + "options__2": { + "label": "アーチ" + }, + "options__3": { + "label": "塊" + }, + "options__4": { + "label": "左向き山形印" + }, + "options__5": { + "label": "右向き山形印" + }, + "options__6": { + "label": "ダイヤモンド" + }, + "options__7": { + "label": "平行四辺形" + }, + "options__8": { + "label": "丸" + }, + "label": "画像の形状", + "info": "標準スタイルのカードには、画像の形状が有効な場合、ボーダーがありません。" + }, "animation": { "content": "アニメーション", "image_behavior": { diff --git a/locales/ko.schema.json b/locales/ko.schema.json index 50020fe7abe..a6c242a93e5 100644 --- a/locales/ko.schema.json +++ b/locales/ko.schema.json @@ -434,6 +434,34 @@ "label": "특대" } }, + "image_shape": { + "options__1": { + "label": "기본" + }, + "options__2": { + "label": "아치" + }, + "options__3": { + "label": "블랍" + }, + "options__4": { + "label": "왼쪽 방향 표시" + }, + "options__5": { + "label": "오른쪽 방향 표시" + }, + "options__6": { + "label": "다이아몬드" + }, + "options__7": { + "label": "평행사변형" + }, + "options__8": { + "label": "원형" + }, + "label": "이미지 모양", + "info": "이미지 모양이 활성화되어 있으면 스타일이 표준인 카드에는 테두리가 없습니다." + }, "animation": { "content": "애니메이션", "image_behavior": { diff --git a/locales/nb.schema.json b/locales/nb.schema.json index 375ab437ef5..fae71379313 100644 --- a/locales/nb.schema.json +++ b/locales/nb.schema.json @@ -434,6 +434,34 @@ "label": "Ekstra stort" } }, + "image_shape": { + "options__1": { + "label": "Standard" + }, + "options__2": { + "label": "Bue" + }, + "options__3": { + "label": "Blob" + }, + "options__4": { + "label": "Større enn" + }, + "options__5": { + "label": "Mindre enn" + }, + "options__6": { + "label": "Diamant" + }, + "options__7": { + "label": "Parallellogram" + }, + "options__8": { + "label": "Rund" + }, + "label": "Bildeform", + "info": "Standardiserte kort har ingen linjer når bildets form er aktivt." + }, "animation": { "content": "Animasjoner", "image_behavior": { diff --git a/locales/nl.schema.json b/locales/nl.schema.json index 4d7526a91c6..c2c04c99000 100644 --- a/locales/nl.schema.json +++ b/locales/nl.schema.json @@ -434,6 +434,34 @@ "label": "Extra groot" } }, + "image_shape": { + "options__1": { + "label": "Standaard" + }, + "options__2": { + "label": "Boog" + }, + "options__3": { + "label": "Amorf" + }, + "options__4": { + "label": "Chevronpijl naar links" + }, + "options__5": { + "label": "Chevronpijl naar rechts" + }, + "options__6": { + "label": "Ruit" + }, + "options__7": { + "label": "Parallellogram" + }, + "options__8": { + "label": "Rond" + }, + "label": "Vorm afbeelding", + "info": "Kaarten in standaardstijl hebben geen randen wanneer een afbeeldingsvorm actief is." + }, "animation": { "content": "Animaties", "image_behavior": { diff --git a/locales/pl.schema.json b/locales/pl.schema.json index d836bc8a3d3..ac4dddd459a 100644 --- a/locales/pl.schema.json +++ b/locales/pl.schema.json @@ -434,6 +434,34 @@ "label": "Bardzo duży" } }, + "image_shape": { + "options__1": { + "label": "Domyślny" + }, + "options__2": { + "label": "Łuk" + }, + "options__3": { + "label": "Kropla" + }, + "options__4": { + "label": "Pagon skierowany w lewo" + }, + "options__5": { + "label": "Pagon skierowany w prawo" + }, + "options__6": { + "label": "Romb" + }, + "options__7": { + "label": "Równoległobok" + }, + "options__8": { + "label": "Okrągły" + }, + "label": "Kształt obrazu", + "info": "Karty w stylu standardowym nie mają obramowania, gdy aktywny jest kształt obrazu." + }, "animation": { "content": "Animacje", "image_behavior": { diff --git a/locales/pt-BR.schema.json b/locales/pt-BR.schema.json index 3b323faaaad..69651a0ff53 100644 --- a/locales/pt-BR.schema.json +++ b/locales/pt-BR.schema.json @@ -434,6 +434,34 @@ "label": "Extra grande" } }, + "image_shape": { + "options__1": { + "label": "Padrão" + }, + "options__2": { + "label": "Arco" + }, + "options__3": { + "label": "Bolha" + }, + "options__4": { + "label": "Chevron para esquerda" + }, + "options__5": { + "label": "Chevron para direita" + }, + "options__6": { + "label": "Diamante" + }, + "options__7": { + "label": "Paralelogramo" + }, + "options__8": { + "label": "Círculo" + }, + "label": "Formato da imagem", + "info": "Cartões estilo-padrão não têm bordas quando uma forma de imagem está ativa." + }, "animation": { "content": "Animações", "image_behavior": { diff --git a/locales/pt-PT.schema.json b/locales/pt-PT.schema.json index 386dc35e036..3004a3121b5 100644 --- a/locales/pt-PT.schema.json +++ b/locales/pt-PT.schema.json @@ -434,6 +434,34 @@ "label": "Extra grande" } }, + "image_shape": { + "options__1": { + "label": "Predefinição" + }, + "options__2": { + "label": "Arco" + }, + "options__3": { + "label": "Gota" + }, + "options__4": { + "label": "Divisa para a esquerda" + }, + "options__5": { + "label": "Divisa para a direita" + }, + "options__6": { + "label": "Diamante" + }, + "options__7": { + "label": "Paralelogramo" + }, + "options__8": { + "label": "Redonda" + }, + "label": "Forma de imagem", + "info": "Os cartões com o estilo padrão não têm bordas quando uma forma de imagem está ativa." + }, "animation": { "content": "Animações", "image_behavior": { diff --git a/locales/sv.schema.json b/locales/sv.schema.json index 242ad7dfacb..8060c1933f8 100644 --- a/locales/sv.schema.json +++ b/locales/sv.schema.json @@ -434,6 +434,34 @@ "label": "Extra stor" } }, + "image_shape": { + "options__1": { + "label": "Standard" + }, + "options__2": { + "label": "Välvd" + }, + "options__3": { + "label": "Droppe" + }, + "options__4": { + "label": "Sparre vänster" + }, + "options__5": { + "label": "Sparre höger" + }, + "options__6": { + "label": "Diamant" + }, + "options__7": { + "label": "Parallelogram" + }, + "options__8": { + "label": "Rund" + }, + "label": "Bildform", + "info": "Kort i standardstil har inga ramar om en bildform är aktiv." + }, "animation": { "content": "Animeringar", "image_behavior": { diff --git a/locales/th.schema.json b/locales/th.schema.json index 29ae978177a..d10628c4a1b 100644 --- a/locales/th.schema.json +++ b/locales/th.schema.json @@ -434,6 +434,34 @@ "label": "ขนาดใหญ่พิเศษ" } }, + "image_shape": { + "options__1": { + "label": "ค่าเริ่มต้น" + }, + "options__2": { + "label": "รูปโค้ง" + }, + "options__3": { + "label": "หยดน้ำ" + }, + "options__4": { + "label": "บั้งชี้ไปทางซ้าย" + }, + "options__5": { + "label": "บั้งชี้ไปทางขวา" + }, + "options__6": { + "label": "เพชร" + }, + "options__7": { + "label": "สี่เหลี่ยมด้านขนาน" + }, + "options__8": { + "label": "โค้งมน" + }, + "label": "รูปทรงภาพ", + "info": "บัตรรูปแบบมาตรฐานจะไม่มีขอบเมื่อเปิดใช้รูปทรงภาพ" + }, "animation": { "content": "ภาพเคลื่อนไหว", "image_behavior": { diff --git a/locales/tr.schema.json b/locales/tr.schema.json index 3e83e53eb86..881bde9b175 100644 --- a/locales/tr.schema.json +++ b/locales/tr.schema.json @@ -434,6 +434,34 @@ "label": "Çok büyük" } }, + "image_shape": { + "options__1": { + "label": "Varsayılan" + }, + "options__2": { + "label": "Kemer" + }, + "options__3": { + "label": "Leke" + }, + "options__4": { + "label": "Sola ok" + }, + "options__5": { + "label": "Sağa ok" + }, + "options__6": { + "label": "Baklava" + }, + "options__7": { + "label": "Paralelkenar" + }, + "options__8": { + "label": "Yuvarlak" + }, + "label": "Görsel şekli", + "info": "Bir görsel şeklinin etkin olduğu standart stile sahip kartlarda sınır bulunmaz" + }, "animation": { "content": "Animasyonlar", "image_behavior": { diff --git a/locales/vi.schema.json b/locales/vi.schema.json index e54fb4e96c4..73dd82f0e6d 100644 --- a/locales/vi.schema.json +++ b/locales/vi.schema.json @@ -434,6 +434,34 @@ "label": "Cực lớn" } }, + "image_shape": { + "options__1": { + "label": "Mặc định" + }, + "options__2": { + "label": "Hình vòm" + }, + "options__3": { + "label": "Giọt nước" + }, + "options__4": { + "label": "Dấu chữ V trái" + }, + "options__5": { + "label": "Dấu chữ V phải" + }, + "options__6": { + "label": "Hình thoi" + }, + "options__7": { + "label": "Hình bình hành" + }, + "options__8": { + "label": "Hình tròn" + }, + "label": "Hình dạng ảnh", + "info": "Thẻ kiểu dáng tiêu chuẩn không có đường viền khi đang áp dụng hình dạng ảnh." + }, "animation": { "content": "Hiệu ứng động", "image_behavior": { diff --git a/locales/zh-CN.schema.json b/locales/zh-CN.schema.json index d536c6783d2..8d84c90b9e0 100644 --- a/locales/zh-CN.schema.json +++ b/locales/zh-CN.schema.json @@ -434,6 +434,34 @@ "label": "特大" } }, + "image_shape": { + "options__1": { + "label": "默认" + }, + "options__2": { + "label": "弧形" + }, + "options__3": { + "label": "Blob" + }, + "options__4": { + "label": "向左 V 形" + }, + "options__5": { + "label": "向右 V 形" + }, + "options__6": { + "label": "菱形" + }, + "options__7": { + "label": "平行四边形" + }, + "options__8": { + "label": "圆形" + }, + "label": "图片形状", + "info": "当“图片形状”为非“默认”选项时，标准样式的卡没有边框。" + }, "animation": { "content": "动画", "image_behavior": { diff --git a/locales/zh-TW.schema.json b/locales/zh-TW.schema.json index aea4d16a1a9..6a23c0229b9 100644 --- a/locales/zh-TW.schema.json +++ b/locales/zh-TW.schema.json @@ -434,6 +434,34 @@ "label": "超大型" } }, + "image_shape": { + "options__1": { + "label": "預設" + }, + "options__2": { + "label": "拱形" + }, + "options__3": { + "label": "斑點" + }, + "options__4": { + "label": "＞ 形箭頭向左" + }, + "options__5": { + "label": "＞ 形箭頭向右" + }, + "options__6": { + "label": "菱形" + }, + "options__7": { + "label": "平行四邊形" + }, + "options__8": { + "label": "圓形" + }, + "label": "圖片形狀", + "info": "啟用圖片形狀後，標準樣式的卡片不會有邊框。" + }, "animation": { "content": "動畫", "image_behavior": { diff --git a/sections/featured-collection.liquid b/sections/featured-collection.liquid index c474b960619..57e015a71e9 100644 --- a/sections/featured-collection.liquid +++ b/sections/featured-collection.liquid @@ -3,6 +3,11 @@ {{ 'component-slider.css' | asset_url | stylesheet_tag }} {{ 'template-collection.css' | asset_url | stylesheet_tag }} + +{% if section.settings.image_shape == 'blob' %} + {{ 'mask-blobs.css' | asset_url | stylesheet_tag }} +{%- endif -%} + {%- if section.settings.enable_quick_add -%} {{ 'quick-add.css' | asset_url | stylesheet_tag }} @@ -78,6 +83,7 @@ {% render 'card-product', card_product: product, media_aspect_ratio: section.settings.image_ratio, + image_shape: section.settings.image_shape, show_secondary_image: section.settings.show_secondary_image, show_vendor: section.settings.show_vendor, show_rating: section.settings.show_rating, @@ -134,6 +140,9 @@ {%- endif -%} + {% if section.settings.image_shape == 'arch' %} + {% render 'mask-arch' %} + {%- endif -%} @@ -317,6 +326,47 @@ "default": "adapt", "label": "t:sections.featured-collection.settings.image_ratio.label" }, + { + "type": "select", + "id": "image_shape", + "options": [ + { + "value": "default", + "label": "t:sections.all.image_shape.options__1.label" + }, + { + "value": "arch", + "label": "t:sections.all.image_shape.options__2.label" + }, + { + "value": "blob", + "label": "t:sections.all.image_shape.options__3.label" + }, + { + "value": "chevronleft", + "label": "t:sections.all.image_shape.options__4.label" + }, + { + "value": "chevronright", + "label": "t:sections.all.image_shape.options__5.label" + }, + { + "value": "diamond", + "label": "t:sections.all.image_shape.options__6.label" + }, + { + "value": "parallelogram", + "label": "t:sections.all.image_shape.options__7.label" + }, + { + "value": "round", + "label": "t:sections.all.image_shape.options__8.label" + } + ], + "default": "default", + "label": "t:sections.all.image_shape.label", + "info": "t:sections.all.image_shape.info" + }, { "type": "checkbox", "id": "show_secondary_image", diff --git a/sections/main-collection-product-grid.liquid b/sections/main-collection-product-grid.liquid index b234d7ef862..71f86612dba 100644 --- a/sections/main-collection-product-grid.liquid +++ b/sections/main-collection-product-grid.liquid @@ -3,6 +3,10 @@ {{ 'component-card.css' | asset_url | stylesheet_tag }} {{ 'component-price.css' | asset_url | stylesheet_tag }} +{% if section.settings.image_shape == 'blob' %} + {{ 'mask-blobs.css' | asset_url | stylesheet_tag }} +{%- endif -%} + {%- if section.settings.enable_quick_add -%} {{ 'quick-add.css' | asset_url | stylesheet_tag }} @@ -153,6 +157,7 @@ {% render 'card-product', card_product: product, media_aspect_ratio: section.settings.image_ratio, + image_shape: section.settings.image_shape, show_secondary_image: section.settings.show_secondary_image, show_vendor: section.settings.show_vendor, show_rating: section.settings.show_rating, @@ -172,6 +177,9 @@ {%- endpaginate -%} + {% if section.settings.image_shape == 'arch' %} + {% render 'mask-arch' %} + {%- endif -%} {% schema %} @@ -221,6 +229,47 @@ "default": "adapt", "label": "t:sections.main-collection-product-grid.settings.image_ratio.label" }, + { + "type": "select", + "id": "image_shape", + "options": [ + { + "value": "default", + "label": "t:sections.all.image_shape.options__1.label" + }, + { + "value": "arch", + "label": "t:sections.all.image_shape.options__2.label" + }, + { + "value": "blob", + "label": "t:sections.all.image_shape.options__3.label" + }, + { + "value": "chevronleft", + "label": "t:sections.all.image_shape.options__4.label" + }, + { + "value": "chevronright", + "label": "t:sections.all.image_shape.options__5.label" + }, + { + "value": "diamond", + "label": "t:sections.all.image_shape.options__6.label" + }, + { + "value": "parallelogram", + "label": "t:sections.all.image_shape.options__7.label" + }, + { + "value": "round", + "label": "t:sections.all.image_shape.options__8.label" + } + ], + "default": "default", + "label": "t:sections.all.image_shape.label", + "info": "t:sections.all.image_shape.info" + }, { "type": "checkbox", "id": "show_secondary_image", diff --git a/sections/main-search.liquid b/sections/main-search.liquid index d381a692f71..da4611e21dd 100644 --- a/sections/main-search.liquid +++ b/sections/main-search.liquid @@ -8,6 +8,10 @@ {%- endif -%} +{% if section.settings.image_shape == 'blob' %} + {{ 'mask-blobs.css' | asset_url | stylesheet_tag }} +{%- endif -%} +