Skip to content

Instantly share code, notes, and snippets.

@Efetivos

Efetivos/README.md

Last active July 11, 2021 14:46
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Efetivos/32c7087270d9a12cfd6244a957ca27db to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Efetivos/32c7087270d9a12cfd6244a957ca27db to your computer and use it in GitHub Desktop.
Download ZIP
LEMKUS - Apps implementations
Raw
README.md

WishList (Back in Stock)

https://admin.swymrelay.com/dashboard (Custommize )
https://swym.it/help/adding-the-swym-product-view-snippet-to-your-shopify-theme/ (add-to-cart.liquid)

    a(href="#" data-swaction="addToWishlist" data-product-id="{{product.id | json}}").btn-wishlist.btn-hover.cream-v
        span.static WISHLIST
        span.hover(data-hover="WISHLIST      WISHLIST      ") WISHLIST      WISHLIST     

https://swym.it/help/adding-the-wishlist-plus-launch-point-to-your-shopify-sites-header-menu/

    a(href="#" data-swaction="addToWishlist" data-product-id="{{product.id | json}}").btn-wishlist.btn-hover.cream-v
        span.static WISHLIST
        span.hover(data-hover="WISHLIST      WISHLIST      ") WISHLIST      WISHLIST     

Implemeting Notify App (Back in Stock)

https://app.backinstock.org/widget/edit (Custommize )
https://help.backinstock.org/article/1588-using-a-custom-product-page-button (Add product page) (product.liquid)

	#BIS_trigger.prod-card__notify.btn-hover
        span.static NOTIFY ME
        span.hover(data-hover="NOTIFY ME      NOTIFY ME      NOTIFY ME      NOTIFY ME      NOTIFY ME      ") NOTIFY ME      NOTIFY ME      NOTIFY ME      NOTIFY ME      NOTIFY ME      

https://help.backinstock.org/article/2331-add-a-back-in-stock-button-to-the-collection-page (Add to Collection)
(dropping-card.liquid, dropping-card-inv.liquid)

	a(href="#" class="BIS_trigger" data-product-data="{{ product | json | escape }}").dropping-card__notify.btn-hover NOTIFY ME   

Implemeting Filter on Collection (Smart Product Filter & Search)

Product Layout (left tab) > Product List Layout [ Theme Layout ]
collection.liquid (line 32)

	<div class="products__hold colle-cards">
		{% for product in collection.products %}
			{% render 'product-card' prod: product %}
		{% else %}
	</div>
