Add to cart button not aligning on featured collection section

[gthegreat]

Hi Everyone, I need help aligning my add-to-cart buttons(on all devices) on my theme while also making sure the pictures are still aligned.

I’ve looked at previous solutions but they wouldn’t work because I don’t a theme.scss file or any scss file in my theme folder. I only have a base.css file…

Any help is much appreciated !!

What I have :

Also if it’s not possible to make the add to cart button look good on mobile does anyone know how to make it disappear when viewing on mobile ?!

https://y5cumhvb4fx6xstv-58572865730.shopifypreview.com

password : plswork

[PageFly-Richard]

Hi @gthegreat

I’m Richard Nguyen from PageFly- Free Landing Page Builder

You can try with this code.

Follow this:

Go to Online Store->Theme->Edit code->base.css->paste bellow code in bottom of file

.card-information__text {

height: 40px !important;

}

If you feel my answer is helpful, like it or mark it as a solution. Let me know if you have any questions.

Best regards,

Richard | PageFly

[KetanKumar]

@gthegreat

oh sorry but i can’t see Add to Cart Button

please show me so i will give your code

[LitCommerce]

Hi @gthegreat ,

Please add the button again, I will help you check it.

[gthegreat]

Hi thank you for the response , I have no idea why it’s not displaying on the preview . It show s it when I use the preview link myself but here is the code

This is from the product-card.liquid located in the snippets section

{% 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 }}

{{ product_card_product.title | escape }}

{%- 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 %}>

{%- 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 -%}”
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 -%}

{{ 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 show_vendor -%} {{ 'accessibility.vendor' | t }}

{{ product_card_product.vendor }}

{%- endif -%}

{%- if product_card_product.featured_media -%}

{{ 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 -%}

{% render ‘price’, product: product_card_product, price_class: ‘’ %}

{%- form ‘product’, product_card_product, id: product_form_id, class: ‘form’, novalidate: ‘novalidate’, data-type: ‘add-to-cart-form’ -%}

{{ form | payment_terms }}

<button
type=“submit”
name=“add”
class=“product-form__submit button button–full-width button–secondary”
{% if product_card_product.selected_or_first_available_variant.available == false %}disabled{% endif %}
>
{%- if product_card_product.selected_or_first_available_variant.available -%}
{{ ‘products.product.add_to_cart’ | t }}

{%- endif -%}

{%- endform -%}

what I have in bold is what I used to add the cart button (i don’t really know if that was the best way to do it though)

Thank you for your help I really appreciate it

@KetanKumar @LitCommerce

[gthegreat]

@PageFly-Richard

Hi thank you for responding I will try that !!

[LitCommerce]

Hi @gthegreat ,

Please send me the preview link, I will check it for you

[gthegreat]

Hello,

@LitCommerce

https://kxizpuussxhbw6zp-58572865730.shopifypreview.com

password: plswork

Thank you so much for wanting to help!!

[LitCommerce]

Hi @gthegreat ,

I checked and still can’t find the button, it would be very difficult for someone to check it if it doesn’t show up.

Can you activate it?

[gthegreat]

@LitCommerce @KetanKumar

Hi so I think I figured out why it was not showing up but when I tried to add the button using the code from the feature product liquid I got this error

All help is much appreciated

[KetanKumar]

@gthegreat

can you please send that section code

[gthegreat]

{{ ‘component-card.css’ | asset_url | stylesheet_tag }}
{{ ‘component-price.css’ | asset_url | stylesheet_tag }}
{{ ‘component-product-grid.css’ | asset_url | stylesheet_tag }}
{{ ‘animate.min.css’ | asset_url | stylesheet_tag }}
{{ ‘section-main-product.css’ | asset_url | stylesheet_tag }}
{{ ‘section-featured-product.css’ | asset_url | stylesheet_tag }}
{{ ‘component-accordion.css’ | asset_url | stylesheet_tag }}
{{ ‘component-price.css’ | asset_url | stylesheet_tag }}
{{ ‘component-rte.css’ | asset_url | stylesheet_tag }}

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

{%- liquid
assign products_to_display = section.settings.collection.all_products_count

if section.settings.collection.all_products_count > section.settings.products_to_show
assign products_to_display = section.settings.products_to_show
assign more_in_collection = true
endif
-%}

{{ section.settings.title | escape }}

{%- if section.settings.show_view_all and section.settings.swipe_on_mobile and more_in_collection -%}
{{ ‘sections.featured_collection.view_all’ | t }}
{%- endif -%}

{%- for product in section.settings.collection.products limit: section.settings.products_to_show -%}
• {% render 'product-card', 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..4) -%}
• {% render 'product-card-placeholder' %}
{%- endfor -%} {%- endfor -%}

{%- if section.settings.collection.all_products_count > 2 and section.settings.swipe_on_mobile and section.settings.products_to_show > 2 -%}

{% render 'icon-caret' %}

1 / {{ 'accessibility.of' | t }} {{ products_to_display }}

{% render 'icon-caret' %}

{%- endif -%} {%- form 'product', product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}

{%- if product.selected_or_first_available_variant.available -%} {{ 'products.product.add_to_cart' | t }} {%- else -%} {{ 'products.product.sold_out' | t }} {%- endif -%} {%- if block.settings.show_dynamic_checkout -%} {{ form | payment_button }} {%- endif -%}

{%- endform -%}

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

{{ 'sections.featured_collection.view_all' | t }}

{%- endif -%}

{% schema %}

{
“name”: “t:sections.featured-collection.name”,
“tag”: “section”,
“class”: “spaced-section”,
“settings”: [
{
“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”: “products_to_show”,
“min”: 2,
“max”: 12,
“step”: 2,
“default”: 4,
“label”: “t:sections.featured-collection.settings.products_to_show.label”
}, {
“type”: “checkbox”,
“id”: “show_view_all”,
“default”: true,
“label”: “t:sections.featured-collection.settings.show_view_all.label”
}, {
“type”: “checkbox”,
“id”: “swipe_on_mobile”,
“default”: false,
“label”: “t:sections.featured-collection.settings.swipe_on_mobile.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”: false,
“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 %}

@KetanKumar Thank you