Spoke/Athens Theme Bulk Product Template

[offroadjim]

Hi

I have created a product template called “bulk-item-template” and I was wondering if there is a way for me to have the bulk order section laid out on the right side of the screen, as in this mock-up image? Currently, the bulk item section appears at the bottom of the page

[offroadjim]

https://mu7s1ykv7yzihrg1-20889773.shopifypreview.com/products/mikuni-low-speed-pilot-jet-copy

[Moeed]

Hey @offroadjim

You added the Bulk Order as a different section which was wrong, if you wanna display it in the right hand side then you’ll have to add the Bulk Order as a “Block” in the main product section.

So basically, it’s like converting a section into a block which of course will require custom code in your main-product.liquid file so if you’re not familiar with coding then I suggest you to let a Shopify developer handle that.

Best,
Moeed

[tim_tairli]

You can do this:
Add a “Custom liquid” section to the template area of this page template.
Paste this code into this section:

<style>
main {
  display: flex;
  flex-wrap: wrap;
}
.main > * {
  width:100%;
}

@media (min-width:1050px){
  .product.product-page {
    display: flex;
    flex-wrap: wrap;
  }
  .shopify-section.product-info-wrap {
    width: 50%;
    flex-grow:1;
  }
  .shopify-section.product-info-wrap .container {
    max-width:none;
  }
  
  .shopify-section.section-bulk-order {
    width: 50%;
    max-width:65rem;
  }
}
@media (min-width:1920px) {
  .product-media-gallery-wrap {
    max-width:calc(100% - 42rem - 6rem);
    flex-grow: 1;
  }
}
</style>

[offroadjim]

Thank you! Is there a way for me to replace the word “Variant” with “Jet Size” just on this particular page?

[tim_tairli]

There probably is a better way, but I can’t quite suggest it because I have no access to this theme code.

There is a CSS only fix though.
Add this rule right above the </style> in the code above:

.bulk-order-list-wrapper th:first-child:after {
  content: ": Nozzle Size";
}

The code will produce this:

With a more complex code it’s possible to remove the “Variant” but I hope this is good enough.

[offroadjim]

Thank you! Is there a way to eliminate that middle column that just has the title in it? So the left side of the screen would be the image with the description and all below it and the right side of the screen would just be the bulk order.?

[tim_tairli]

You may try the code like this instead if that’s what you want:

<style>
main {
  display: flex;
  flex-wrap: wrap;
}
.main > * {
  width:100%;
}

@media (min-width:1050px){
  .product.product-page {
    display: flex;
    flex-wrap: wrap;
  }
  .shopify-section.product-info-wrap {
    width: 50%;
    flex-grow:1;
  }
  .shopify-section.product-info-wrap .container {
    max-width:none;
  }
  
  .shopify-section.section-bulk-order {
    width: 50%;
    max-width:65rem;
  }
}
@media (min-width:1920px) {
  .product-media-gallery-wrap {
    max-width:calc(100% - 64rem - 6rem);
    flex-grow: 1;
  }
}

.product-info-wrap-content {
  display: none;
}
</style>

[eFoli-Marvic]

Hello @offroadjim,

You’ve done a great job creating a dedicated product template (“bulk-item-template”) to display the bulk order table on the product page.

If you’re open to using a Shopify third-party app, I’d suggest taking a look at MultiVariants – Bulk Order. The app is designed specifically for bulk ordering and offers multiple display styles, including custom layouts when needed. It also allows you to place the bulk order table anywhere on the product page and works seamlessly with all Shopify themes.

For reference, I’ve included a demo product page image below that shows how the bulk order table appears in practice. Based on your use case, this app should be a strong fit.

Thank you.