how i can customized quick add button

Manishuk01 · March 3, 2025, 6:23am

how i customized quick add butoon on product grid

https://g8tiyz-ui.myshopify.com/

Promer-Alena · March 3, 2025, 6:59am

Hi @Manishuk01 , I hope this can help you

To do this, go to Online Store > Themes, find your theme, and click “Customize” to tweak the product grid settings, look for a “Quick Add” or “Add to cart” button style option under the product card settings. If your theme doesn’t have that built-in, head to Online Store > Themes > Actions > Edit Code, and find the product-card.liquid or theme.scss.liquid file. You can add custom CSS to style the button, like changing its color, size, or text - try something like:

.grid-product__quick-add {
background-color: #000; /* Black like your current Add to cart /
color: white;
padding: 8px 16px;
border-radius: 5px; / Rounded edges */
}

.grid-product__quick-add:hover {
background-color: #333; /* Darker shade on hover */
}

Save the changes, and test it on your product grid to ensure it looks sharp and matches your brand

Manishuk01 · March 3, 2025, 7:01am

i also want that variant selector option above add to cart

Promer-Alena · March 3, 2025, 7:07am

To add a variant selector above the “Add to Cart” button in your product grid, follow these steps:

Step 1: Edit Your Theme Code1. Go to Online Store > Themes

Click Actions > Edit Code
Find and open product-card.liquid (or similar, depending on your theme)

Step 2: Add Variant Selector Above Quick Add Button

Look for the Add to Cart button code inside product-card.liquid.
Just above the button code, add the following snippet:

{% if product.variants.size > 1 %}
{% endif %}

Step 3: Update the Quick Add Button Code

Modify the Add to Cart form to use the selected variant:

Add to cart

Step 4: Add Some CSS for Better Styling

In your theme.scss.liquid or base.css, add:

.grid-product__variant-selector {
width: 100%;
padding: 5px;
margin-bottom: 8px;
border: 1px solid #ccc;
border-radius: 5px;
}

Step 5: Test & Adjust- Save your changes

Check your store’s product grid to ensure the variant dropdown appears above “Add to Cart”
If needed, tweak styles or positioning

Manishuk01 · March 3, 2025, 7:27am

i am not able to find the code on step second can you help

