Debut Theme - Increase Header Size + Insert Buy Now Button on Feature Collection/Products Page

Solved
Highlighted
New Member
11 0 0

Hello, 

Looking for support on two things: 

1. Insert Add to Cart or Buy Now Button on Feature Collection + Products Page 

- Want this to be present on home page feature collection and products page for a quick add/faster checkout

2. For Product Features -> Content 

- How can I make the Heading text larger than the Text Body? Currently both heading and text are same size.

URL: https://bestrong-af.com/

Thanks,

rad1ant

0 Likes
Highlighted
New Member
11 0 0

Also, on products page under product description/text, there seem to be two different font sizes, how can I make it uniform?

0 Likes
Highlighted
Shopify Partner
1079 170 195

This is an accepted solution.

All Good!

Added the following code to theme.scss for styling:

.section-header.text-center {
    font-size: 24px;
}

select#SingleOptionSelector-0 {
    width: auto;
}

@media screen and (max-width: 451px){

button.btn.product-form__cart-submit {
    margin-bottom: 60px;
}
}

 

And the following code at the end of product-card-grid.liquid:

 

{%- assign current_variant = product.selected_or_first_available_variant -%}

{% form 'product', product, class:form_classes, novalidate: 'novalidate', data-product-form: '' %}
            {% unless product.has_only_default_variant %}
              <div class="product-form__controls-group">
                {% for option in product.options_with_values %}
                  <div class="selector-wrapper js product-form__item">
                    <label {% if option.name == 'default' %}class="label--hidden" {% endif %}for="SingleOptionSelector-{{ forloop.index0 }}">
                      {{ option.name }}
                    </label>
                    <select class="single-option-selector single-option-selector-{{ section.id }} product-form__input"
                      id="SingleOptionSelector-{{ forloop.index0 }}"
                      data-index="option{{ forloop.index }}"
                    >
                      {% for value in option.values %}
                        <option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
                      {% endfor %}
                    </select>
                  </div>
                {% endfor %}
              </div>
            {% endunless %}

            <select name="id" id="ProductSelect-{{ section.id }}" class="product-form__variants no-js">
              {% for variant in product.variants %}
                <option value="{{ variant.id }}"
                  {%- if variant == current_variant %} selected="selected" {%- endif -%}
                >
                  {{ variant.title }}  {%- if variant.available == false %} - {{ 'products.product.sold_out' | t }}{% endif %}
                </option>
              {% endfor %}
            </select>

   
            <div class="product-form__error-message-wrapper product-form__error-message-wrapper--hidden{% if section.settings.enable_payment_button %} product-form__error-message-wrapper--has-payment-button{% endif %}"
              data-error-message-wrapper
              role="alert"
            >
              <span class="visually-hidden">{{ 'general.accessibility.error' | t }} </span>
              {% include 'icon-error' %}
              <span class="product-form__error-message" data-error-message>{{ 'products.product.quantity_minimum_message' | t }}</span>
            </div>

            <div class="product-form__controls-group product-form__controls-group--submit">
              <div class="product-form__item product-form__item--submit
                {%- if section.settings.enable_payment_button %} product-form__item--payment-button {%- endif -%}
                {%- if product.has_only_default_variant %} product-form__item--no-variants {%- endif -%}"
              >
                <button type="submit" name="add"
                  {% unless current_variant.available %} aria-disabled="true"{% endunless %}
                  aria-label="{% unless current_variant.available %}{{ 'products.product.sold_out' | t }}{% else %}{{ 'products.product.add_to_cart' | t }}{% endunless %}"
                  class="btn product-form__cart-submit{% if section.settings.enable_payment_button %} btn--secondary-accent{% endif %}"
                  {% if settings.enable_ajax %}aria-haspopup="dialog"{% endif %}
                  data-add-to-cart>
                  <span data-add-to-cart-text>
                    {% unless current_variant.available %}
                      {{ 'products.product.sold_out' | t }}
                    {% else %}
                      {{ 'products.product.add_to_cart' | t }}
                    {% endunless %}
                  </span>
                  <span class="hide" data-loader>
                    {% include 'icon-spinner' %}
                  </span>
                </button>
                {% if section.settings.enable_payment_button %}
                  {{ form | payment_button }}
                {% endif %}
              </div>
            </div>
          {% endform %}
- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
K&J
1 Like
Highlighted
New Member
11 0 0

Hey JHKC, 

Thank you so much for your support, the changes worked perfectly and were exactly what I was seeking! 

Thank you!

rad1ant 

0 Likes