Quick Add Button on Featured Collection

Store Design
, , , ,
1

I am helping build a site for some friends and we cannot get the quick add button to pop up on the home page section where the featured collection is. When I go to the settings for the featured collection, there are no options to enable a “quick add” or “add to cart” button. I tried adding many apps for an “add to cart” button but nothing has worked. Can someone help me with this? They launch the site Monday and would really like to have this function working by then. If i need to add code, please provide it! Thank you in advance!

pw: sunny!

2

Hey @ellecapie

Can you either share your featured-collection.liquid code or share the collaborator request code with me so I can help you out with that as it is not possible without having access of your back-end. Let me know whatever works the best for you.

Best Regards,

Moeed

3

which is the theme

4

Here is the code for the featured collection:

{{ ‘component-card.css’ | asset_url | stylesheet_tag }}
{{ ‘component-price.css’ | asset_url | stylesheet_tag }}
{{ ‘component-product-grid.css’ | asset_url | stylesheet_tag }}

{{ ‘component-slider.css’ | asset_url | stylesheet_tag }}
{{ ‘template-collection.css’ | asset_url | stylesheet_tag }}

{% case section.settings.grid %}
{% when 2 %}
{%- assign max_height = 530 -%}
{%- assign grid_item_width = ‘medium-up–one-half’ -%}
{% when 3 %}
{%- assign max_height = 345 -%}
{%- assign grid_item_width = ‘small–one-half medium-up–one-third’ -%}
{% when 4 %}
{%- assign max_height = 250 -%}
{%- assign grid_item_width = ‘small–one-half medium-up–one-quarter’ -%}
{% when 5 %}
{%- assign max_height = 195 -%}
{%- assign grid_item_width = ‘small–one-half medium-up–one-fifth’ -%}
{% endcase %}

{%- assign product_limit = section.settings.grid | times: section.settings.rows -%}

{{ section.settings.title | escape }}

    {%- for product in section.settings.collection.products limit: product_limit -%}
  • {% render 'product-card', max_height: max_height, product_card_product: product, media_size: section.settings.image_ratio, show_secondary_image: section.settings.show_secondary_image, add_image_padding: section.settings.add_image_padding, show_vendor: section.settings.show_vendor, show_image_outline: section.settings.show_image_outline, show_rating: section.settings.show_rating %}
    • {%- else -%} {% for i in (1..product_limit) %}
  • {% render 'product-card-placeholder' %}
    • {%- endfor -%} {%- endfor -%}

{%- if section.settings.show_view_all -%}

{%- endif -%}
#shopify-section-{{section.id}} .card-information__text{ font-size: {{ section.settings.title_font_size | append: 'px' }}; } #shopify-section-{{section.id}} .caption-with-letter-spacing{ font-size: {{ section.settings.vendor_font_size | append: 'px' }}; } #shopify-section-{{section.id}} .card-information__wrapper>.price span, #shopify-section-{{section.id}} .card-information__wrapper>.price s{ font-size: {{ section.settings.price_font_size | append: 'px' }}; }

