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
Re: "Add to Cart" button missing on product pages.
Solved
"Add to Cart" button missing on product pages.
- 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.
- 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
To build shopify pages use pagefly | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30. | 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
Community Blog Articles
The 9 Questions You Need To Answer When Starting a B2B Store
Starting a B2B store is a big undertaking that requires careful planning and execution. W...
By JasonH Sep 23, 2024
Get ready for peak holiday selling season 2024
By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024
Highlights | Top Contributors August '24
We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024