Can we change Featured Collection Price and Button Look?

[LittleFarmer]

Please help me to change Dawn theme Featured Collection look

I want Price and Add to Cart (In my case its Choose Option) button side by side like this -

Thanks.

[BSSCommerce-HDL]

Hi 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.

[LittleFarmer]

https://littlefarmerindia.myshopify.com/

please can you access with collaborator request?

[BSSCommerce-HDL]

You can follow these steps:

• Go to Online store → Themes → Edit Code

• Create a custom file and paste code below to file → Save

const addNewButtonAction = (parents) => {
  parents.forEach((items) => {
    const buttonAddElement = items.querySelector(
      ".card__content > .quick-add.no-js-hidden"
    );
    const priceProductElement = items.querySelector(".price");
    if (priceProductElement && buttonAddElement) {
      const buttonAddElementClone = buttonAddElement.cloneNode(true);
      priceProductElement.appendChild(buttonAddElementClone);
      buttonAddElement.style.display = "none!important";
      buttonAddElement.innerHTML = "";
    }
  });
};
const addSkeleton = (parents) => {
  parents.forEach((items) => {
    var container = document.createElement("div");
    container.classList.add("bss-container");

    var titlePlaceholder = document.createElement("div");
    titlePlaceholder.classList.add("bss-placeholder", "bss-title");
    titlePlaceholder.innerHTML = "
";

    var contentPlaceholder = document.createElement("div");
    contentPlaceholder.classList.add("bss-placeholder", "bss-content");
    contentPlaceholder.innerHTML = "
";

    container.appendChild(titlePlaceholder);
    container.appendChild(contentPlaceholder);
    const parentNode = items.querySelector(".card--card");
    if (parentNode) parentNode.appendChild(container);
  });
};

const removeSkeleton = (parents) => {
  parents.forEach((items) => {
    const skeletonNode = items.querySelector(".card--card .bss-container");
    if (skeletonNode) {
      skeletonNode.parentNode.removeChild(skeletonNode);
      items.querySelector(".card--card > .card__content").style.display =
        "block";
    }
  });
};

let checkNodeExist = setInterval(() => {
  const parents = document.querySelectorAll(
    `.card-wrapper.product-card-wrapper`
  );
  if (parents && parents.length) {
    addSkeleton(parents);
    addNewButtonAction(parents);
    setTimeout(() => {
      removeSkeleton(parents);
    }, 2000);
    clearInterval(checkNodeExist);
  }
}, 1000);

setTimeout(() => {
  clearInterval(checkNodeExist);
  const parents = document.querySelectorAll(
    `.card-wrapper.product-card-wrapper`
  );
  if (parents && parents.length) {
    parents.forEach((items) => {
      items.querySelector(".card--card > .card__content").style.display =
        "block";
    });
  }
}, 15000);

• Find file base.css and paste code below → Save

.card-wrapper.product-card-wrapper .price {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f5f7f5;
}

.card-wrapper.product-card-wrapper .card__information {
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    padding: 1.7rem 0 0;
    height: 100%;
}

.card-wrapper.product-card-wrapper .card__content {
    padding: 0;
    display: none;
}

.card-wrapper.product-card-wrapper .quick-add.no-js-hidden {
    margin: 0;
}

.card-wrapper.product-card-wrapper .price__container {
    padding-left: 1rem;
}

.card-wrapper.product-card-wrapper h3 {
    padding-left: 1rem;
}

.card-wrapper.product-card-wrapper .jdgm-widget.jdgm-preview-badge.jdgm--done-setup {
    padding-left: 1rem;
}

.card-wrapper.product-card-wrapper .bss-container {
  width: 100%;
  padding: 10px;
  background: #eee;
  margin: auto;
}

.card-wrapper.product-card-wrapper .bss-placeholder {
  position: relative;
  background: #ccc;
  border-radius: 3px;
  overflow: hidden;
}

.card-wrapper.product-card-wrapper .bss-placeholder:after {
  content: "";
  position: absolute;
  height: 100%;
  width: 30%;
  left: -100px;
  top: 0;
  background: linear-gradient(to right, transparent, #ffffff70, transparent);
  animation: reflect 800ms ease-out infinite;
}

.card-wrapper.product-card-wrapper .bss-title {
  width: 80%;
  min-height: 20px;
  margin-bottom: 10px;
}

.card-wrapper.product-card-wrapper .bss-content {
  width: 100%;
  min-height: 60px;
}

@keyframes reflect {
  to {
    left: calc(100% + 100px);
  }
}

.card-wrapper.product-card-wrapper.underline-links-hover:has(.bss-container) {
  height: 100%;
}

• Find the file theme.liquid paste this code to before " tag

• Final result:

Hope our solutions help you!

[LittleFarmer]

Thanks for help brother