{% schema %}
{
“name”: “t:sections.featured-collection.name”,
“tag”: “section”,
“class”: “spaced-section”,
“settings”: [
{
“type”: “header”,
“content”: “Font customizer”
},
{
“type”: “range”,
“id”: “vendor_font_size”,
“label”: “Vendor”,
“min”: 10,
“max”: 40,
“default”: 16,
“unit”: “px”
},
{
“type”: “range”,
“id”: “title_font_size”,
“label”: “Title”,
“min”: 10,
“max”: 40,
“default”: 16,
“unit”: “px”
},
{
“type”: “range”,
“id”: “price_font_size”,
“label”: “Price”,
“min”: 10,
“max”: 40,
“default”: 16,
“unit”: “px”
},
{
“type”: “text”,
“id”: “title”,
“default”: “Featured collection”,
“label”: “t:sections.featured-collection.settings.title.label”
},
{
“type”: “collection”,
“id”: “collection”,
“label”: “t:sections.featured-collection.settings.collection.label”
},
{
“type”: “range”,
“id”: “grid”,
“label”: “Products per row”,
“min”: 2,
“max”: 5,
“step”: 1,
“default”: 4
},
{
“type”: “range”,
“id”: “rows”,
“label”: “Rows”,
“min”: 1,
“max”: 5,
“step”: 1,
“default”: 2
},
{
“type”: “checkbox”,
“id”: “show_title”,
“label”: “Show product title”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “show_price”,
“label”: “Show product price”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “show_view_all”,
“default”: true,
“label”: “t:sections.featured-collection.settings.show_view_all.label”
},
{
“type”: “header”,
“content”: “t:sections.featured-collection.settings.header.content”
},
{
“type”: “select”,
“id”: “image_ratio”,
“options”: [
{
“value”: “adapt”,
“label”: “t:sections.featured-collection.settings.image_ratio.options__1.label”
},
{
“value”: “portrait”,
“label”: “t:sections.featured-collection.settings.image_ratio.options__2.label”
},
{
“value”: “square”,
“label”: “t:sections.featured-collection.settings.image_ratio.options__3.label”
}
],
“default”: “adapt”,
“label”: “t:sections.featured-collection.settings.image_ratio.label”
},
{
“type”: “checkbox”,
“id”: “show_secondary_image”,
“default”: true,
“label”: “t:sections.featured-collection.settings.show_secondary_image.label”
},
{
“type”: “checkbox”,
“id”: “add_image_padding”,
“default”: false,
“label”: “t:sections.featured-collection.settings.add_image_padding.label”
},
{
“type”: “checkbox”,
“id”: “show_image_outline”,
“default”: true,
“label”: “t:sections.featured-collection.settings.show_image_outline.label”
},
{
“type”: “checkbox”,
“id”: “show_vendor”,
“default”: false,
“label”: “t:sections.featured-collection.settings.show_vendor.label”
},
{
“type”: “checkbox”,
“id”: “show_rating”,
“default”: false,
“label”: “t:sections.featured-collection.settings.show_rating.label”,
“info”: “t:sections.featured-collection.settings.show_rating.info”
}
],
“presets”: [
{
“name”: “t:sections.featured-collection.presets.name”
}
]
}
{% endschema %}

5

It is an uploaded theme called Blushing Boho 2.0

6

Hey @ellecapie

There must be a file in your theme with the name of “product-card.liquid”, can you share its code as well?

Best Regards,

Moeed

7

Yes! Here you go. Thank you!

{% comment %}
Renders a product card

Accepts:

  • product_card_product: {Object} Product Liquid object (optional)
  • media_size: {String} Size of the product image card. Values are “square” and “portrait”. Default is “square” (optional)
  • show_secondary_image: {Boolean} Show the secondary image on hover. Default: false (optional)
  • add_image_padding: {Boolean} Enables padding on the image to space out the grid
  • show_vendor: {Boolean} Show the product vendor. Default: false
  • show_image_outline: {Boolean} Show card outline. Default: true (optional)
  • show_rating: {Boolean} Show the product rating. Default: false

Usage:
{% render ‘product-card’, show_vendor: section.settings.show_vendor %}
{% endcomment %}

{{ ‘component-rating.css’ | asset_url | stylesheet_tag }}

{% if section.settings.show_vendor %} {{ 'accessibility.vendor' | t }}
{{ product_card_product.vendor }}
{%- endif -%}

{% if section.settings.show_title %}

{{ product_card_product.title | escape }}

{%- endif -%}

{% comment %} TODO: metafield {% endcomment %}
{{ block.settings.description | escape }}
{%- if show_rating and product_card_product.metafields.reviews.rating.value != blank -%}
{% liquid
assign rating_decimal = 0
assign decimal = product_card_product.metafields.reviews.rating.value.rating | modulo: 1
if decimal >= 0.3 and decimal <= 0.7
assign rating_decimal = 0.5
elsif decimal > 0.7
assign rating_decimal = 1
endif
%}

{{ product_card_product.metafields.reviews.rating.value }} / {{ product_card_product.metafields.reviews.rating.value.scale_max }}

({{ product_card_product.metafields.reviews.rating_count }}) {{ product_card_product.metafields.reviews.rating_count }} {{ "accessibility.total_reviews" | t }}

{%- endif -%}

{% if section.settings.show_price %}
{% render ‘price’, product: product_card_product, price_class: ‘’ %}
{%- endif -%}

{%- if product_card_product.featured_media -%} {%- liquid assign featured_media_aspect_ratio = product_card_product.featured_media.aspect_ratio

if product_card_product.featured_media.aspect_ratio == nil
assign featured_media_aspect_ratio = 1
endif
-%}

<div{% if add_image_padding %} class=“card__media-full-spacer”{% endif %}>

{{ product_card_product.featured_media.alt | escape }}