Raw
filter-collection.sass
section.products
border-bottom: 1px solid var(--dark)
display: flex
justify-content: space-between
@include desk
overflow: hidden
div#gf-products
display: grid !important
.gf-left #gf-tree
width: 33.3vw
margin: 0
@include desk
min-width: 33.3vw
will-change: transform
.gf-left #gf-tree+#gf-grid
border-left: 1px solid var(--dark)
margin: 0
padding: 0
width: 66.5vw
will-change: transform
section.products
justify-content: space-between
@include desk
border-top: 1px solid var(--dark)
#gf-grid .colle-cards
grid-template-columns: repeat(2,33.4vw)
.gf-filter-contents
padding: 0 2.9rem
.gf-block-title h3
display: flex
justify-content: space-between
position: relative
span.gf-Checkbox
border-radius: 50%
.checked .gf-Checkbox
background-size: 105%
.gf-scroll.gf-block-scroll::-webkit-scrollbar-thumb, body>#gf-tree .gf-filter-contents::-webkit-scrollbar-thumb
background: var(--color)
.globo-selected-items-wrapper
padding: 1rem 2.9rem
.gf-block-content.globo-selected-items
@include desk
display: flex
flex-wrap: wrap
.gf-block-title.hidden-xs h3 span
font-family: var(--dharma)
font-size: 4rem
padding: 2rem 0
a.gf-refine-toggle.hidden-xs
font-family: var(--recosemi)
font-size: 1.6rem
margin: 1rem 0 0
text-decoration: underline
text-transform: uppercase
#gf-tree .gf-label
font-size: 1.1rem
.gf-block-title span
font-size: 1.6rem
font-family: var(--recosemi)
.gf-option-block
border-bottom: 1px solid var(--dark)
.gf-left #gf-tree .globo-selected-items-wrapper .globo-selected-items
border-bottom: 1px solid var(--dark)
span.gf-count
font-size: 1.2rem
.selected-item.gf-option-label
@include desk
margin: 0.5rem 0.7rem 0 0
#gf-tree .selected-item.gf-option-label
width: auto
.selected-item.gf-option-label span
font-size: 1.1rem
color: var(--soft)
#gf-tree .selected-item.gf-option-label
background: var(--dark)
border-radius: 50px
.selected-item.gf-option-label a
padding: 0.7rem 1.5rem
.gf-filter-contents span.gf-label
font-size: 1.4rem !important
.selected-item span.gf-clear
@include desk
margin: 0 0 0 1.7rem
span.selected-item strong
display: flex
#gf-tree a
font-size: 1.4rem
div#gf-controls-container
margin: 0
padding: 0
padding: 2rem var(--gap) 0
@include mobile
margin: -1rem 0 0 0
padding: 0 var(--gap) 0
.gf-actions
margin: 0
padding: 0
.theme-store-id-380.spf-layout-theme #gf-products, .theme-store-id-679.spf-layout-theme #gf-products, .theme-store-id-796.spf-layout-theme #gf-products
margin: 0
.gf-filter-trigger, .gf-filter-selection
@include mobile
align-items: flex-end
flex-direction: column
justify-content: space-between
padding: 0
position: relative
input.gf-controls-search-input
background: none
border: none
border-bottom: 1px solid var(--dark)
font-family: var(--reco)
font-size: 1.4rem
button.gf-controls-search-button
margin: 0
button.gf-controls-search-button
margin: 0 0 0 -0.8rem
span.gf-summary
font-size: 1.6rem
display: flex
@include mobile
justify-content: flex-end
flex: auto
margin: 1rem 0 0 0
.sort-by.limit-by.hidden-xs
font-size: 1.6rem
background: transparent
select#setLimit
font-size: 1.6rem
font-family: var(--reco)
.sort-by
font-size: 1.6rem
background: transparent
label.sort-by-toggle
font-size: 1.6rem
@media only screen and (max-width:1024px)
#gf-grid .colle-cards
grid-template-columns: 1fr 1fr
div#gf-products
margin: 1.9rem 0 0 -1px !important
width: calc(100vw + 3px)!important
main.main-collection
overflow: hidden
@media only screen and (min-width: 580px) and (max-width: 1024px)
#gf-grid .colle-cards
grid-template-columns: repeat(2,33.4vw)
.theme-store-id-380.spf-layout-theme #gf-products, .theme-store-id-679.spf-layout-theme #gf-products, .theme-store-id-796.spf-layout-theme #gf-products
margin-left: 0px !important
@include desk
.gf-filter-selection
justify-content: space-between
padding: 0
.gf-actions
display: flex
justify-content: space-between
.toggle-filter
justify-self: flex-start
.gf-filter-selection > *
margin: 0 0 0 5.3rem
.gf-filter-selection, .gf-filter-trigger, span.gf-summary
padding: 0
margin: 0
span.gf-summary > *
padding: 0 0.5rem
form.gf-controls-search-form
//border-bottom: 1px solid
.loaded-filter
border-top: none !important
div#gf-controls-container
border-bottom: 1px solid var(--dark)
min-width: 100%
padding: 0 var(--gap) 0.9rem
position: relative
z-index: 2
//______ is filter
.is-filter #gf-grid
width: 100vw !important
transform: translateX(-33.6vw) !important
.is-filter #gf-grid .colle-cards
grid-template-columns: repeat(3,33.7vw) !important
.is-filter #gf-tree
//transform: translateX(-33.3vw) !important
.flipping main.main-collection
min-height: 125vh
position: relative
.flipping #gf_pagination_wrap
opacity: 0
.flipping
.prod-card__each:nth-child(1), .prod-card__each:nth-child(2)
border-top: 1px solid transparent !important
.prod-card__each
background: var(--soft)
will-change: transform
@include mobile
a.clear-refinements, button.clear-refinements.visible-xs
background: transparent !important
color: var(--dark) !important
font-family: var(--recosemi)
text-decoration: underline !important
border: none !important
#gf-controls-container .globo-selected-items-wrapper .selected-item>a, .gf-top_one #gf-tree .globo-selected-items-wrapper .selected-item>a
background: transparent
border: none
#gf-controls-container .globo-selected-items-wrapper .globo-selected-items span.selected-item strong, .gf-top_one #gf-tree .globo-selected-items-wrapper .globo-selected-items span.selected-item strong
font-size: 14px
li.selected-item.gf-option-label a:not(a.clear-refinements)
background: var(--dark) !important
border-radius: 50px !important
padding: 1px 15px !important
display: flex !important
align-items: center !important
justify-content: center !important
span.selected-item strong
color: var(--soft) !important
.selected-item a.clear-refinements
background: transparent !important
span.selected-item
margin: 0 9px 0 0
.selected-item.gf-option-label span strong
text-transform: uppercase !important
.gf-filter-selection, .gf-filter-trigger
align-items: flex-start
.gf-refine-toggle-mobile, .gf-filter-selection .sort-by
border-color: var(--dark)
i.fa.fa-tasks
display: none
h3.gf-refine-toggle-mobile span, span#gf-mobile-refine-toggle
font-family: var(--recosemi)
.selected-item span.gf-clear
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M11.414 10l6.293-6.293a1 1 0 10-1.414-1.414L10 8.586 3.707 2.293a1 1 0 00-1.414 1.414L8.586 10l-6.293 6.293a1 1 0 101.414 1.414L10 11.414l6.293 6.293A.998.998 0 0018 17a.999.999 0 00-.293-.707L11.414 10z' fill='%FFFFFF'%3E%3C/path%3E%3C/svg%3E")
body>#gf-tree .gf-filter-header>div.gf-filter-heading
font-family: var(--recosemi)
span.gf-close-canvas
border: 1px solid var(--dark)
border-radius: 50%
max-width: 20px
display: flex
height: 20px
padding: 4px
justify-content: center
align-items: center
top: auto
body>#gf-tree .gf-filter-footer, body>#gf-tree .gf-filter-header
display: flex
justify-content: center
align-items: center
padding: 15px 15px
div#gf-tree
background: var(--soft)
body>#gf-tree .globo-selected-items .selected-item>a
border: none !important
justify-content: center
align-items: center
border-radius: 50px
background: var(--dark)
padding: 3px 11px
#gf-tree .selected-item.gf-option-label
background: none
#gf-tree .selected-item.gf-option-label
body>#gf-tree .globo-selected-items .selected-item span
font-size: 13px
body>#gf-tree .globo-selected-items-wrapper
width: 100%
padding: 0
.gf-left #gf-tree .globo-selected-items-wrapper .globo-selected-items
padding: 17px 14px 20px 14px !important
border-top: none
a.checked
#gf-tree .gf-label
font-family: var(--reco)
span.gf-count
font-family: var(--reco)
body>#gf-tree .gf-filter-footer button
font-family: var(--recosemi)
font-size: 14px
body>#gf-tree .gf-option-block, body>#gf-tree .globo-selected-items-wrapper>.globo-selected-items
border-bottom: 1px solid var(--dark)
#gf-tree a
font-family: var(--recosemi)
#gf-controls-container .globo-selected-items-wrapper
padding: 0
body>#gf-tree .gf-filter-header
border-bottom: 1px solid var(--dark)
body>#gf-tree .gf-filter-footer, body>#gf-tree .gf-filter-header
border-top: 1px solid var(--dark)
span.gf-summary > *
margin: 0 0.4rem 0 0
.selected-item span.gf-clear
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M11.414 10l6.293-6.293a1 1 0 10-1.414-1.414L10 8.586 3.707 2.293a1 1 0 00-1.414 1.414L8.586 10l-6.293 6.293a1 1 0 101.414 1.414L10 11.414l6.293 6.293A.998.998 0 0018 17a.999.999 0 00-.293-.707L11.414 10z' fill='%235C5F62'%3E%3C/path%3E%3C/svg%3E") !important
//- ========================= IS SAFARI ========================= -//
//- ========================= IS SAFARI ========================= -//
@include mobile
.is-crios
.gf-actions
flex-direction: column
.gf-filter-selection
width: 100% !important
.gf-filter-selection, .gf-filter-trigger
flex: none
width: 100%
max-width: 100% !important
.gf-close-canvas
.gf-close-canvas svg
width: 10px
span.selected-item strong
padding: 2px 0 0 0
.gf-left #gf-tree .globo-selected-items-wrapper .globo-selected-items > *
margin: 0 8px 0 0 !important
//- ========================= SEARCH ========================= -//
//- ========================= SEARCH ========================= -//
.gf-search-header
text-transform: uppercase
font-family: var(--recosemi) !important
background: var(--soft) !important
font-size: 1.6rem
color: var(--dark)
padding: 2rem 0 !important
line-height: 2 !important
.ui-menu-item-wrapper
background: var(--soft) !important
font-family: var(--reco)
font-size: 1.4rem
color: var(--dark) !important
line-height: 1.2
padding: 1rem 0 !important
.gf-search-left
width: 6rem !important
height: 6rem !important
max-width: 6rem !important
max-height: 6rem !important
margin: 0 0 0 1.3rem !important
.ui-menu-item-wrapper img
border: 1px solid var(--dark)
width: 6rem !important
height: 6rem !important
object-fit: cover
.gf-search-item-product-title
font-family: var(--recosemi)
padding: .3rem 0 !important
font-size: 1.5rem !important
.gf-search-item-product-vendor
text-transform: capitalize
font-size: 1rem !important
color: var(--dark) !important
.ui-menu.ui-widget-content.ui-autocomplete
box-shadow: none
border: 1px solid var(--dark)
padding: 1rem !important
background: var(--soft)
.gf-search-right
margin: 0 0 0 3rem
Raw
globo.filter.product.liquid
{% raw %}
{% assign prod = product %}
{% assign has_stock = 0 %}
{% if prod.variants.size > 1 %}
{% for variant in prod.variants %}
{% if variant.available %}
{% if variant.inventory_quantity != 0 %} {% assign has_stock = variant.inventory_quantity %} {% endif %}
{% else %}
{% endif %}
{% endfor %}
{% else %}
{% endif %}
{% assign vendor = prod.vendor | downcase %}
<div class="prod-card__each {% if prod.metafields.drop.drop_month %}card-drop{% elsif prod.variants.size > 1 %}card-variant{% endif %}">
<div class="prod-card__hold">
<div class="prod-card__imgs"><a class="prod-img" href="{{ prod.url | within: collection }}">
<ul class="prod-card__imgs__hold"> {% for image in prod.images limit: 2 %}
<li class="prod-card__img__each"> <img class="img-load" src="{{ image.src | escape }}" alt="{{ image.src | escape }}"></li> {% endfor %}
</ul></a>
{% comment %}
<div class="prod-card__img__logo">
{% for collection in prod.collections %}
{% assign col_title = collection.title | downcase %}
{% if vendor == col_title %}
<img src="{{ collection.image.src | img_url: '200x' | escape }}" alt="{{ vendor }} {{ col_title }}">
{% endif %}
{% endfor %}
</div>
{% endcomment %} {% if prod.metafields.drop.drop_month %}
<div class="prod-card__img__date"><span>{{ prod.metafields.drop.drop_day }} {{ prod.metafields.drop.drop_month }}</span></div> {% elsif prod.compare_at_price_max > prod.price and has_stock > 0 %}
<div class="prod-card__img__discount"><span>{{ prod.compare_at_price_min | minus: prod.price | times: 100.0 | divided_by: prod.compare_at_price_min | money_without_currency | times: 100 | replace: '.0', ''}}% OFF {{ }}</span></div> {% elsif has_stock < 1 %}
<div class="prod-card__soldout"><span>SOLD OUT</span></div> {% endif %}
<div class="sizes">
{% assign sizes = '' %}
{% for variant in prod.variants %}
{% assign var_url = variant.url %}
{% assign sizes = sizes | append: variant.options[0] | append: '_' %}<a class="{% unless variant.available %}disabled{% endunless %} link-var" href="{{ variant.url }}"><span class="recosemi">{{ variant.title }}</span></a> {% endfor %}
</div>
</div>
<div class="prod-card__infos {% if prod.compare_at_price_max > prod.price %}card-sale{% endif %}">
<div class="prod-card__title"><a class="title-prod dharma" href="{{ prod.url | within: collection }}">{{ prod.title }}</a></div>
<div class="prod-card__prices"><span class="regular-price">{{ prod.price | money }}</span></div> {% if prod.metafields.drop.drop_month %}
<div class="prod-card__notify btn-hover"><span class="static">NOTIFY ME</span><span class="hover" data-hover="NOTIFY ME NOTIFY ME NOTIFY ME NOTIFY ME NOTIFY ME ">NOTIFY ME NOTIFY ME NOTIFY ME NOTIFY ME NOTIFY ME </span></div> {% endif %}
</div>
</div>
</div>
{% endraw %}
Raw
globo.filter.sort.liquid
{% raw %}
{% assign root_url = {% endraw %}"{%- if routes.root_url != "/" -%}{{ routes.root_url }}{%- endif -%}"{% raw %} %}
<div id="gf-controls-container">
<form class="gf-controls-search-form">
<input value="{{terms}}" onkeyup="this.setAttribute('value', this.value); searchProducts(this.value);" name="q" placeholder="{{translation.product.search | default: "Search by product, category or keyword"}}" aria-label="{{translation.product.search | default: "Search by product, category or keyword "}}" autocomplete="off" class="gf-controls-search-input"/>
<button onclick="clearSearchProducts()" type="button" class="gf-controls-clear-button">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M11.414 10l6.293-6.293a1 1 0 10-1.414-1.414L10 8.586 3.707 2.293a1 1 0 00-1.414 1.414L8.586 10l-6.293 6.293a1 1 0 101.414 1.414L10 11.414l6.293 6.293A.998.998 0 0018 17a.999.999 0 00-.293-.707L11.414 10z" fill="#5C5F62"/></svg>
</button>
<button type="button" class="gf-controls-search-button">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M2 8c0-3.309 2.691-6 6-6s6 2.691 6 6-2.691 6-6 6-6-2.691-6-6zm17.707 10.293l-5.395-5.396A7.946 7.946 0 0016 8c0-4.411-3.589-8-8-8S0 3.589 0 8s3.589 8 8 8a7.954 7.954 0 004.897-1.688l5.396 5.395A.998.998 0 0020 19a1 1 0 00-.293-.707z" fill="#3d4246"/></svg>
</button>
</form>
{% if pagination.total > 0 %}
<div class="gf-actions">
<div class="gf-filter-trigger">
<h3 class="gf-refine-toggle-mobile" tabindex="0">
<span onclick="globofilter.toggleCanvas()"><i class="fa fa-tasks" aria-hidden="true"></i> {{translation.filter.filter_by | default: "Filter by"}}</span>
</h3>
</div>
<button class="no-mobile toggle-filter recosemi">HIDE FILTER</button>
<div class="gf-filter-selection">
<span class="gf-summary">
{% assign plurality = translation.search.products | default: "Products" %}
{% assign singular = translation.search.product | default: "Product" %}
<b>{{pagination.total}}</b> {{pagination.total | pluralize: singular, plurality}}
</span>
<div class="sort-by limit-by hidden-xs">
<label for="setLimit">{{translation.product.limit | default: "Show"}}</label>
<select id="setLimit" class="sortby-select" onchange="setLimit(this.value); return false;">
<option selected value="12">12</option><option value="24">24</option><option value="48">48</option> </select>
</div>
{% assign relevance = '' %}
{% endraw %}{% if request.page_type == 'search' %}{% raw %}
{% assign relevance = 'relevance,' %}
{% endraw %}{% endif %}{% raw %}
{% assign available_sort = '{{relevance}}stock-descending,best-selling,title-ascending,title-descending,price-ascending,price-descending,created-descending,created-ascending,sale-descending' | append: ',{% endraw %}{{collection.default_sort_by}}{% raw %}' | split: "," %}
{% capture sort_by_text %}
{% case sort_by %}
{% when 'best-selling' %}
{{translation.sort.best_selling | default: "Best Selling"}}
{% when 'manual' %}
{{translation.sort.manually | default: "Featured"}}
{% when 'relevance' %}
{{translation.sort.relevance | default: "Relevance"}}
{% when 'featured' %}
{{translation.sort.manually | default: "Featured"}}
{% when 'stock-descending' %}
{{translation.sort.availability_in_stock_first | default: "Availability"}}
{% when 'title-ascending' %}
{{translation.sort.alphabetically_a_z | default: "Alphabetically, A-Z"}}
{% when 'title-descending' %}
{{translation.sort.alphabetically_z_a | default: "Alphabetically, Z-A"}}
{% when 'price-ascending' %}
{{translation.sort.price_low_to_high | default: "Price, low to high"}}
{% when 'price-descending' %}
{{translation.sort.price_high_to_low | default: "Price, high to low"}}
{% when 'created-descending' %}
{{translation.sort.date_new_to_old | default: "Date, new to old"}}
{% when 'created-ascending' %}
{{translation.sort.date_old_to_new | default: "Date, old to new"}}
{% when 'sale-descending' %}
{{translation.sort.sale_off | default: "% Sale off"}}
{% endcase %}
{% endcapture %}
<div class="sort-by">
<label for="globo-dropdown-sort_options" class="sort-by-toggle" role="button" tabindex="0" aria-expanded="false"><span>{{sort_by_text}}</span></label>
<div id="globo-dropdown-sort_options" class="globo-dropdown-custom__options">
{% if available_sort contains 'best-selling' %}<span data-sort="best-selling" onclick="changeSortBy('best-selling');">{{translation.sort.best_selling | default: "Best Selling"}}</span>{% endif %}
{% if available_sort contains 'featured' %}<span data-sort="manual" onclick="changeSortBy('manual');">{{translation.sort.manually | default: "Featured"}}</span>{% endif %}
{% if available_sort contains 'stock-descending' %}<span data-sort="stock-descending" onclick="changeSortBy('stock-descending');">{{translation.sort.availability_in_stock_first | default: "Availability"}}</span>{% endif %}
{% if available_sort contains 'relevance' %}<span data-sort="relevance" onclick="changeSortBy('relevance');">{{translation.sort.relevance | default: "Relevance"}}</span>{% endif %}
{% if available_sort contains 'title-ascending' %}<span data-sort="title-ascending" onclick="changeSortBy('title-ascending');">{{translation.sort.alphabetically_a_z | default: "Alphabetically, A-Z"}}</span>{% endif %}
{% if available_sort contains 'title-descending' %}<span data-sort="title-descending" onclick="changeSortBy('title-descending');">{{translation.sort.alphabetically_z_a | default: "Alphabetically, Z-A"}}</span>{% endif %}
{% if available_sort contains 'price-ascending' %}<span data-sort="price-ascending" onclick="changeSortBy('price-ascending');">{{translation.sort.price_low_to_high | default: "Price, low to high"}}</span>{% endif %}
{% if available_sort contains 'price-descending' %}<span data-sort="price-descending" onclick="changeSortBy('price-descending');">{{translation.sort.price_high_to_low | default: "Price, high to low"}}</span>{% endif %}
{% if available_sort contains 'created-descending' %}<span data-sort="created-descending" onclick="changeSortBy('created-descending');">{{translation.sort.date_new_to_old | default: "Date, new to old"}}</span>{% endif %}
{% if available_sort contains 'created-ascending' %}<span data-sort="created-ascending" onclick="changeSortBy('created-ascending');">{{translation.sort.date_old_to_new | default: "Date, old to new"}}</span>{% endif %}
{% if available_sort contains 'sale-descending' %}<span data-sort="sale-descending" onclick="changeSortBy('sale-descending');">{{translation.sort.sale_off | default: "% Sale off"}}</span>{% endif %}
</div>
</div>
</div>
<div class="globo-selected-items-wrapper visible-xs">
{% if has_filter and filters %}
<ul class="globo-selected-items">
{% capture selected_item_html %}
{% assign filter_count = 0 %}
{% for filter in filters %}
{% if filter.is_selected %}
{% if filter.style == 'Slider' %}
{% assign filter_count = filter_count | plus: 1 %}
<li class="selected-item gf-option-label">
<a onclick="removeFilter({{filter.id}})">
<span class="selected-item">
<strong>
{% if filter.attribute == 'Price' %}
<span class="money">{{filter.values.min | times: 100 | money}}</span> - <span class="money">{{filter.values.max | times: 100 | money}}</span>
{% elsif filter.attribute == 'Percent Sale' %}
{{filter.values.min}}% - {{filter.values.max}}%
{% else %}
{{filter.values.min}} - {{filter.values.max}}
{% endif %}
</strong>
</span>
<span class="gf-clear">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M11.414 10l6.293-6.293a1 1 0 10-1.414-1.414L10 8.586 3.707 2.293a1 1 0 00-1.414 1.414L8.586 10l-6.293 6.293a1 1 0 101.414 1.414L10 11.414l6.293 6.293A.998.998 0 0018 17a.999.999 0 00-.293-.707L11.414 10z" fill="#5C5F62"/></svg>
</span>
</a>
</li>
{% else %}
{% for value in filter.values %}
{% if value.selected %}
{% assign filter_count = filter_count | plus: 1 %}
<li class="selected-item gf-option-label">
<a onclick="removeFilterValue({{filter.id}},'{{value.value | replace:"'", "\'" | escape_once}}')">
<span class="selected-item"><strong>{{value.label}}</strong></span>
<span class="gf-clear"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M11.414 10l6.293-6.293a1 1 0 10-1.414-1.414L10 8.586 3.707 2.293a1 1 0 00-1.414 1.414L8.586 10l-6.293 6.293a1 1 0 101.414 1.414L10 11.414l6.293 6.293A.998.998 0 0018 17a.999.999 0 00-.293-.707L11.414 10z" fill="#5C5F62"/></svg></span>
</a>
</li>
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
{% endfor %}
{% endcapture %}
{% if filter_count > 1 %}
<li class="selected-item gf-option-label"><a onclick="clearAllFilter()" class="clear-refinements">{{ translation.filter.clear_all | default: "Clear all"}}</a></li>
{% endif %}
{{selected_item_html}}
</ul>
{% endif %}
</div>
</div>
{% endif %}
</div>
{% endraw %}
Raw
wishlist-app.sass
//- ========================= wishlist ========================= -//
//- ========================= wishlist ========================= -//
/******** WISHLIST ********/
.swym-ui-component .swym-wishlist-container-title-bar
background: var(--dark) !important
span.swym-user-text.swym-value.swym-value-1
color: var(--soft) !important
text-transform: uppercase !important
.swym-ui-component .swym-simple-wishlist-modal .swym-modal-content .swym-close-btn
display: flex !important
justify-content: flex-end !important
h2.swym-wishlist-main-title.swym-heading.swym-heading-1.swym-is-heading
font-family: var(--dharma) !important
text-transform: uppercase !important
color: var(--dark) !important
font-size: 4rem !important
letter-spacing: 0 !important
.swym-simple-wishlist-container-content
background: var(--soft) !important
.swym-ui-component .swym-wishlist-grid
max-width: none !important
width: 94% !important
padding: 0 0 1rem 0 !important
button.swym-delete-btn.swym-nav.swym-nav-1.swym-is-button
border: 1px solid var(--dark) !important
background: transparent !important
border-radius: 50% !important
width: 2.1rem !important
height: 2.1rem !important
.swym-ui-component .swym-wishlist-grid .swym-wishlist-item .swym-delete-btn .swym-icon
display: flex !important
align-items: center !important
justify-content: center !important
.swym-ui-component .swym-wishlist-grid .swym-wishlist-item .swym-delete-btn .swym-icon::before
font-size: 0.65rem !important
.swym-ui-component .swym-wishlist-grid .swym-wishlist-item
background: transparent !important !important
width: 26.3rem !important
display: flex !important
flex-direction: column !important
align-items: center !important
.swym-ui-component .swym-wishlist-grid .swym-wishlist-item .swym-title
font-family: var(--dharma) !important
text-transform: uppercase !important
color: var(--dark) !important
text-align: center !important
font-size: 3rem !important
.swym-ui-component .swym-wishlist-grid .swym-wishlist-image-wrapper
width: 14.8rem !important
.swym-ui-component .swym-wishlist-grid .swym-wishlist-image-wrapper img
width: 14.8rem !important
height: 14.8rem !important
button.swym-add-to-cart-btn.swym-button.swym-button-1.swym-is-button.swym-bg-2.swym-color-4.swym-is-button
background: var(--color) !important
font-family: var(--recosemi) !important
color: var(--dark) !important
border: 1px solid var(--dark) !important
border-radius: 20px !important
font-size: 1.2rem !important
padding: 0.5rem 1rem !important
.swym-ui-component .swym-product-price .swym-product-final-price
display: none !important
a.swym-wishlist-item.swym-is-anchor
padding: 1.3rem 0 !important
.swym-ui-component .swym-modal
.swym-ui-component .swym-simple-wishlist-modal .swym-modal-content
max-width: 83% !important
.swym-ui-component .swym-wishlist-grid .swym-wishlist-item .swym-variant-title
font-family: var(--recosemi) !important
font-size: 1.4rem !important
.swym-ui-component .swym-wishlist-detail-separator
background: var(--dark) !important
.swym-ui-component .swym-wishlist-grid .swym-wishlist-item
background: transparent !important
margin: 0 1.7rem 1.9rem 0 !important
width: 25.33rem!important
.swym-ui-component .swym-wishlist-grid .swym-wishlist-item:nth-child(4n)
margin-right: 0 !important
div#swym-anchor
display: none
h3.swym-empty-wishlist-title.swym-heading.swym-heading-1
color: var(--dark)
font-family: var(--dharmaex)
font-size: 2.6rem
text-transform: uppercase
@include desk
font-size: 4rem
p.swym-empty-wishlist-text.swym-text.swym-text-1
color: var(--dark)
font-family: var(--reco)
font-size: 1.4rem
letter-spacing: 0
text-align: center
@include desk
font-size: 1.6rem
.swym-ui-component .swym-empty-wishlist-container .swym-empty-wishlist-continue-btn
background: var(--color)
border-radius: 50px
border: 1px solid var(--dark)
color: var(--dark)
font-family: var(--recosemi)
font-size: 1.6rem
text-transform: uppercase
@include desk
font-size: 1.4rem !important
button.swym-disabled span
font-size: 1.6rem
font-family: var(--recosemi)
letter-spacing: 0
text-transform: uppercase
font-size: 1.2rem
.swym-ui-component .swym-wishlist-context-menu .swym-wishlist-context-menu-item
margin: 0
padding: 0
span.swym-icon
display: none
button.swym-wishlist-context-menu-item.swym-delete.swym-nav.swym-nav-1.swym-is-button.swym-disabled
padding: 0
justify-content: center
.swym-ui-component .swym-wishlist-context-menu .swym-wishlist-context-menu-content
padding: 1.1rem 2.5rem
min-width: auto
.swym-ui-component .swym-save-wishlist-modal .swym-save-wishlist-modal-dialog .swym-text-heading
font-family: var(--dharmaex)
text-transform: uppercase
color: var(--dark)
text-align: center
font-size: 2.6rem !important
.swym-ui-component .swym-save-wishlist-modal .swym-save-wishlist-modal-dialog .swym-text-content
letter-spacing: 0
text-align: center
font-family: var(--reco)
color: var(--dark)
font-size: 1.5rem
.swym-ui-component .swym-save-wishlist-modal .swym-save-wishlist-modal-dialog .swym-close-btn
border: 1px solid var(--dark)
padding: 0.6rem
border-radius: 50%
width: 2.6rem
height: 2.6rem
display: flex
align-items: center
justify-content: center
@include desk
width: 1.6rem
height: 1.6rem
.swym-ui-component .swym-save-wishlist-modal .swym-save-wishlist-modal-dialog .swym-close-btn::before
font-size: 0.8rem
button.swym-login-btn.swym-button.swym-button-1.swym-is-button.swym-bg-2.swym-color-4, button.swym-log-out-btn.swym-button.swym-button-1.swym-is-button.swym-bg-2.swym-color-4
background: var(--color)
border-radius: 50px
border: 1px solid var(--dark)
color: var(--dark)
font-family: var(--recosemi)
text-transform: uppercase
letter-spacing: 0
@include desk
font-size: 1.4rem
button.swym-save-list-btn.swym-button.swym-button-2.swym-is-button.swym-color-2.swym-border-color-1, .swym-ui-component .swym-save-wishlist-modal .swym-save-wishlist-modal-dialog .swym-logged-in .swym-back-btn
border-radius: 50px
border: 1px solid var(--dark)
color: var(--dark)
font-family: var(--recosemi)
font-size: 1.6rem
text-transform: uppercase
letter-spacing: 0
@include desk
font-size: 1.4rem !important
span.swym-color-2, .swym-ui-component .swym-save-wishlist-modal .swym-save-wishlist-modal-dialog .swym-text-content
font-family: var(--reco) !important
font-size: 1.6rem !important
color: var(--dark) !important
button.swym-back-btn.swym-button.swym-button-2.swym-is-button.swym-color-2
font-size: 1.6rem !important
letter-spacing: 0 !important
@include desk
font-size: 1.4rem !important
.swym-ui-component .swym-save-wishlist-modal .swym-save-wishlist-modal-dialog .swym-text-content, span.swym-color-2
color: var(--dark) !important
font-size: 1.4rem !important
@include desk
font-size: 1.3rem !important
.swym-ui-component .swym-save-wishlist-modal .swym-save-wishlist-modal-dialog .swym-text-heading
@include desk
font-size: 4rem !important
margin: 0 0 1rem 0 !important
button.swym-wishlist-context-menu-item.swym-share.swym-nav.swym-nav-1.swym-is-button
display: none
.swym-notification-wishlist.swym-clickable
border: 1px solid
.swym-notifications-container.swym-showing.swymTopLeft
box-shadow: none
background: var(--dark)
.swym-notification-wishlist .swym-details
display: flex !important
flex-wrap: wrap !important
font-family: var(--reco) !important
font-size: 1.2rem !important
letter-spacing: 0px !important
line-height: 1 !important
padding: 1rem !important
.swym-notification-wishlist .swym-details-container
font-family: var(--reco) !important
padding: 0.8rem 0
span.swym-emphasis:nth-child(1)
font-family: var(--dharma) !important
font-size: 1.6rem !important
letter-spacing: 0 !important
text-transform: uppercase !important
white-space: nowrap
width: 100% !important
span.swym-emphasis:nth-child(2)
padding: 0 .5rem
line-height: 1
font-family: var(--reco)
.swym-notification-wishlist .swym-image
border: 1px solid var(--dark) !important
height: 6rem !important
margin: 0 0 0 2rem
width: 6rem !important
a.swym-powered-by-text.swym-is-anchor
display: none
.swym-details-container
padding: 1.2rem 0
.swym-notification-wishlist.swym-clickable
padding: 0 3rem 0 0
.swym-notifications-container.swymTopLeft.swym-showing
width: 28rem
background: var(--soft)
.swym-notification-wishlist .swym-product-tile
background: var(--soft) !important
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment