Move price to bottom left of product image and add to cart to bottom right of image. Dawn v11.

[daved1234]

Move price to bottom left of product image and add to cart to bottom right of image. Dawn v11.

I want it to look like below:

[developerSP]

Hello @daved1234 

For this we have to change the structure.

Thank you.

[BSS-Commerce]

Hi @daved1234 ,
Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

[daved1234]

My site:
https://ec6bc3-2.myshopify.com/
PW
eawhup

[BSS-Commerce · Accepted solution]

Hi @daved1234 ,

I have made a video showing how to customize it according to your wishes. Please make sure that you follow all the steps that I have shown correctly. I will also provide the code I wrote to customize it for you.

The code snippets I used, be sure to fill them in as I instructed:

<div class="custom-bss">
       {%- render 'price',
                  product: product,
                  use_variant: true,
                  show_badges: true,
                  price_class: 'price--large'
                -%}
         <product-form
      class="product-form"
      data-hide-errors="{{ gift_card_recipient_feature_active }}"
      data-section-id="{{ section.id }}"
    >
      <div class="product-form__error-message-wrapper" role="alert" hidden>
        <svg
          aria-hidden="true"
          focusable="false"
          class="icon icon-error"
          viewBox="0 0 13 13"
        >
          <circle cx="6.5" cy="6.50049" r="5.5" stroke="white" stroke-width="2"/>
          <circle cx="6.5" cy="6.5" r="5.5" fill="#EB001B" stroke="#EB001B" stroke-width="0.7"/>
          <path d="M5.87413 3.52832L5.97439 7.57216H7.02713L7.12739 3.52832H5.87413ZM6.50076 9.66091C6.88091 9.66091 7.18169 9.37267 7.18169 9.00504C7.18169 8.63742 6.88091 8.34917 6.50076 8.34917C6.12061 8.34917 5.81982 8.63742 5.81982 9.00504C5.81982 9.37267 6.12061 9.66091 6.50076 9.66091Z" fill="white"/>
          <path d="M5.87413 3.17832H5.51535L5.52424 3.537L5.6245 7.58083L5.63296 7.92216H5.97439H7.02713H7.36856L7.37702 7.58083L7.47728 3.537L7.48617 3.17832H7.12739H5.87413ZM6.50076 10.0109C7.06121 10.0109 7.5317 9.57872 7.5317 9.00504C7.5317 8.43137 7.06121 7.99918 6.50076 7.99918C5.94031 7.99918 5.46982 8.43137 5.46982 9.00504C5.46982 9.57872 5.94031 10.0109 6.50076 10.0109Z" fill="white" stroke="#EB001B" stroke-width="0.7">
        </svg>
        <span class="product-form__error-message"></span>
      </div>

      {%- form 'product',
        product,
        id: product_form_id,
        class: 'form',
        novalidate: 'novalidate',
        data-type: 'add-to-cart-form'
      -%}
        <input
          type="hidden"
          name="id"
          value="{{ product.selected_or_first_available_variant.id }}"
          disabled
          class="product-variant-id"
        >

        {%- if gift_card_recipient_feature_active -%}
          {%- render 'gift-card-recipient-form', product: product, form: form, section: section -%}
        {%- endif -%}

        <div class="product-form__buttons">
          {%- liquid
            assign check_against_inventory = true
            if product.selected_or_first_available_variant.inventory_management != 'shopify' or product.selected_or_first_available_variant.inventory_policy == 'continue'
              assign check_against_inventory = false
            endif
            if product.selected_or_first_available_variant.quantity_rule.min > product.selected_or_first_available_variant.inventory_quantity and check_against_inventory
              assign quantity_rule_soldout = true
            endif
          -%}
          <button
            id="ProductSubmitButton-{{ section_id }}"
            type="submit"
            name="add"
            class="product-form__submit button button--full-width {% if show_dynamic_checkout %}button--secondary{% else %}button--primary{% endif %}"
            {% if product.selected_or_first_available_variant.available == false or quantity_rule_soldout %}
              disabled
            {% endif %}
          >
            <span>
              {%- if product.selected_or_first_available_variant.available == false or quantity_rule_soldout -%}
                {{ 'products.product.sold_out' | t }}
              {%- else -%}
                {{ 'products.product.add_to_cart' | t }}
              {%- endif -%}
            </span>
            <div class="loading-overlay__spinner hidden">
              <svg
                aria-hidden="true"
                focusable="false"
                class="spinner"
                viewBox="0 0 66 66"
                xmlns="http://www.w3.org/2000/svg"
              >
                <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
              </svg>
            </div>
          </button>
      
        </div>
      {%- endform -%}
    </product-form>
     </div>

 &

.custom-bss{
    position: relative;
    z-index: 10;
    display: flex;
}
.custom-bss .price{
    left: 0;
    position: absolute;
}
.custom-bss .product-form{
    right: 0;
    position: absolute;
}

RESULT:

Hope it works @daved1234 !