{%- if product_card_product.media[1] != nil and show_secondary_image -%}
<img
srcset=“{%- if product_card_product.media[1].width >= 165 -%}{{ product_card_product.media[1] | img_url: ‘165x’ }} 165w,{%- endif -%}
{%- if product_card_product.media[1].width >= 360 -%}{{ product_card_product.media[1] | img_url: ‘360x’ }} 360w,{%- endif -%}
{%- if product_card_product.media[1].width >= 533 -%}{{ product_card_product.media[1] | img_url: ‘533x’ }} 533w,{%- endif -%}
{%- if product_card_product.media[1].width >= 720 -%}{{ product_card_product.media[1] | img_url: ‘720x’ }} 720w,{%- endif -%}
{%- if product_card_product.media[1].width >= 940 -%}{{ product_card_product.media[1] | img_url: ‘940x’ }} 940w,{%- endif -%}
{%- if product_card_product.media[1].width >= 1066 -%}{{ product_card_product.media[1] | img_url: ‘1066x’ }} 1066w,{%- endif -%}
{{ product_card_product.media[1] | img_url: ‘master’ }} {{ product_card_product.media[1].width }}w”
src=“{{ product_card_product.media[1] | img_url: ‘533x’ }}”
sizes=“(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)”
alt=“{{ product_card_product.media[1].alt | escape }}”
loading=“lazy”
class=“motion-reduce”
width=“{{ product_card_product.media[1].width }}”
height=“{{ product_card_product.media[1].height }}”

{%- endif -%}
{%- else -%} {%- endif -%}
{%- if product_card_product.available == false -%} {{ 'products.product.sold_out' | t }} {%- elsif product_card_product.compare_at_price > product_card_product.price and product_card_product.available -%} {{ 'products.product.on_sale' | t }} {%- endif -%}
8

can you send product-card code

9

{% comment %}
Renders a product card

Accepts:

  • product_card_product: {Object} Product Liquid object (optional)
  • media_size: {String} Size of the product image card. Values are “square” and “portrait”. Default is “square” (optional)
  • show_secondary_image: {Boolean} Show the secondary image on hover. Default: false (optional)
  • add_image_padding: {Boolean} Enables padding on the image to space out the grid
  • show_vendor: {Boolean} Show the product vendor. Default: false
  • show_image_outline: {Boolean} Show card outline. Default: true (optional)
  • show_rating: {Boolean} Show the product rating. Default: false

Usage:
{% render ‘product-card’, show_vendor: section.settings.show_vendor %}
{% endcomment %}

{{ ‘component-rating.css’ | asset_url | stylesheet_tag }}

{% if section.settings.show_vendor %} {{ 'accessibility.vendor' | t }}
{{ product_card_product.vendor }}
{%- endif -%}

{% if section.settings.show_title %}

{{ product_card_product.title | escape }}

{%- endif -%}

{% comment %} TODO: metafield {% endcomment %}
{{ block.settings.description | escape }}
{%- if show_rating and product_card_product.metafields.reviews.rating.value != blank -%}
{% liquid
assign rating_decimal = 0
assign decimal = product_card_product.metafields.reviews.rating.value.rating | modulo: 1
if decimal >= 0.3 and decimal <= 0.7
assign rating_decimal = 0.5
elsif decimal > 0.7
assign rating_decimal = 1
endif
%}

{{ product_card_product.metafields.reviews.rating.value }} / {{ product_card_product.metafields.reviews.rating.value.scale_max }}

({{ product_card_product.metafields.reviews.rating_count }}) {{ product_card_product.metafields.reviews.rating_count }} {{ "accessibility.total_reviews" | t }}

{%- endif -%}

{% if section.settings.show_price %}
{% render ‘price’, product: product_card_product, price_class: ‘’ %}
{%- endif -%}

{%- if product_card_product.featured_media -%} {%- liquid assign featured_media_aspect_ratio = product_card_product.featured_media.aspect_ratio

if product_card_product.featured_media.aspect_ratio == nil
assign featured_media_aspect_ratio = 1
endif
-%}

<div{% if add_image_padding %} class=“card__media-full-spacer”{% endif %}>

{{ product_card_product.featured_media.alt | escape }}

