FROM CACHE - en_header
Shopify Design
Shopify themes, liquid, logos, and UX
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
- Shopify Community
- :
- Shopify Discussion
- :
- Shopify Design
- :
- Re: "Add to Cart" button missing on product pages.
Options
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Mute
- Printer Friendly Page
"Add to Cart" button missing on product pages.
Solved
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
08-02-2021
09:34 AM
Site link: https://tsz76pcwaozjddlb-17819333.shopifypreview.com
This is where I would like the button show.
Please help. Thank you.
Solved! Go to the solution
Accepted Solution (1)
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
08-02-2021
11:01 PM
This is an accepted solution.
Please backup your Snippets/ product-form.liquid file code and replace following code
{% comment %}
Product form
@param product
@param selected_variant
{% endcomment %}
{% if is_product_modal and settings.quickshop_show_dcb %}
{% assign quickshop_smart_buttons = true %}
{% endif %}
{% if is_product_modal == false and section.settings.show_dcb %}
{% assign product_smart_buttons = true %}
{% endif %}
{% if selected_variant.available == false %}
{% assign quickshop_smart_buttons = false %}
{% assign product_smart_buttons = false %}
{% endif %}
{% assign product_form_class = '' %}
{% if product_smart_buttons or quickshop_smart_buttons %}
{% assign product_form_class = 'smart-payment-enabled' %}
{% endif %}
{% form 'product', product, class: product_form_class, data-product-form: '' %}
{% comment %}
Display variant options for a product
@param product
@param selected_variant
@param style
@param enable_swatches
@param swatches_shape
@param swatches_option_trigger
@param swatches_option_style
@param swatches_product_page_size
@param swatch_colors
@param select_main_classes
@param select_classes
@param input_select_wrapper_classes
@param input_select_classes
@param input_select_label_classes
@param input_select_chevron_classes
@param radios_classes
@param option_header_classes
@param option_name_classes
@param option_values_classes
@param option_value_classes
@param option_value_label_classes
@param option_value_input_classes
@param option_value_name_classes
@param swatches_classes
@param option_swatch_wrapper_classes
@param option_swatch_classes
@param option_swatch_inner_classes
{% endcomment %}
{% assign product = product %}
{% assign selected_variant = selected_variant %}
{% assign style = settings.product_option_style %}
{% assign enable_swatches = settings.swatches_enable %}
{% assign swatches_shape = settings.swatches_shape %}
{% assign swatches_option_trigger = settings.swatches_swatch_trigger %}
{% assign swatches_option_style = settings.swatches_option_style %}
{% assign swatches_product_page_size = settings.swatches_product_page_size %}
{% assign swatches_custom_colors = settings.swatches_custom_colors %}
{% assign select_main_classes = 'form-options' %}
{% assign select_classes = 'form-field form-options' %}
{% assign input_select_wrapper_classes = 'form-field-select-wrapper' %}
{% assign input_select_classes = 'form-field-input form-field-select' %}
{% assign input_select_label_classes = 'form-field-title' %}
{% assign radios_classes = 'form-options form-options-selectable-boxes' %}
{% assign option_header_classes = 'option-header' %}
{% assign option_name_classes = 'option-name' %}
{% assign option_values_classes = 'option-values' %}
{% assign option_value_classes = 'option-value' %}
{% assign option_value_label_classes = 'option-value-label' %}
{% assign option_value_input_classes = 'option-value-input' %}
{% assign option_value_name_classes = 'option-value-name' %}
{% assign swatches_classes = 'form-options form-options-swatches' %}
{% assign option_swatch_wrapper_classes = 'option-value-name option-value-swatch-wrapper' %}
{% assign option_swatch_classes = 'swatch' %}
{% assign option_swatch_inner_classes = 'swatch-inner' %}
{% comment %}Inject @pixelunion/shopify-variants-ui/variants-ui begin{% endcomment %}
{% comment %}
Display variant options for a product
@param product
@param selected_variant
@param style
@param enable_swatches
@param swatches_shape
@param swatches_option_trigger
@param swatches_option_style
@param swatches_product_page_size
@param swatch_colors
@param select_main_classes
@param select_classes
@param input_select_wrapper_classes
@param input_select_classes
@param input_select_label_classes
@param input_select_chevron_classes
@param radios_classes
@param option_header_classes
@param option_name_classes
@param option_values_classes
@param option_value_classes
@param option_value_label_classes
@param option_value_input_classes
@param option_value_name_classes
@param swatches_classes
@param option_swatch_wrapper_classes
@param option_swatch_classes
@param option_swatch_inner_classes
{% endcomment %}
{% if product.has_only_default_variant %}
<input
class="
variants-ui
variants-ui--default-variant
"
name="id"
type="hidden"
value="{{ product.variants.first.id }}"
data-variants-ui
data-variants
>
{% else %}
{% comment %}Inject @pixelunion/shopify-variants-ui/variants-ui-options begin{% endcomment %}
{% comment %}
Display variant options for a product
@param product
@param selected_variant
@param style
@param enable_swatches
@param swatches_shape
@param swatches_option_trigger
@param swatches_option_style
@param swatches_product_page_size
@param swatch_colors
@param select_main_classes
@param select_classes
@param input_select_wrapper_classes
@param input_select_classes
@param input_select_label_classes
@param input_select_chevron_classes
@param radios_classes
@param option_header_classes
@param option_name_classes
@param option_values_classes
@param option_value_classes
@param option_value_label_classes
@param option_value_input_classes
@param option_value_name_classes
@param swatches_classes
@param option_swatch_wrapper_classes
@param option_swatch_classes
@param option_swatch_inner_classes
{% endcomment %}
{% assign hide_select_a11y = "" %}
{% if style == 'radio' %}
{% assign hide_select_a11y = "tabindex='-1'" %}
{% endif %}
{%- capture form_id -%}{% increment form_id %}{%- endcapture -%}
<div
class="
variants-ui
{%
if enable_swatches
and swatches_shape == 'square'
and swatches_option_style == 'variant_image'
%}
variants-ui--swatches-square
{% endif %}
"
data-variants-ui
>
<select
class="
variants-ui__select-main
{{ select_main_classes }}
"
name="id"
{{ hide_select_a11y }}
data-variants
>
<option
value=""
disabled
{% if selected_variant %}selected{% endif %}
>
{{ 'product.variants.choose_variant' }}
</option>
{% for variant in product.variants %}
<option
{% if selected_variant and selected_variant.id == variant.id %}selected{% endif %}
value="{{ variant.id }}"
{% unless variant.available %}disabled{% endunless %}
data-variant-id="{{ variant.id }}"
data-sku="{{ variant.sku }}"
>
<!-- Bold: Memberships (product price) -->
{% include 'bold-memberships-price' %}
{% if bold_hide_item == false %}
{{ variant.title }} - {{ variant.price | money }}
{% endif %}
<!-- end Bold code -->
</option>
{% endfor %}
</select>
{% for option in product.options_with_values %}
{% assign option_index = forloop.index0 %}
{% assign show_swatches = false %}
{% if enable_swatches %}
{%- assign swatches_option_trigger = swatches_option_trigger | strip | downcase -%}
{%- assign option_name = option.name | strip | downcase -%}
{% if option_name == swatches_option_trigger %}
{% assign show_swatches = true %}
{% assign swatch_option_key = 'option' | append: forloop.index %}
{% endif %}
{% endif %}
{% if style == 'select' and show_swatches == false %}
{% comment %}Inject @pixelunion/shopify-variants-ui/variants-ui-select begin{% endcomment %}
{% comment %}
Display variant options for a product
@param selected_variant
@param select_classes
@param input_select_wrapper_classes
@param input_select_classes
@param input_select_label_classes
@param input_select_chevron_classes
{% endcomment %}
<div
class="
variants-ui__select
{% if forloop.first %}variants-ui__select--first{% endif %}
{% if forloop.last %}variants-ui__select--last{% endif %}
{{ select_classes }}
"
>
<div
class="
variants-ui__input-select-wrapper
{{ input_select_wrapper_classes }}
"
>
<select
id="data-variant-option-{{ option_index }}"
class="
variants-ui__input-select
{{ input_select_classes }}
"
data-variant-option
data-variant-option-index="{{ option_index }}"
data-variant-option-chosen-value="{% if selected_variant %}{{ option.selected_value }}{% else %}false{% endif %}"
>
{% unless selected_variant %}
<option
value=""
disabled
selected
data-variant-option-value-wrapper
data-variant-option-value
data-variant-option-value-index="{{ option_index }}"
>
{{ 'product.variants.choose_option' | t: option: option.name }}
</option>
{% endunless %}
{% for value in option.values %}
<option
value="{{ value | escape }}"
{% if selected_variant and option.selected_value == value %}selected{% endif %}
data-variant-option-value-wrapper
data-variant-option-value
data-variant-option-value-index="{{ option_index }}"
>
{{ value }}
</option>
{% endfor %}
</select>
<label
class="
variants-ui__input-select-label
{{ input_select_label_classes }}
"
for="data-variant-option-{{ forloop.index0 }}"
data-variant-option-name="{{ option.name }}"
data-variant-option-choose-name="{{ 'product.variants.choose_option' | t: option: option.name }}"
>
{% if selected_variant %}
{{ option.name }}
{% else %}
{{ 'product.variants.choose_option' | t: option: option.name }}
{% endif %}
</label>
<div
class="
variants-ui__input-select-chevron
{{ input_select_chevron_classes }}
"
>
<svg
aria-hidden="true"
focusable="false"
role="presentation"
width="8"
height="6"
viewBox="0 0 8 6"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M4 4.5L7 1.5" stroke="currentColor" stroke-width="1.25" stroke-linecap="square"/>
<path d="M4 4.5L1 1.5" stroke="currentColor" stroke-width="1.25" stroke-linecap="square"/>
</svg>
</div>
</div>
</div>
{% comment %}Inject @pixelunion/shopify-variants-ui/variants-ui-select end{% endcomment %}
{% elsif style == 'radio' or show_swatches == true %}
{% comment %}Inject @pixelunion/shopify-variants-ui/variants-ui-radios begin{% endcomment %}
{% comment %}
Display variant options for a product
@param selected_variant
@param radios_classes
@param option_header_classes
@param option_name_classes
@param option_values_classes
@param option_value_classes
@param option_value_label_classes
@param option_value_input_classes
@param option_value_name_classes
@param swatches_classes
@param option_swatch_wrapper_classes
@param option_swatch_classes
@param option_swatch_inner_classes
{% endcomment %}
<fieldset
class="
{% unless show_swatches %}
variants-ui__radios
{% if forloop.first %}variants-ui__radios--first{% endif %}
{% if forloop.last %}variants-ui__radios--last{% endif %}
{{ radios_classes }}
{% else %}
variants-ui__swatches
{{ swatches_classes }}
{% if forloop.first %}variants-ui__swatches--first{% endif %}
{% if forloop.last %}variants-ui__swatches--last{% endif %}
{% endunless %}
"
>
<legend
class="
variants-ui__option-header
{{ option_header_classes }}
"
>
<span
class="
variants-ui__option-name
{{ option_name_classes }}
"
data-variant-option-name="{{ 'product.variants.chosen_option_html' | t: option: option.name, value: option.selected_value | escape }}"
data-variant-option-choose-name="{{ 'product.variants.choose_option' | t: option: option.name }}"
>
{% if selected_variant %}
{{ 'product.variants.chosen_option_html' | t: option: option.name, value: option.selected_value }}
{% else %}
{{ 'product.variants.choose_option' | t: option: option.name }}
{% endif %}
</span>
</legend>
<div
class="
variants-ui__option-values
{{ option_values_classes }}
"
data-variant-option
data-variant-option-index="{{ option_index }}"
data-variant-option-chosen-value="{% if selected_variant %}{{ option.selected_value }}{% else %}false{% endif %}"
>
{% for value in option.values %}
<div
class="
variants-ui__option-value
{% if selected_variant and option.selected_value == value %}variants-ui__option-value--selected{% endif %}
{{ option_value_classes }}
"
data-variant-option-value-wrapper
>
<label
class="
variants-ui__option-value-label
{{ option_value_label_classes }}
"
for="{{ section.id }}-form-{{ form_id }}-variant-option-{{ option_index }}-{{ forloop.index0 }}"
>
<input
id="{{ section.id }}-form-{{ form_id }}-variant-option-{{ option_index }}-{{ forloop.index0 }}"
class="
variants-ui__option-value-input
{{ option_value_input_classes }}
"
type="radio"
name="{{ option.name | url_encode }}"
value="{{ value | escape }}"
tabindex="0"
aria-label="{{ value | escape }}"
{% if selected_variant and option.selected_value == value %}checked{% endif %}
data-variant-option-value
data-variant-option-value-index="{{ option_index }}"
>
<span
class="
{% unless show_swatches %}
variants-ui__option-value-name
{{ option_value_name_classes }}
{% else %}
variants-ui__option-swatch-wrapper
{{ option_swatch_wrapper_classes }}
{% endunless %}
"
tabindex="-1"
{% if show_swatches %}
data-swatch-tooltip="{{ value | escape }}"
{% endif %}
>
{% unless show_swatches %}
{{ value }}
{% else %}
{% assign use_variant_images = false %}
{% if swatches_option_style == 'variant_image' %}
{% assign use_variant_images = true %}
{% endif %}
{% assign use_aspect_ratio = false %}
{% if swatches_shape == 'square' %}
{% assign use_aspect_ratio = true %}
{% endif %}
{% capture swatch_styles %}
{% assign color_name = value %}
{% assign use_variant_images = use_variant_images %}
{% assign swatch_product = product %}
{% assign swatch_option_key = swatch_option_key %}
{% assign swatch_size = swatches_product_page_size %}
{% assign use_aspect_ratio = use_aspect_ratio %}
{% comment %}Inject @pixelunion/shopify-variants-ui/variants-ui-swatch-styles begin{% endcomment %}
{%- capture _ -%}
{% comment %}
@param color_name {string}
Color name for which to find a suitable background
@param use_variant_images {boolean} [Optional - required if using variant images]
Use variant images as pattern images instead of the standard manual pattern images.
@param swatch_product {product} [Optional - required if using variant images]
Product from which to use variant images.
@param swatch_option_key {string} [Optional - required if using variant images]
option that contains swatch variants, one of `option1`, `option2`, or `option3`.
@param swatch_size {integer} [Optional - required if using variant images]
Pixel height of swatch.
@param use_aspect_ratio {boolean} [Optional]
Set swatch aspect ratio based on variant image?
Outputs a string CSS background properties
{% endcomment %}
{%- assign use_variant_images = use_variant_images | default: false -%}
{%- assign swatch_product = swatch_product | default: blank -%}
{%- assign swatch_option_key = swatch_option_key | default: blank -%}
{%- assign swatch_size = swatch_size | default: 32 -%}
{%- assign use_aspect_ratio = use_aspect_ratio | default: true, allow_false: true -%}
{%- assign swatch_bg_color = blank -%}
{%- assign swatch_bg_image = blank -%}
{%- assign swatch_bg_variables = blank -%}
{%- assign swatch_colors = swatches_custom_colors -%}
{% comment %} First look for a defined custom color {% endcomment %}
{%- assign swatch_colors = swatch_colors | newline_to_br | strip_newlines | split: '<br />' -%}
{%- assign swatch_search_color = color_name | downcase -%}
{%- for swatch_option in swatch_colors -%}
{%- assign swatch_color = swatch_option | split: ':' -%}
{%- assign swatch_color_name = swatch_color[0] | strip | downcase -%}
{%- assign swatch_color_value = swatch_color[1] | strip -%}
{%- if swatch_search_color == swatch_color_name -%}
{% capture swatch_bg_color %}
background-color: {{ swatch_color_value }};
{% endcapture %}
{%- break -%}
{%- endif -%}
{%- endfor -%}
{% comment %} Otherwise default to the raw color name, which will either be a
valid named HTML color and displayed as such, or will be ignored by the browser. {% endcomment %}
{%- if swatch_bg_color == blank -%}
{% capture swatch_bg_color %}
background-color: {{ color_name | handleize }};
{% endcapture %}
{%- endif -%}
{%- if use_variant_images and swatch_product != blank and swatch_option_key != blank -%}
{% for variant in swatch_product.variants %}
{% assign option_value_downcased = variant[swatch_option_key] | downcase %}
{% if option_value_downcased == swatch_search_color %}
{% if variant.image != blank %}
{%- assign swatch_image_resolution = swatch_size | times: 2 | prepend: 'x' -%}
{%- assign swatch_file_url = variant.image | img_url: swatch_image_resolution, crop: 'center' -%}
{%- assign swatch_height = swatch_size | times: 1.0 -%}
{%- assign swatch_width = swatch_size | times: 1.0 -%}
{%- if use_aspect_ratio -%}
{%- assign swatch_width = swatch_size | times: variant.image.aspect_ratio -%}
{%- endif -%}
{%- capture swatch_bg_image -%}
background-image: url('{{- swatch_file_url -}}');
width: {{ swatch_width }}px;
border: 0; {% comment %}Variant image swatches don't get inset borders{% endcomment %}
{%- endcapture -%}
{%- assign selected_border_offset = 2 | times: 2 -%}
{%- capture swatch_bg_variables -%}
--swatch-inner-transform-x: {{ swatch_width | minus: selected_border_offset | divided_by: swatch_width }};
--swatch-inner-transform-y: {{ swatch_height | minus: selected_border_offset | divided_by: swatch_height }};
{%- endcapture -%}
{% endif %}
{%- break -%}
{% endif %}
{% endfor %}
{%- else -%}
{% comment %} Then look for a pattern image. {% endcomment %}
{% assign swatch_file_name = color_name | downcase | handleize | append: '.png' %}
{%- if images[swatch_file_name] != blank -%}
{%- capture swatch_image_resolution -%}{{ swatch_size | times: 2 }}x{{ swatch_size | times: 2 }}{%- endcapture -%}
{%- assign swatch_file_url = swatch_file_name | file_img_url: swatch_image_resolution, crop: 'center' -%}
{%- capture swatch_bg_image -%}
background-image: url('{{- swatch_file_url -}}');
{%- endcapture -%}
{%- endif -%}
{%- endif -%}
{%- endcapture -%}
{{ swatch_bg_color }}
{{ swatch_bg_image }}
/* variables */
{{ swatch_bg_variables }}
{% comment %}Inject @pixelunion/shopify-variants-ui/variants-ui-swatch-styles end{% endcomment %}
{% endcapture %}
<div
class="
variants-ui__option-swatch
{{ option_swatch_classes }}
"
style="{{ swatch_styles | split: '/* variables */' | last | remove: '/* variables */' }}"
>
<div
class="
variants-ui__option-swatch-inner
{{ option_swatch_inner_classes }}
"
style="{{ swatch_styles | split: '/* variables */' | first }}"
>
</div>
</div>
{% endunless %}
</span>
</label>
</div>
{% endfor %}
</div>
</fieldset>
{% comment %}Inject @pixelunion/shopify-variants-ui/variants-ui-radios end{% endcomment %}
{% endif %}
{% endfor %}
</div>
{% comment %}Inject @pixelunion/shopify-variants-ui/variants-ui-options end{% endcomment %}
{% endif %}
{% comment %}Inject @pixelunion/shopify-variants-ui/variants-ui end{% endcomment %}
<div class="product-form--atc">
<div class="product-form--atc-qty form-fields--qty" data-quantity-wrapper>
<div class="form-field form-field--qty-select">
<div class="form-field-select-wrapper">
<select
id="product-quantity-select"
class="form-field-input form-field-select"
aria-label="{{ 'general.general.quantity' | t }}"
data-quantity-select
>
{% for i in (1..9) %}
<option {% if i == 1 %}selected {% endif %}value="{{ i }}">
{{ i }}
</option>
{% endfor %}
<option value="10+">
10+
</option>
</select>
<label
for="product-quantity-select"
class="form-field-title"
>
{{ 'general.general.quantity' | t }}
</label>
{% render 'icon-chevron-down-small' %}
</div>
</div>
<div class="form-field form-field--qty-input hidden">
<input
id="product-quantity-input"
class="form-field-input form-field-number form-field-filled"
value="1"
name="quantity"
type="text"
pattern="\d*"
aria-label="{{ 'general.general.quantity' | t }}"
data-quantity-input
>
<label
for="product-quantity-input"
class="form-field-title"
>
{{ 'general.general.quantity' | t }}
</label>
</div>
</div>
<!-- Bold: Memberships (cadd to cart) -->
{% include 'bold-memberships-addtocart' %}
<button
class="product-form--atc-button {% if selected_variant and selected_variant.available == false %}disabled{% endif %}"
type="submit"
{% if selected_variant and selected_variant.available == false %}disabled{% endif %}
data-product-atc
>
<span class="atc-button--text">
{% unless selected_variant and selected_variant.available == false %}
{{ 'product.buttons.add_to_cart' | t }}
{% else %}
{{ 'product.buttons.sold_out' | t }}
{% endunless %}
</span>
<span class="atc-button--icon">
{%- render 'icon-spinner' -%}
</span>
</button>
<!-- end Bold code -->
</div>
{% if product_smart_buttons or quickshop_smart_buttons %}
{% if product.metafields.product_customizer == empty %}{{ form | payment_button }}{% endif %}
{% endif %}
<div class="surface-pick-up" data-surface-pick-up></div>
{% endform %}
Thanks!
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Replies 16 (16)
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
08-02-2021
09:36 AM
@Ray89
hey It's your theme issue.
I can help you to fix it.
if you are interested please contact us.
Thank you.
banned
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
08-02-2021
09:47 AM
some liquid error in your product templete file please share your theme zip file.
Thanks!
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
08-02-2021
09:53 AM
<!doctype html>
<html class="no-js no-touch" lang="{{ shop.locale }}">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<link rel="preconnect" href="https://cdn.shopify.com">
<link rel="preconnect" href="https://fonts.shopifycdn.com">
<link rel="preconnect" href="https://v.shopify.com">
<link rel="preconnect" href="https://cdn.shopifycloud.com">
<title>
{{- page_title -}}
{%- if current_tags -%}
{% capture cat_array %}{%- render 'advanced-tag-loop' -%}{% endcapture %}
{% assign cat_array = cat_array | split: '|' %}
{% assign title_tags = '' %}
{% assign meta_tags = current_tags | join: ', ' %}
{%- for tag in current_tags -%}
{% assign is_advanced_tag = false %}
{% assign cat = tag | split: '_' | first %}
{%- unless cat == tag -%}
{%- if cat_array contains cat -%}
{% assign is_advanced_tag = true %}
{% assign title_tags = title_tags | append: ', ' | append: tag | replace_first: '_', ': ' %}
{%- endif -%}
{%- endunless -%}
{%- unless is_advanced_tag -%}
{% assign title_tags = title_tags | append: ', ' | append: tag %}
{%- endunless -%}
{%- endfor -%}
{{ 'general.title.tags' | t: tags: title_tags | remove_first: ', ' }}
{%- endif -%}
{%- if current_page != 1 -%}
{{- 'general.title.page' | t: page: current_page -}}
{%- endif -%}
{%- unless page_title contains shop.name -%}
{{- 'general.title.shop' | t: shop: shop.name -}}
{%- endunless -%}
</title>
{% if page_description != blank %}
<meta name="description" content="{{ page_description | escape }}">
{% endif %}
{% render 'favicon' %}
{% if template contains 'collection' and current_tags %}
<meta name="robots" content="noindex" />
<link rel="canonical" href="{{ shop.url }}{{ collection.url }}" />
{% else %}
<link rel="canonical" href="{{ canonical_url }}" />
{% endif %}
<meta name="viewport" content="width=device-width">
{% assign twitter_handle = settings.social_twitter | split: 'twitter.com/' | last %}
{%
render 'social-meta-tags',
twitter_handle: twitter_handle
%}
<link rel="preload" href="{{ settings.type_menu | font_url }}" as="font" crossorigin="anonymous">
<link rel="preload" as="style" href="{{ 'theme.css' | asset_url }}">
{{ content_for_header }}
{{ 'theme.css' | asset_url | stylesheet_tag }}
{% comment %}Inject theme-object begin{% endcomment %}
<script>
window.Theme = window.Theme || {};
window.Theme.routes = {
"root_url": "{{ routes.root_url }}",
"account_url": "{{ routes.account_url }}",
"account_login_url": "{{ routes.account_login_url }}",
"account_logout_url": "{{ routes.account_logout_url }}",
"account_register_url": "{{ routes.account_register_url }}",
"account_addresses_url": "{{ routes.account_addresses_url }}",
"collections_url": "{{ routes.collections_url }}",
"all_products_collection_url": "{{ routes.all_products_collection_url }}",
"search_url": "{{ routes.search_url }}",
"cart_url": "{{ routes.cart_url }}",
"cart_add_url": "{{ routes.cart_add_url }}",
"cart_change_url": "{{ routes.cart_change_url }}",
"cart_clear_url": "{{ routes.cart_clear_url }}",
"product_recommendations_url": "{{ routes.product_recommendations_url }}",
};
</script>
{% comment %}Inject theme-object end{% endcomment %}
{{ 'shopstorm-apps.scss.css' | asset_url | stylesheet_tag }}
{% render 'shopstorm-scripttags' %}
<script>
window.mlvedaShopCurrency = "{{ shop.currency }}";
window.shopCurrency = "{{ shop.currency }}";
window.supported_currencies = "{{ settings.mlvedaACS_supportedCurrencies }}";
</script></head>
<body class="template-{{ template.name }}" data-instant-allow-query-string {% if settings.reduce_animations %}data-reduce-animations{% endif %}>
<!-- Bold: Memberships -->
{% if customer %}
<div class="bold_customer_id" hidden>{{ customer.id }}</div>
{% endif %}
<!-- end Bold code -->
<script>
document.documentElement.className=document.documentElement.className.replace(/\bno-js\b/,'js');
if(window.Shopify&&window.Shopify.designMode)document.documentElement.className+=' in-theme-editor';
if(('ontouchstart' in window)||window.DocumentTouch&&document instanceof DocumentTouch)document.documentElement.className=document.documentElement.className.replace(/\bno-touch\b/,'has-touch');
</script>
<a class="skip-to-main" href="#site-main">{{ 'general.accessibility.skip_to_content' | t }}</a>
{% section 'static-announcement' %}
<header
class="site-header site-header-nav--open"
role="banner"
data-site-header
>
{% section 'static-header' %}
</header>
<div class="intersection-target" data-header-intersection-target></div>
<div class="site-main-dimmer" data-site-main-dimmer></div>
<main id="site-main" class="site-main" aria-label="Main content" tabindex="-1">
{{ content_for_layout }}
</main>
{% section 'static-footer' %}
{% comment %}
Below are various templates used in JavaScript
{% endcomment %}
<div style="display: none;" aria-hidden="true" data-templates>
{% comment %}Inject message-banner begin{% endcomment %}
<div
class="message-banner--container"
role="alert"
data-message-banner
>
<div class="message-banner--outer">
<div class="message-banner--inner" data-message-banner-content></div>
<button
class="message-banner--close"
type="button"
aria-label="{{ 'general.accessibility.close' | t }}"
data-message-banner-close
>
{%- render 'icon-menu-close' -%}
</button>
</div>
</div>
{% comment %}Inject message-banner end{% endcomment %}
{% comment %}Inject atc-banner begin{% endcomment %}
<section class="atc-banner--container" role="log" data-atc-banner>
<div class="atc-banner--outer">
<div class="atc-banner--inner">
<div class="atc-banner--product">
<h2 class="atc-banner--product-title">
<span class="atc-banner--product-title--icon">
{%- render 'icon-checkmark' -%}
</span>
{{ 'add_to_cart_banner.general.product_added' | t }}
</h2>
<div class="atc--product">
<div class="atc--product-image" data-atc-banner-product-image>
{{ 'image' | placeholder_svg_tag: 'placeholder--image' }}
</div>
<div class="atc--product-details">
<h2 class="atc--product-details--title" data-atc-banner-product-title></h2>
<span class="atc--product-details--options" data-atc-banner-product-options></span>
<span class="atc--product-details--price">
<span class="atc--product-details--price-quantity" data-atc-banner-product-price-quantity></span>
<span class="atc--product-details--price-value money" data-atc-banner-product-price-value></span>
<span class="atc--product-details--price-discounted money" data-atc-banner-product-price-discounted></span>
<span class="atc--product-details--unit-price hidden" data-atc-banner-unit-price>
{{ 'product_price.price.price_per_unit_html' | t: total_quantity: '** total_quantity **', unit_price: '** unit_price **', unit_measure: '** unit_measure **' }}
</span>
</span>
<ul class="discount-list" data-atc-banner-product-discounts>
<li class="discount-list-item">
{% render 'icon-library', id: 'icon-sale-tag' %}
<span class="discount-title"></span>
(-<span class="money discount-amount"></span>)
</li>
</ul>
</div>
</div>
</div>
<div class="atc-banner--cart">
<div class="atc-banner--cart-subtotal">
<span class="atc-subtotal--label">
{{ 'add_to_cart_banner.general.sub_total' | t }}
</span>
<span class="atc-subtotal--price money" data-atc-banner-cart-subtotal></span>
</div>
<footer class="atc-banner--cart-footer">
<a class="button-secondary atc-button--viewcart" href="{{ routes.cart_url }}" data-atc-banner-cart-button>
{{ 'add_to_cart_banner.general.view_cart_html' | t: count: '<span></span>' }}
</a>
<form
action="{{ routes.cart_url }}"
method="post"
aria-label="cart checkout"
>
<button class="button-primary atc-button--checkout" type="submit" name="checkout">
{% if settings.enable_checkout_lock_icon %}
{% render 'icon-checkout-lock' %}
{% endif %}
<span>{{ 'add_to_cart_banner.general.checkout' | t }}</span>
</button>
</form>
</footer>
</div>
</div>
<button
class="atc-banner--close"
type="button"
aria-label="{{ 'general.accessibility.close' | t }}"
data-atc-banner-close
>
{%- render 'icon-menu-close' -%}
</button>
</div>
</section>
{% comment %}Inject atc-banner end{% endcomment %}
</div>
{% comment %}
Modal container, used on Collections, Password, and QuickShop
{% endcomment %}
{% comment %}Inject modal begin{% endcomment %}
<div class="modal" data-modal-container aria-label="modal window" data-trap-focus>
<div class="modal-inner" data-modal-inner>
<button
class="modal-close"
type="button"
aria-label="{{ 'general.accessibility.close' | t }}"
data-modal-close
>
{% render 'icon-menu-close' %}
</button>
<div class="modal-content" data-modal-content></div>
</div>
</div>
<div class="modal-1" data-modal-container-1 aria-label="modal window">
<div class="modal-inner" data-modal-inner>
<button
class="modal-close"
type="button"
aria-label="{{ 'general.accessibility.close' | t }}"
data-modal-1-close
>
{% render 'icon-menu-close' %}
</button>
<div class="modal-content" data-modal-content></div>
</div>
</div>
{% comment %}Inject modal end{% endcomment %}
{% comment %}
This is the PhotoSwipe dialog which needs to be in the base page
{% endcomment %}
{% comment %}Inject product-gallery-zoom begin{% endcomment %}
{% comment %} Root element of PhotoSwipe. Must have class pswp. {% endcomment %}
<div
class="pswp"
tabindex="-1"
role="dialog"
aria-hidden="true"
aria-label="{{ 'general.accessibility.product_zoom_dialog' | t }}"
data-photoswipe
>
{% comment %} Background of PhotoSwipe.
It's a separate element as animating opacity is faster than rgba(). {% endcomment %}
<div class="pswp__bg"></div>
{% comment %} Slides wrapper with overflow:hidden. {% endcomment %}
<div class="pswp__scroll-wrap">
{% comment %} Container that holds slides.
PhotoSwipe keeps only 3 of them in the DOM to save memory.
Don't modify these 3 pswp__item elements, data is added later on. {% endcomment %}
<div class="pswp__container" aria-hidden="true">
<div class="pswp__item"></div>
<div class="pswp__item"></div>
<div class="pswp__item"></div>
</div>
{% comment %} Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. {% endcomment %}
<div class="pswp__ui pswp__ui--hidden">
<div class="pswp__top-bar">
{% comment %} Controls are self-explanatory. Order can be changed. {% endcomment %}
<div class="pswp__counter"></div>
<button class="pswp__button pswp__button--close" title="{{ 'general.accessibility.close' | t }}">
<span tabindex="-1">
{% render 'icon-library', id: 'icon-close' %}
</span>
</button>
<button class="pswp__button pswp__button--share" title="Share"></button>
<button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
<button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
{% comment %} Preloader demo https://codepen.io/dimsemenov/pen/yyBWoR {% endcomment %}
{% comment %} element will get class pswp__preloader--active when preloader is running {% endcomment %}
<div class="pswp__preloader">
<div class="pswp__preloader__icn">
<div class="pswp__preloader__cut">
<div class="pswp__preloader__donut"></div>
</div>
</div>
</div>
</div>
<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
<div class="pswp__share-tooltip"></div>
</div>
<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
</button>
<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
</button>
<div class="pswp__caption">
<div class="pswp__caption__center"></div>
</div>
</div>
</div>
<div class="product-zoom--thumbnails" data-photoswipe-thumbs>
<button
class="gallery-navigation--scroll-button scroll-left"
aria-label="Scroll thumbnails left"
data-gallery-scroll-button
>
{% render 'icon-chevron-down' %}
</button>
<button
class="gallery-navigation--scroll-button scroll-right"
aria-label="Scroll thumbnails right"
data-gallery-scroll-button
>
{% render 'icon-chevron-down' %}
</button>
<div class="product-zoom--thumb-scroller" data-photoswipe-thumb-scroller></div>
</div>
</div>
{% comment %}Inject product-gallery-zoom end{% endcomment %}
{%- if template contains 'customer' -%}
{{ 'shopify_common.js' | shopify_asset_url | script_tag }}
{{ 'customer_area.js' | shopify_asset_url | script_tag }}
{%- endif -%}
{% unless settings.reduce_animations %}
<script>
(
function () {
var classes = {
block: 'pxu-lia-block',
element: 'pxu-lia-element',
};
document
.querySelectorAll('[type="application/pxs-animation-mapping+json"]')
.forEach(function (mappingEl) {
const section = mappingEl.parentNode;
try {
const mapping = JSON.parse(mappingEl.innerHTML);
mapping.elements.forEach(function (elementSelector) {
section
.querySelectorAll(elementSelector)
.forEach(function (element) { element.classList.add(classes.element); });
});
mapping.blocks.forEach(function (blockSelector) {
section
.querySelectorAll(blockSelector)
.forEach(function (block) { block.classList.add(classes.block); });
});
} catch (error) {
console.warn('Unable to parse animation mapping', mappingEl, error);
}
});
}
)()
</script>
{% endunless %}
<script
src="{{ 'empire.js' | asset_url }}"
data-scripts
data-shopify-api-url="{{ 'api.jquery.js' | shopify_asset_url }}"
data-shopify-countries="/services/javascripts/countries.js"
data-shopify-common="{{ 'shopify_common.js' | shopify_asset_url }}"
data-shopify-cart="{{ 'jquery.cart.js' | asset_url }}"
data-pxu-polyfills="{{ 'polyfills.js' | asset_url }}"
>
</script>
{% render 'structured-data' %}
<script>
(function () {
function handleFirstTab(e) {
if (e.keyCode === 9) { // the "I am a keyboard user" key
document.body.classList.add('user-is-tabbing');
window.removeEventListener('keydown', handleFirstTab);
}
}
window.addEventListener('keydown', handleFirstTab);
})();
</script>
{% unless settings.reduce_animations %}
{{ 'ripple.css' | asset_url | stylesheet_tag }}
{% endunless %}
<script
src="{{ 'instantPage.min.js' | asset_url }}"
type="module"
defer
>
</script>
{% render 'product-customizer-asw' %}
{% include 'mlveda-currencies-switcher' %}{% include 'mlveda-currencies' %}{% include 'mlveda-flag' %}{% include 'mlveda-currencies-style' %}<!-- WPD Start -->
{% if customer.tags.size > 0 and template != 'cart' %}
<script>
document.addEventListener('DOMContentLoaded', function() {
let checkoutbtninterval = setInterval(function(){
var x=document.querySelectorAll("input[name='checkout'], button[name='checkout'], input[name='goto_pp'], button[name='goto_pp'], input[name='goto_gc'], button[name='goto_gc'], [href$='checkout']");
var WPD_RedirectToCart = function(e) {
e.stopPropagation();
e.preventDefault();
window.location = '/cart';
};
for (var i = 0; i < x.length; i++) {
x[i].addEventListener('click', WPD_RedirectToCart, false);
}
},500)
});
</script>
{% endif %}
{% if customer.tags.size > 0 and template == 'cart' %}
{% include 'wcp_cart' %}
{% endif %}
<!-- WPD End -->
</body>
</html>
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
08-02-2021
09:56 AM
Please comment following code and check your site
{% if customer.tags.size > 0 and template == 'cart' %}
{% include 'wcp_cart' %}
{% endif %}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
08-02-2021
10:12 AM
Please share your theme zip file .
Means download your theme files and send to me .
Thanks!
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
08-02-2021
10:22 AM
this is single file .
Please check this url for theme download
https://avada.io/shopify/docs/how-download-themes-shopify.html
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
08-02-2021
10:54 AM
@dmwwebartisan Please check. TY
https://fullyamped.myshopify.com/admin/files/b62f1a87c816ffa7094598ab6170b206/theme_export__www-fullyamped-com-site-that-has-issues__02AUG2021-0718am.zip/download- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
08-02-2021
11:16 AM
This is admin url not working without login please download you and send to me .zip file
https://fullyamped.myshopify.com/admin/files/b62f1a87c816ffa7094598ab6170b206/theme_export__www-fullyamped-com-site-that-has-issues__02AUG2021-0718am.zip/downloadThanks!
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
08-02-2021
11:22 AM
@dmwwebartisan Please check
https://drive.google.com/drive/folders/1QZ0u5WM2-s3SZuCij-wxqMIAmcIPUp46?usp=sharing
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
08-02-2021
01:00 PM
@Ray89 - can you please add me as collaborator? I will check code and fix the issue
You are welcome to contact me - suyash.patankar@gmail.com, My timezone is GMT+5:30,to build shopify pages use pagefly
Support me 🙂
Support me 🙂
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
08-02-2021
11:01 PM
This is an accepted solution.
Please backup your Snippets/ product-form.liquid file code and replace following code
{% comment %}
Product form
@param product
@param selected_variant
{% endcomment %}
{% if is_product_modal and settings.quickshop_show_dcb %}
{% assign quickshop_smart_buttons = true %}
{% endif %}
{% if is_product_modal == false and section.settings.show_dcb %}
{% assign product_smart_buttons = true %}
{% endif %}
{% if selected_variant.available == false %}
{% assign quickshop_smart_buttons = false %}
{% assign product_smart_buttons = false %}
{% endif %}
{% assign product_form_class = '' %}
{% if product_smart_buttons or quickshop_smart_buttons %}
{% assign product_form_class = 'smart-payment-enabled' %}
{% endif %}
{% form 'product', product, class: product_form_class, data-product-form: '' %}
{% comment %}
Display variant options for a product
@param product
@param selected_variant
@param style
@param enable_swatches
@param swatches_shape
@param swatches_option_trigger
@param swatches_option_style
@param swatches_product_page_size
@param swatch_colors
@param select_main_classes
@param select_classes
@param input_select_wrapper_classes
@param input_select_classes
@param input_select_label_classes
@param input_select_chevron_classes
@param radios_classes
@param option_header_classes
@param option_name_classes
@param option_values_classes
@param option_value_classes
@param option_value_label_classes
@param option_value_input_classes
@param option_value_name_classes
@param swatches_classes
@param option_swatch_wrapper_classes
@param option_swatch_classes
@param option_swatch_inner_classes
{% endcomment %}
{% assign product = product %}
{% assign selected_variant = selected_variant %}
{% assign style = settings.product_option_style %}
{% assign enable_swatches = settings.swatches_enable %}
{% assign swatches_shape = settings.swatches_shape %}
{% assign swatches_option_trigger = settings.swatches_swatch_trigger %}
{% assign swatches_option_style = settings.swatches_option_style %}
{% assign swatches_product_page_size = settings.swatches_product_page_size %}
{% assign swatches_custom_colors = settings.swatches_custom_colors %}
{% assign select_main_classes = 'form-options' %}
{% assign select_classes = 'form-field form-options' %}
{% assign input_select_wrapper_classes = 'form-field-select-wrapper' %}
{% assign input_select_classes = 'form-field-input form-field-select' %}
{% assign input_select_label_classes = 'form-field-title' %}
{% assign radios_classes = 'form-options form-options-selectable-boxes' %}
{% assign option_header_classes = 'option-header' %}
{% assign option_name_classes = 'option-name' %}
{% assign option_values_classes = 'option-values' %}
{% assign option_value_classes = 'option-value' %}
{% assign option_value_label_classes = 'option-value-label' %}
{% assign option_value_input_classes = 'option-value-input' %}
{% assign option_value_name_classes = 'option-value-name' %}
{% assign swatches_classes = 'form-options form-options-swatches' %}
{% assign option_swatch_wrapper_classes = 'option-value-name option-value-swatch-wrapper' %}
{% assign option_swatch_classes = 'swatch' %}
{% assign option_swatch_inner_classes = 'swatch-inner' %}
{% comment %}Inject @pixelunion/shopify-variants-ui/variants-ui begin{% endcomment %}
{% comment %}
Display variant options for a product
@param product
@param selected_variant
@param style
@param enable_swatches
@param swatches_shape
@param swatches_option_trigger
@param swatches_option_style
@param swatches_product_page_size
@param swatch_colors
@param select_main_classes
@param select_classes
@param input_select_wrapper_classes
@param input_select_classes
@param input_select_label_classes
@param input_select_chevron_classes
@param radios_classes
@param option_header_classes
@param option_name_classes
@param option_values_classes
@param option_value_classes
@param option_value_label_classes
@param option_value_input_classes
@param option_value_name_classes
@param swatches_classes
@param option_swatch_wrapper_classes
@param option_swatch_classes
@param option_swatch_inner_classes
{% endcomment %}
{% if product.has_only_default_variant %}
<input
class="
variants-ui
variants-ui--default-variant
"
name="id"
type="hidden"
value="{{ product.variants.first.id }}"
data-variants-ui
data-variants
>
{% else %}
{% comment %}Inject @pixelunion/shopify-variants-ui/variants-ui-options begin{% endcomment %}
{% comment %}
Display variant options for a product
@param product
@param selected_variant
@param style
@param enable_swatches
@param swatches_shape
@param swatches_option_trigger
@param swatches_option_style
@param swatches_product_page_size
@param swatch_colors
@param select_main_classes
@param select_classes
@param input_select_wrapper_classes
@param input_select_classes
@param input_select_label_classes
@param input_select_chevron_classes
@param radios_classes
@param option_header_classes
@param option_name_classes
@param option_values_classes
@param option_value_classes
@param option_value_label_classes
@param option_value_input_classes
@param option_value_name_classes
@param swatches_classes
@param option_swatch_wrapper_classes
@param option_swatch_classes
@param option_swatch_inner_classes
{% endcomment %}
{% assign hide_select_a11y = "" %}
{% if style == 'radio' %}
{% assign hide_select_a11y = "tabindex='-1'" %}
{% endif %}
{%- capture form_id -%}{% increment form_id %}{%- endcapture -%}
<div
class="
variants-ui
{%
if enable_swatches
and swatches_shape == 'square'
and swatches_option_style == 'variant_image'
%}
variants-ui--swatches-square
{% endif %}
"
data-variants-ui
>
<select
class="
variants-ui__select-main
{{ select_main_classes }}
"
name="id"
{{ hide_select_a11y }}
data-variants
>
<option
value=""
disabled
{% if selected_variant %}selected{% endif %}
>
{{ 'product.variants.choose_variant' }}
</option>
{% for variant in product.variants %}
<option
{% if selected_variant and selected_variant.id == variant.id %}selected{% endif %}
value="{{ variant.id }}"
{% unless variant.available %}disabled{% endunless %}
data-variant-id="{{ variant.id }}"
data-sku="{{ variant.sku }}"
>
<!-- Bold: Memberships (product price) -->
{% include 'bold-memberships-price' %}
{% if bold_hide_item == false %}
{{ variant.title }} - {{ variant.price | money }}
{% endif %}
<!-- end Bold code -->
</option>
{% endfor %}
</select>
{% for option in product.options_with_values %}
{% assign option_index = forloop.index0 %}
{% assign show_swatches = false %}
{% if enable_swatches %}
{%- assign swatches_option_trigger = swatches_option_trigger | strip | downcase -%}
{%- assign option_name = option.name | strip | downcase -%}
{% if option_name == swatches_option_trigger %}
{% assign show_swatches = true %}
{% assign swatch_option_key = 'option' | append: forloop.index %}
{% endif %}
{% endif %}
{% if style == 'select' and show_swatches == false %}
{% comment %}Inject @pixelunion/shopify-variants-ui/variants-ui-select begin{% endcomment %}
{% comment %}
Display variant options for a product
@param selected_variant
@param select_classes
@param input_select_wrapper_classes
@param input_select_classes
@param input_select_label_classes
@param input_select_chevron_classes
{% endcomment %}
<div
class="
variants-ui__select
{% if forloop.first %}variants-ui__select--first{% endif %}
{% if forloop.last %}variants-ui__select--last{% endif %}
{{ select_classes }}
"
>
<div
class="
variants-ui__input-select-wrapper
{{ input_select_wrapper_classes }}
"
>
<select
id="data-variant-option-{{ option_index }}"
class="
variants-ui__input-select
{{ input_select_classes }}
"
data-variant-option
data-variant-option-index="{{ option_index }}"
data-variant-option-chosen-value="{% if selected_variant %}{{ option.selected_value }}{% else %}false{% endif %}"
>
{% unless selected_variant %}
<option
value=""
disabled
selected
data-variant-option-value-wrapper
data-variant-option-value
data-variant-option-value-index="{{ option_index }}"
>
{{ 'product.variants.choose_option' | t: option: option.name }}
</option>
{% endunless %}
{% for value in option.values %}
<option
value="{{ value | escape }}"
{% if selected_variant and option.selected_value == value %}selected{% endif %}
data-variant-option-value-wrapper
data-variant-option-value
data-variant-option-value-index="{{ option_index }}"
>
{{ value }}
</option>
{% endfor %}
</select>
<label
class="
variants-ui__input-select-label
{{ input_select_label_classes }}
"
for="data-variant-option-{{ forloop.index0 }}"
data-variant-option-name="{{ option.name }}"
data-variant-option-choose-name="{{ 'product.variants.choose_option' | t: option: option.name }}"
>
{% if selected_variant %}
{{ option.name }}
{% else %}
{{ 'product.variants.choose_option' | t: option: option.name }}
{% endif %}
</label>
<div
class="
variants-ui__input-select-chevron
{{ input_select_chevron_classes }}
"
>
<svg
aria-hidden="true"
focusable="false"
role="presentation"
width="8"
height="6"
viewBox="0 0 8 6"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M4 4.5L7 1.5" stroke="currentColor" stroke-width="1.25" stroke-linecap="square"/>
<path d="M4 4.5L1 1.5" stroke="currentColor" stroke-width="1.25" stroke-linecap="square"/>
</svg>
</div>
</div>
</div>
{% comment %}Inject @pixelunion/shopify-variants-ui/variants-ui-select end{% endcomment %}
{% elsif style == 'radio' or show_swatches == true %}
{% comment %}Inject @pixelunion/shopify-variants-ui/variants-ui-radios begin{% endcomment %}
{% comment %}
Display variant options for a product
@param selected_variant
@param radios_classes
@param option_header_classes
@param option_name_classes
@param option_values_classes
@param option_value_classes
@param option_value_label_classes
@param option_value_input_classes
@param option_value_name_classes
@param swatches_classes
@param option_swatch_wrapper_classes
@param option_swatch_classes
@param option_swatch_inner_classes
{% endcomment %}
<fieldset
class="
{% unless show_swatches %}
variants-ui__radios
{% if forloop.first %}variants-ui__radios--first{% endif %}
{% if forloop.last %}variants-ui__radios--last{% endif %}
{{ radios_classes }}
{% else %}
variants-ui__swatches
{{ swatches_classes }}
{% if forloop.first %}variants-ui__swatches--first{% endif %}
{% if forloop.last %}variants-ui__swatches--last{% endif %}
{% endunless %}
"
>
<legend
class="
variants-ui__option-header
{{ option_header_classes }}
"
>
<span
class="
variants-ui__option-name
{{ option_name_classes }}
"
data-variant-option-name="{{ 'product.variants.chosen_option_html' | t: option: option.name, value: option.selected_value | escape }}"
data-variant-option-choose-name="{{ 'product.variants.choose_option' | t: option: option.name }}"
>
{% if selected_variant %}
{{ 'product.variants.chosen_option_html' | t: option: option.name, value: option.selected_value }}
{% else %}
{{ 'product.variants.choose_option' | t: option: option.name }}
{% endif %}
</span>
</legend>
<div
class="
variants-ui__option-values
{{ option_values_classes }}
"
data-variant-option
data-variant-option-index="{{ option_index }}"
data-variant-option-chosen-value="{% if selected_variant %}{{ option.selected_value }}{% else %}false{% endif %}"
>
{% for value in option.values %}
<div
class="
variants-ui__option-value
{% if selected_variant and option.selected_value == value %}variants-ui__option-value--selected{% endif %}
{{ option_value_classes }}
"
data-variant-option-value-wrapper
>
<label
class="
variants-ui__option-value-label
{{ option_value_label_classes }}
"
for="{{ section.id }}-form-{{ form_id }}-variant-option-{{ option_index }}-{{ forloop.index0 }}"
>
<input
id="{{ section.id }}-form-{{ form_id }}-variant-option-{{ option_index }}-{{ forloop.index0 }}"
class="
variants-ui__option-value-input
{{ option_value_input_classes }}
"
type="radio"
name="{{ option.name | url_encode }}"
value="{{ value | escape }}"
tabindex="0"
aria-label="{{ value | escape }}"
{% if selected_variant and option.selected_value == value %}checked{% endif %}
data-variant-option-value
data-variant-option-value-index="{{ option_index }}"
>
<span
class="
{% unless show_swatches %}
variants-ui__option-value-name
{{ option_value_name_classes }}
{% else %}
variants-ui__option-swatch-wrapper
{{ option_swatch_wrapper_classes }}
{% endunless %}
"
tabindex="-1"
{% if show_swatches %}
data-swatch-tooltip="{{ value | escape }}"
{% endif %}
>
{% unless show_swatches %}
{{ value }}
{% else %}
{% assign use_variant_images = false %}
{% if swatches_option_style == 'variant_image' %}
{% assign use_variant_images = true %}
{% endif %}
{% assign use_aspect_ratio = false %}
{% if swatches_shape == 'square' %}
{% assign use_aspect_ratio = true %}
{% endif %}
{% capture swatch_styles %}
{% assign color_name = value %}
{% assign use_variant_images = use_variant_images %}
{% assign swatch_product = product %}
{% assign swatch_option_key = swatch_option_key %}
{% assign swatch_size = swatches_product_page_size %}
{% assign use_aspect_ratio = use_aspect_ratio %}
{% comment %}Inject @pixelunion/shopify-variants-ui/variants-ui-swatch-styles begin{% endcomment %}
{%- capture _ -%}
{% comment %}
@param color_name {string}
Color name for which to find a suitable background
@param use_variant_images {boolean} [Optional - required if using variant images]
Use variant images as pattern images instead of the standard manual pattern images.
@param swatch_product {product} [Optional - required if using variant images]
Product from which to use variant images.
@param swatch_option_key {string} [Optional - required if using variant images]
option that contains swatch variants, one of `option1`, `option2`, or `option3`.
@param swatch_size {integer} [Optional - required if using variant images]
Pixel height of swatch.
@param use_aspect_ratio {boolean} [Optional]
Set swatch aspect ratio based on variant image?
Outputs a string CSS background properties
{% endcomment %}
{%- assign use_variant_images = use_variant_images | default: false -%}
{%- assign swatch_product = swatch_product | default: blank -%}
{%- assign swatch_option_key = swatch_option_key | default: blank -%}
{%- assign swatch_size = swatch_size | default: 32 -%}
{%- assign use_aspect_ratio = use_aspect_ratio | default: true, allow_false: true -%}
{%- assign swatch_bg_color = blank -%}
{%- assign swatch_bg_image = blank -%}
{%- assign swatch_bg_variables = blank -%}
{%- assign swatch_colors = swatches_custom_colors -%}
{% comment %} First look for a defined custom color {% endcomment %}
{%- assign swatch_colors = swatch_colors | newline_to_br | strip_newlines | split: '<br />' -%}
{%- assign swatch_search_color = color_name | downcase -%}
{%- for swatch_option in swatch_colors -%}
{%- assign swatch_color = swatch_option | split: ':' -%}
{%- assign swatch_color_name = swatch_color[0] | strip | downcase -%}
{%- assign swatch_color_value = swatch_color[1] | strip -%}
{%- if swatch_search_color == swatch_color_name -%}
{% capture swatch_bg_color %}
background-color: {{ swatch_color_value }};
{% endcapture %}
{%- break -%}
{%- endif -%}
{%- endfor -%}
{% comment %} Otherwise default to the raw color name, which will either be a
valid named HTML color and displayed as such, or will be ignored by the browser. {% endcomment %}
{%- if swatch_bg_color == blank -%}
{% capture swatch_bg_color %}
background-color: {{ color_name | handleize }};
{% endcapture %}
{%- endif -%}
{%- if use_variant_images and swatch_product != blank and swatch_option_key != blank -%}
{% for variant in swatch_product.variants %}
{% assign option_value_downcased = variant[swatch_option_key] | downcase %}
{% if option_value_downcased == swatch_search_color %}
{% if variant.image != blank %}
{%- assign swatch_image_resolution = swatch_size | times: 2 | prepend: 'x' -%}
{%- assign swatch_file_url = variant.image | img_url: swatch_image_resolution, crop: 'center' -%}
{%- assign swatch_height = swatch_size | times: 1.0 -%}
{%- assign swatch_width = swatch_size | times: 1.0 -%}
{%- if use_aspect_ratio -%}
{%- assign swatch_width = swatch_size | times: variant.image.aspect_ratio -%}
{%- endif -%}
{%- capture swatch_bg_image -%}
background-image: url('{{- swatch_file_url -}}');
width: {{ swatch_width }}px;
border: 0; {% comment %}Variant image swatches don't get inset borders{% endcomment %}
{%- endcapture -%}
{%- assign selected_border_offset = 2 | times: 2 -%}
{%- capture swatch_bg_variables -%}
--swatch-inner-transform-x: {{ swatch_width | minus: selected_border_offset | divided_by: swatch_width }};
--swatch-inner-transform-y: {{ swatch_height | minus: selected_border_offset | divided_by: swatch_height }};
{%- endcapture -%}
{% endif %}
{%- break -%}
{% endif %}
{% endfor %}
{%- else -%}
{% comment %} Then look for a pattern image. {% endcomment %}
{% assign swatch_file_name = color_name | downcase | handleize | append: '.png' %}
{%- if images[swatch_file_name] != blank -%}
{%- capture swatch_image_resolution -%}{{ swatch_size | times: 2 }}x{{ swatch_size | times: 2 }}{%- endcapture -%}
{%- assign swatch_file_url = swatch_file_name | file_img_url: swatch_image_resolution, crop: 'center' -%}
{%- capture swatch_bg_image -%}
background-image: url('{{- swatch_file_url -}}');
{%- endcapture -%}
{%- endif -%}
{%- endif -%}
{%- endcapture -%}
{{ swatch_bg_color }}
{{ swatch_bg_image }}
/* variables */
{{ swatch_bg_variables }}
{% comment %}Inject @pixelunion/shopify-variants-ui/variants-ui-swatch-styles end{% endcomment %}
{% endcapture %}
<div
class="
variants-ui__option-swatch
{{ option_swatch_classes }}
"
style="{{ swatch_styles | split: '/* variables */' | last | remove: '/* variables */' }}"
>
<div
class="
variants-ui__option-swatch-inner
{{ option_swatch_inner_classes }}
"
style="{{ swatch_styles | split: '/* variables */' | first }}"
>
</div>
</div>
{% endunless %}
</span>
</label>
</div>
{% endfor %}
</div>
</fieldset>
{% comment %}Inject @pixelunion/shopify-variants-ui/variants-ui-radios end{% endcomment %}
{% endif %}
{% endfor %}
</div>
{% comment %}Inject @pixelunion/shopify-variants-ui/variants-ui-options end{% endcomment %}
{% endif %}
{% comment %}Inject @pixelunion/shopify-variants-ui/variants-ui end{% endcomment %}
<div class="product-form--atc">
<div class="product-form--atc-qty form-fields--qty" data-quantity-wrapper>
<div class="form-field form-field--qty-select">
<div class="form-field-select-wrapper">
<select
id="product-quantity-select"
class="form-field-input form-field-select"
aria-label="{{ 'general.general.quantity' | t }}"
data-quantity-select
>
{% for i in (1..9) %}
<option {% if i == 1 %}selected {% endif %}value="{{ i }}">
{{ i }}
</option>
{% endfor %}
<option value="10+">
10+
</option>
</select>
<label
for="product-quantity-select"
class="form-field-title"
>
{{ 'general.general.quantity' | t }}
</label>
{% render 'icon-chevron-down-small' %}
</div>
</div>
<div class="form-field form-field--qty-input hidden">
<input
id="product-quantity-input"
class="form-field-input form-field-number form-field-filled"
value="1"
name="quantity"
type="text"
pattern="\d*"
aria-label="{{ 'general.general.quantity' | t }}"
data-quantity-input
>
<label
for="product-quantity-input"
class="form-field-title"
>
{{ 'general.general.quantity' | t }}
</label>
</div>
</div>
<!-- Bold: Memberships (cadd to cart) -->
{% include 'bold-memberships-addtocart' %}
<button
class="product-form--atc-button {% if selected_variant and selected_variant.available == false %}disabled{% endif %}"
type="submit"
{% if selected_variant and selected_variant.available == false %}disabled{% endif %}
data-product-atc
>
<span class="atc-button--text">
{% unless selected_variant and selected_variant.available == false %}
{{ 'product.buttons.add_to_cart' | t }}
{% else %}
{{ 'product.buttons.sold_out' | t }}
{% endunless %}
</span>
<span class="atc-button--icon">
{%- render 'icon-spinner' -%}
</span>
</button>
<!-- end Bold code -->
</div>
{% if product_smart_buttons or quickshop_smart_buttons %}
{% if product.metafields.product_customizer == empty %}{{ form | payment_button }}{% endif %}
{% endif %}
<div class="surface-pick-up" data-surface-pick-up></div>
{% endform %}
Thanks!
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
08-02-2021
09:59 AM
Please check screenshot
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Top Contributors
| User | RANK |
|---|---|
| 227 | |
| 181 | |
| 63 | |
| 58 | |
| 47 |
Community Browser
-
Shopify Community
Shopify Discussion
- Shopify Discussions
- Store Feedback
- Shopify Design
- Community AMAs (Ask Me Anything)
- Announcements
- Shopify Apps
- Shopify Education & Certifications
- Shopify Translate & Adapt
- Ecommerce Marketing
- Technical Q&A
- Site Speed
- Retail and Point of Sale
- International Commerce
- Payments, Shipping, and Fulfillment
- Accounting and Taxes
- Wholesale and Dropshipping
- Shopify Flow App
- Shopify Scripts
Partners and Developers
- Extensions
- Authentication and Access
- Fulfillment and Inventory
- GraphQL Basics and Troubleshooting
- Hydrogen, Headless, and Storefront APIs
- Metafields and Custom Data
- Customers, Discounts, and Orders
- Bundles
- Subscriptions APIs
- Billing API
- Products, Variants, and Collections
- Shopify CLI and Tools
- Shopify Functions
- Online Store and Theme Development
- Webhooks and Events
-
Groups
- English video guides and tutorials
- Build on Shopify
- Master the holidays with Shopify: Top 10 strategies for a successful season
- Blog
Community Blog Articles
Unlocking the Secrets of E-commerce Success: An Exclusive Interview with SY...
On our Shopify Expert Marketplace, you can find many trusted third party developers and fr...
By Arno Nov 27, 2023
Organize Your Products Like a Rainbow: Metafields and Color Sorting
You've downloaded the Search & Discovery app from the Shopify App store, and as you're ...
By Skye Nov 8, 2023
Community Connect: October Recap
The year-end shopping season is just around the corner. Is a flash sale on your radar? Are...
By Jasonh Nov 6, 2023-
Shopify Community
Shopify Design Shopify Discussions Partners & Developers Technical Q&A Payments, Shipping, and Fulfillment -
Support
24/7 Support Shopify Help Center API documentation Free Tools -
Shopify
Contact Partner Program Shopify Engineering Affiliate Program App Developers Investors -
Quick Links
Register Log in