{% comment %}
  Renders a product card

  Accepts:
  - card_product: {Object} Product Liquid object (optional)
  - media_aspect_ratio: {String} Size of the product image card. Values are "square" and "portrait". Default is "square" (optional)
  - image_shape: {String} Image mask to apply to the product image card. Values are "arch", "blob", "chevronleft", "chevronright", "diamond", "parallelogram", and "round". (optional)
  - show_secondary_image: {Boolean} Show the secondary image on hover. Default: false (optional)
  - show_vendor: {Boolean} Show the product vendor. Default: false
  - show_rating: {Boolean} Show the product rating. Default: false
  - extend_height: {Boolean} Card height extends to available container space. Default: true (optional)
  - lazy_load: {Boolean} Image should be lazy loaded. Default: true (optional)
  - skip_styles: {Boolean} Don't include component styles. Useful when rendering multiple product cards in a loop. Default: false (optional)
  - quick_add: {Boolean} Show the quick add button.
  - section_id: {String} The ID of the section that contains this card.
  - horizontal_class: {Boolean} Add a card--horizontal class if set to true. Default: false (optional)
  - horizontal_quick_add: {Boolean} Changes the quick add button styles when set to true. Default: false (optional)
  - placeholder_image: {String} The placeholder image to use when no product exists. Default: 'product-apparel-2' (optional)

  Usage:
  {% render 'card-product', show_vendor: section.settings.show_vendor %}
{% endcomment %}
{%- unless skip_styles -%}
  {{ 'component-rating.css' | asset_url | stylesheet_tag }}
  {{ 'component-volume-pricing.css' | asset_url | stylesheet_tag }}

  {{ 'component-price.css' | asset_url | stylesheet_tag }}
  {{ 'quick-order-list.css' | asset_url | stylesheet_tag }}
  {{ 'quantity-popover.css' | asset_url | stylesheet_tag }}
{%- endunless -%}
{%- if card_product and card_product != empty -%}
  {%- liquid
    assign ratio = 1
    if card_product.featured_media and media_aspect_ratio == 'portrait'
      assign ratio = 0.8
    elsif card_product.featured_media and media_aspect_ratio == 'adapt'
      assign ratio = card_product.featured_media.aspect_ratio
    endif
    if ratio == 0 or ratio == null
      assign ratio = 1
    endif
  -%}
  
    

      

        {%- if card_product.featured_media -%}
          

            

              {% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
              
              {% comment %}theme-check-enable ImgLazyLoading{% endcomment %}

              {%- if card_product.media[1] != null and show_secondary_image -%}
                
              {%- endif -%}
            

          

        {%- endif -%}
        
          

            ### 
              
                {{ card_product.title | escape }}
              
            
          

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

        

      

      
        

          ### 
            
              {{ card_product.title | escape }}
            
          
          
            {%- if show_vendor -%}
              {{ 'accessibility.vendor' | t }}
              
{{ card_product.vendor }}

            {%- endif -%}

            {{ block.settings.description | escape }}

            {%- if show_rating and card_product.metafields.reviews.rating.value != blank -%}
              {% liquid
                assign rating_decimal = 0
                assign decimal = 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
              %}
              

                
              

              

                
                  {{- card_product.metafields.reviews.rating.value }} /
                  {{ card_product.metafields.reviews.rating.value.scale_max -}}
                
              

              

                ({{ card_product.metafields.reviews.rating_count }})
                
                  {{- card_product.metafields.reviews.rating_count }}
                  {{ 'accessibility.total_reviews' | t -}}
                
              

            {%- endif -%}

            {% render 'price', product: card_product, price_class: '', show_compare_at_price: true %}
            {%- if card_product.quantity_price_breaks_configured? -%}
              {% if card_product.variants.size == 1 and quick_add == 'bulk' %}
                {% liquid
                  assign quantity_rule = card_product.selected_or_first_available_variant.quantity_rule
                  assign has_qty_rules = false
                  if quantity_rule.increment > 1 or quantity_rule.min > 1 or quantity_rule.max != null
                    assign has_qty_rules = true
                  endif
                %}
                
              {% endif %}
            {%- endif -%}
          

        

        {% assign product_form_id = 'quick-add-' | append: section_id | append: card_product.id %}
        {% if quick_add == 'standard' %}
          
            {%- liquid
              assign qty_rules = false
              if card_product.selected_or_first_available_variant.quantity_rule.min > 1 or card_product.selected_or_first_available_variant.quantity_rule.max != null or card_product.selected_or_first_available_variant.quantity_rule.increment > 1
                assign qty_rules = true
              endif
            -%}
            {%- if card_product.variants.size > 1 or qty_rules -%}
              
              
            {%- else -%}
              
            {%- endif -%}
          

        {% elsif quick_add == 'bulk' %}
          {% if card_product.variants.size == 1 %}
            
          {% else %}
            

              {%- liquid
                assign product_form_id = 'quick-add-' | append: section_id | append: card_product.id
                assign qty_rules = false
                if card_product.selected_or_first_available_variant.quantity_rule.min > 1 or card_product.selected_or_first_available_variant.quantity_rule.max != null or card_product.selected_or_first_available_variant.quantity_rule.increment > 1
                  assign qty_rules = true
                endif
              -%}
              
              
            

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

      

    

  

{%- else -%}
  {%- liquid
    assign ratio = 1
    assign placeholder = true
    if media_aspect_ratio == 'portrait'
      assign ratio = 0.8
    endif
  -%}
  
    

      

        

          

            {%- if placeholder_image -%}
              {{ placeholder_image | placeholder_svg_tag: 'placeholder-svg' }}
            {%- else -%}
              {{ 'product-apparel-2' | placeholder_svg_tag: 'placeholder-svg' }}
            {% endif %}
          

        

      

      
        

          ### 
            
              {{ 'onboarding.product_title' | t }}
            
          
          
            {%- if show_vendor -%}
              {{ 'accessibility.vendor' | t }}
              
{{ 'products.product.vendor' | t }}

            {%- endif -%}
            {% render 'price', placeholder: placeholder, show_compare_at_price: true %}
          

        

      

    

  

{%- endif -%}

Promer-Alena · March 3, 2025, 7:46am

Since you’re not finding the code for Step 2 in your product-card.liquid file, let’s locate where to add the variant selector. In the code you shared, look for the section near the bottom under {% if quick_add == ‘standard’ %} or {% if quick_add == ‘bulk’ %}—it’s where the “Add to Cart” or “Choose options” button is defined, around lines 350–450. Right above this button code (likely the or for the quick add), paste the variant selector snippet I shared earlier:

{% if product.variants.size > 1 %}
{% endif %}

Then, update the button or form code as I mentioned in Step 3 to use the selected variant. Save the changes, test it on your product grid, and adjust the CSS in theme.scss.liquid if needed for styling

Manishuk01 · March 3, 2025, 7:52am

where should i paste step 3 code

Promer-Alena · March 3, 2025, 7:56am

For Step 3, you’ll want to replace the existing “Add to Cart” or “Quick Add” button code in your product-card.liquid file with the new form code I provided. In the code you shared, look for the section under {% if quick_add == ‘standard’ %} or {% if quick_add == ‘bulk’ %}—specifically, find the or block around lines 350–450 where the current button (like ) is defined. Replace that entire block with this: