Shopify themes, liquid, logos, and UX
Hi ,
I am trying to change buttons on lading page. Underneath each product there is button READ MORE and I would like to change it to BUY HERE.
Sounds silly but I am not able to do it! Help please!
page:
Solved! Go to the solution
This is an accepted solution.
Hi @lukasz666 ,
You can follow the instruction below:
1. Go to Online Store->Theme->Edit code
2. Asset->/style.css->paste below code at the bottom of the file:
.product-collection__buttons a.btn {
font-size: 0 !important;
}
.product-collection__buttons a.btn:after {
content: "BUY HERE";
font-size: 13px !important;
}
If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.
This is an accepted solution.
Hi @lukasz666 ,
You can follow the instruction below:
1. Go to Online Store->Theme->Edit code
2. Asset->/style.css->paste below code at the bottom of the file:
.product-collection__buttons a.btn {
font-size: 0 !important;
}
.product-collection__buttons a.btn:after {
content: "BUY HERE";
font-size: 13px !important;
}
If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.
Amazing. Works great. thanks!
Hi there,
Actually, I have discover that something else was affected by this code.
If you hover over top navigation there is this line of code which is exposed.
Hi @lukasz666 ,
You revert revert code of my try but is not problem? Because my code only need to insert in css, here is the error to be inserted in the html. Should I think you've inserted something extra?
Hi,
no no, I dont think i did. I copied it only in the end of Asset->/style.css->
Hi @lukasz666 ,
Can you revert my code to try and get the error? If the error is still there, you can copy it to the theme.scss file
Hi there,
I am afraid I cannot revert to previews code. I cant find the way to do it.
I have located the line of code you've suggested before and even when I delate it the error in the navigation is still there.
Is this possible that I accidentally pasted it also somewhere else than style.ccs ?
line wich is showing in the top navigation is
.PRODUCT-COLLECTION__BUTTONS A.BTN { FONT-SIZE: 0 !IMPORTANT; } .PRODUCT-COLLECTION__BUTTONS A.BTN:AFTER { CONTENT: "BUY HERE"; FONT-SIZE: 13PX !IMPORTANT; }
Hi @lukasz666 ,
Maybe you pasted the code somewhere else. You can file the mega menu to check again. The location it shows can be in the mega menu
Thanks you
Hi,
I am not able to find the code anywhere. Is there any way to search for this code rather than scrolling and trying to recognise it? Like search etc?
sure L here it is
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="{{ settings.color_theme }}">
<link rel="canonical" href="{{ canonical_url }}">
{% if settings.favicon != blank %}
<link rel="shortcut icon" href="{{ settings.favicon | img_url: '32x32' }}" type="image/png">
{% endif %}
{%- capture seo_title -%}
{{ page_title }}
{%- if current_tags -%}
{% assign meta_tags = current_tags | join: ', ' %} – {{ 'general.meta.tags' | t: tags: meta_tags }}
{%- endif -%}
{%- if current_page != 1 -%}
– {{ 'general.meta.page' | t: page: current_page }}
{%- endif -%}
{%- unless page_title contains shop.name -%}
– {{ shop.name }}
{%- endunless -%}
{%- endcapture -%}
<title>{{ seo_title }}</title>
{% if page_description %}
<meta name="description" content="{{ page_description | escape }}">
{% endif %}
{% include 'head-get-social-meta-tags' %}
{%- unless settings.layout_optimize_css -%}
{%- if settings.font_url -%}
{{ settings.font_url | stylesheet_tag }}
{%- endif -%}
{{ 'style.css' | asset_url | stylesheet_tag }}
{{ 'theme.scss.css' | asset_url | stylesheet_tag | class: 'ssss' }}
{%- if settings.dev_enable_custom_css == true -%}
{{ 'custom.css' | asset_url | stylesheet_tag }}
{%- endif -%}
{%- endunless -%}
<script>
window.page = {
default: {}
};
</script>
Hi there,
any chance you could help with this please? Page is still showing this code in the header menu.
thanks!
L
Hello,
Im very grateful for your help but I am left with this code sticking out in my header and I dont know what to do with it. Could you please help or I will have to revers the whole work to get rid if it.
thanks!
Hello there,
I feel a bit abandoned! I used your line of code, things went not too good and Im left here with line of code stickign out in my navigation. Please help!
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024