Custom CSS

[Chuckachucka]

Hi there, is there a way to add in an extra “buy button” to the highlighted area. This button will say “Bundle Up!” and redirect customers to another product page. My theme is Sense 4.0. Thanks in advance.

[StackingContext]

Hi @Chuckachucka , can you share a link to your store?

[Chuckachucka]

The Good Paw - Compostable Dog Poop Bags NZ

[StackingContext]

@Chuckachucka does your theme has a file called buy-buttons.liquid or something along those lines?

You’ll need to add the following code in there

<a href="/your-page-url" class="product-form__submit button button--full-width button--primary">
Bundle Up
</a>

right after this

<button
  type="submit"
  name="add"
  class="product-form__submit button button--full-width button--primary"
>
  <span>Add to cart </span>
  <div class="loading-overlay__spinner hidden">
    <svg
      aria-hidden="true"
      focusable="false"
      role="presentation"
      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>

And it would end up looking like this

[Chuckachucka]

I found this in the main-product.liquid folder of my theme code. Is this the right place? Which line should I start inserting the new code?

[StackingContext]

@Chuckachucka it’s not exactly there, but close

Can you locate this line?

If so, in your snippets folder you’ll probably have the file we are looking for

[Chuckachucka]

I can only locate this section in the main-product.liquid folder. I also for some reason can’t find the snippets folder. Any ideas? I’ve tried adding a block on the actual “product information” but the buttons don’t link to anywhere and there’s now a double up, and the alignment “buy with SHOP” is not full width.

[StackingContext]

@Chuckachucka that works, what you are looking for is after the {% form ... %} line (425), which isn’t visible in the screenshot. There should be a <button> somewhere there, find the closing tag, which should be </button> and paste the code I shared above in there. Or if you don’t find it show me what’s after line 425 and I can tell you where to paste it.

[Chuckachucka]

It might not be showing explicitly because the current buy button is part of an app?

[StackingContext]

@Chuckachucka it’s there! Add this after line 450

<a href="/your-page-url" class="product-form__submit button button--full-width button--primary">
Bundle Up!
</a>

[Chuckachucka]

You’re right it is! I’ve added it in, but now it looks like this. Is it possible make it full width as well?

Also, when I click the “bundle up!” button it doesn’t link to anything. I would like it to link to Poop Bag Dispenser | thegoodpaw

[StackingContext]

@Chuckachucka , there are two “Add to cart” buttons because you added the code that generates that button twice.

As for making it link to the page you shared, do the following

<a href="/products/waste-bag-dispenser-4" class="product-form__submit button button--full-width button--primary">
Bundle Up!
</a>

To make them full width go to the Theme Editor in the Shopify Admin, click on settings, look for Custom CSS and paste the following

.product-form__buttons {
   max-width: unset;
}

See the screenshot below

[Chuckachucka]

I see, is there a way to delete the duplicate? And only have the additional buy button on this specific page? Compostable Poop Bags | thegoodpaw

Currently, the extra button is visible across all product pages.

Thanks in advance!

The Good Paw - Compostable Dog Poop Bags NZ

[StackingContext]

@Chuckachucka yes, delete from line 454 to line 472

[Chuckachucka]

The duplicate is now gone! Thanks. The bundle up button is displayed on other product pages to. Is there a way to restrict it?

[tim_1]

Just want to point out that there absolutely no need to butcher your theme code and compromise your ability to update to newer theme versions.

Use the “Custom liquid” block inside “Product info section”.

Also, luckily for Dawn family themes we have entire theme code available at Github and any version can be referenced, so it’s a very nice option to use it reference places in your theme code, like this:

sections/main-product.liquid

[StackingContext]

@Chuckachucka

product

Sure, to which page do you want to restrict it?

[Chuckachucka]

Poop Bag Dispenser | thegoodpaw and Pup Caps | thegoodpaw,

also the “add to cart” buttons on these pages are no longer black background and white text like this product page Compostable Poop Bags | thegoodpaw

[StackingContext]

@Chuckachucka to fix the button’s color please remove button--secondary from the <button> near the area you edited earlier.

To make the bundle button show on the pages you mentioned edit the code to be the following:

{% if product.handle == "pup-caps" or product.handle == "products/waste-bag-dispenser-4" %}
<a href="/your-page-url" class="product-form__submit button button--full-width button--primary">
Bundle Up!
</a>
{% endif %}

[Chuckachucka]

(post deleted by author)