{%- if product_card_product.media[1] != nil and show_secondary_image -%}
<img
srcset=“{%- if product_card_product.media[1].width >= 165 -%}{{ product_card_product.media[1] | img_url: ‘165x’ }} 165w,{%- endif -%}
{%- if product_card_product.media[1].width >= 360 -%}{{ product_card_product.media[1] | img_url: ‘360x’ }} 360w,{%- endif -%}
{%- if product_card_product.media[1].width >= 533 -%}{{ product_card_product.media[1] | img_url: ‘533x’ }} 533w,{%- endif -%}
{%- if product_card_product.media[1].width >= 720 -%}{{ product_card_product.media[1] | img_url: ‘720x’ }} 720w,{%- endif -%}
{%- if product_card_product.media[1].width >= 940 -%}{{ product_card_product.media[1] | img_url: ‘940x’ }} 940w,{%- endif -%}
{%- if product_card_product.media[1].width >= 1066 -%}{{ product_card_product.media[1] | img_url: ‘1066x’ }} 1066w,{%- endif -%}
{{ product_card_product.media[1] | img_url: ‘master’ }} {{ product_card_product.media[1].width }}w”
src=“{{ product_card_product.media[1] | img_url: ‘533x’ }}”
sizes=“(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)”
alt=“{{ product_card_product.media[1].alt | escape }}”
loading=“lazy”
class=“motion-reduce”
width=“{{ product_card_product.media[1].width }}”
height=“{{ product_card_product.media[1].height }}”

{%- endif -%}
{%- else -%} {%- endif -%}
{%- if product_card_product.available == false -%} {{ 'products.product.sold_out' | t }} {%- elsif product_card_product.compare_at_price > product_card_product.price and product_card_product.available -%} {{ 'products.product.on_sale' | t }} {%- endif -%}
10

Hey @ellecapie

You may completely replace your product-card.liquid code with this one to see if it works or not.

{% comment %}
Renders a product card

Accepts:
- product_card_product: {Object} Product Liquid object (optional)
- media_size: {String} Size of the product image card. Values are "square" and "portrait". Default is "square" (optional)
- show_secondary_image: {Boolean} Show the secondary image on hover. Default: false (optional)
- add_image_padding: {Boolean} Enables padding on the image to space out the grid
- show_vendor: {Boolean} Show the product vendor. Default: false
- show_image_outline: {Boolean} Show card outline. Default: true (optional)
- show_rating: {Boolean} Show the product rating. Default: false

Usage:
{% render 'product-card', show_vendor: section.settings.show_vendor %}
{% endcomment %}

{{ 'component-rating.css' | asset_url | stylesheet_tag }}

  

    

      {% if section.settings.show_vendor %}
        {{ 'accessibility.vendor' | t }}
        
{{ product_card_product.vendor }}

      {% endif %}

      {% if section.settings.show_title %}
        ### 
          
            {{ product_card_product.title | escape }}
          
        
      {% endif %}

      {% comment %} TODO: metafield {% endcomment %}
      {{ block.settings.description | escape }}

      {% if show_rating and product_card_product.metafields.reviews.rating.value != blank %}
        {% liquid
          assign rating_decimal = 0
          assign decimal = product_card_product.metafields.reviews.rating.value.rating | modulo: 1
          if decimal >= 0.3 and decimal <= 0.7
            assign rating_decimal = 0.5
          elsif decimal > 0.7
            assign rating_decimal = 1
          endif
        %}
        

          
        

        

          {{ product_card_product.metafields.reviews.rating.value }} / {{ product_card_product.metafields.reviews.rating.value.scale_max }}
        

        

          ({{ product_card_product.metafields.reviews.rating_count }})
          {{ product_card_product.metafields.reviews.rating_count }} {{ "accessibility.total_reviews" | t }}
        

      {% endif %}

      {% if section.settings.show_price %}
        {% render 'price', product: product_card_product, price_class: '' %}
      {% endif %}
    

  

  
    

      {% if product_card_product.featured_media %}
        {% liquid
          assign featured_media_aspect_ratio = product_card_product.featured_media.aspect_ratio
          if product_card_product.featured_media.aspect_ratio == nil
            assign featured_media_aspect_ratio = 1
          endif
        %}

        

      {% else %}
        
          ## 
            
              {{ product_card_product.title }}
            
          
        

      {% endif %}
      
        {% if product_card_product.available == false %}
          {{ 'products.product.sold_out' | t }}
        {% elsif product_card_product.compare_at_price > product_card_product.price and product_card_product.available %}
          {{ 'products.product.on_sale' | t }}
        {% endif %}

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

11

you can add this one line in collection file

show_quick_add: true

12

The add to cart button pops up now but when you click it, it takes you to the products and doesn’t actually add to cart.

see homepage for reference: sunnyandsquid.com

13

Where do I add that? can you provide the specific code?

14

you can add this line bottom the show_rating line also add comma(,) end of show rating

AK_Devloper_0-1721424575304.png
AK_Devloper_0-1721424575304.png615×420 33.9 KB