Moving the "sold out enquire now" button location

bridget · ‎07-10-2024

Hi There, just wanting some help with moving a "sold out" button to a different location. (as per screenshot below)

We are using the Studio theme 2.0

Thanks!

Dan-From-Ryviu · ‎07-10-2024

Please go to Online Store > Themes > Edit code > open them.liquid file, add this code after <head>

.card--card.card--media> .card__content .card__badge {
    display: flex !important;
}
.card__inner .card__content .card__badge { 
    display: none !important; 
}

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

INA_MSWEB · ‎07-23-2024

Hi @bridget Thank you for reaching out for assistance with your Shopify store. Based on the screenshot provided, it appears that you would like to relocate the "Sold Out" button to a different position within your product listing on the Studio theme 2.0. Here are the steps to achieve this:

Go to your Shopify Admin panel.
Navigate to Online Store > Themes.
Click on Actions next to your current theme and select Edit code.
In the code editor, find the section containing your product template files. This is usually found in the Sections or Snippets folder.
Look for a file named something similar to product-grid-item.liquid or product-card.liquid.
Locate the code responsible for displaying the "Sold Out" button. This might look something like {% if product.available %} or similar logic for handling sold-out states.
Adjust the HTML structure to move the button to your desired location. For example, if you want the button to appear above the product title, ensure the button's HTML code is placed above the title's code.
After relocating the button, you might need to adjust the CSS to ensure it looks appropriate in its new position. This can be done in the theme.scss.liquid or theme.css file within the Assets folder.
Add or modify CSS rules to style the "Sold Out" button accordingly.
Save the changes you made to the theme files.
Preview your store to ensure the button is correctly positioned and styled.

Please let me know if you need further assistance or if there are any specific details you would like to address.

Best regards,

Ina

If it’s helpful to you, please mark it as a solution.

Need Help with Shopify Design, Migration, Speed, or Custom tasks?
email: hi@mswebdesigner.com
Try Our Conversion Booster app to get more sales | Connect Our Founder Linkedin

bridget · ‎07-23-2024

Thanks Ina.

Just trying to locate the code. Do you thinks its this part, thats highlighted?